Flash Game Tuts - Free Flash Game Tutorials in AS2 and AS3

How to Create a Brick Breaker Game in AS3 – Part 5

Part 5: Creating Levels

Now that we’ve got the basic gameplay down, we can create some levels. Because we’re making only a simple game, we aren’t going to make that many. But before we even start making multiple levels, we have to make it possible to win or lose a level. This will be pretty easy.

We’re first going make it possible to beat the level. In order for this to happen, we have to track how many bricks are on the stage. Just define the following variable at the top of the code.

var brickAmt:int = 0;

Now, we have to increment this number every time a brick is placed onto the stage. Type in this code in the Brick.as after defining _root in the beginClass() function.

//incrementing how many bricks are on the stage
_root.brickAmt ++;

Next, we have to decrement the number every time a brick is destroyed. Just type in this code in the hitTestObject if statement.

//decrementing the amount of bricks on stage
_root.brickAmt --;

That was pretty easy, right? Now, we have to add a listener that will check if the value of bricks is 0.
You can do so in the beginCode() function.

//adding a listener to check if the level is done
addEventListener(Event.ENTER_FRAME, checkLevel);

Next, we have to define this function. Place this at the end of the code, but before we run beginCode()

function checkLevel(event:Event):void{
	//checking if the bricks are all gone
	if(brickAmt == 0){
		//reset the level by increasing the level
		currentLvl ++;
		//and re-running makeLvl
		makeLvl();
	}
}

When this code runs, nothing will happen when you break all of the bricks because we haven’t defined more levels. But, there is one thing I want to fix before doing that. The game starts automatically, even if the player isn’t ready. So, we want to start the level only when the user first clicks on the screen. This is actually easier than you might think.

Remember at the bottom of the code when we ran beginCode()? Well, we can just have it run after listening to a mouse click. Here’s the code.

//if the mouse clicks, then begin the game
stage.addEventListener(MouseEvent.CLICK, beginCode);

Just replace beginCode(); with that. We also have to change the beginCode() function itself just slightly so it will accept a mouse event. When we define the function, just change it to:

function beginCode(event:MouseEvent):void{
	//removes the listener for a click
	stage.removeEventListener(MouseEvent.CLICK, beginCode);
	[..Code..]
}

If you test the movie, however, it looks a bit weird. The bricks appear only after clicking. This can be easily fixed. Just take the makeLvl() out of the beginCode() function and put it at the bottom of the code.

The next problem we have to fix is that the level is immediately made after you break all of the bricks, without resetting the ball’s position or anything (it may not be like that on yours, but trust me, I’ve tested it). Just place this code in the CheckLevel() function.

function checkLevel(event:Event):void{
	//checking if the bricks are all gone
	if(brickAmt == 0){
		//reset the level by increasing the level
		currentLvl ++;
		//and re-running makeLvl
		makeLvl();
		//then resetting the ball's and paddle's position
		mcBall.x = 150;
		mcBall.y = 265;
		mcPaddle.x = 230;
		//then removing all of the listeners
		mcPaddle.removeEventListener(Event.ENTER_FRAME, movePaddle);
		mcBall.removeEventListener(Event.ENTER_FRAME, moveBall);
		removeEventListener(Event.ENTER_FRAME, checkLevel);
		//then listening for a mouse click to start the game again
		stage.addEventListener(MouseEvent.CLICK, beginCode);
	}
}

Now that we can beat a level, we now have to lose a level. We’re going to have to add a lives variable at the top first. We’re also going add a variable that defines if the game is over.

//how many lives you got
var lives:int = 3;
//if the game is over
var gameOver:Boolean = false;

Then, we have to subtract a life every time the ball hits the floor and do other stuff when the lives are all gone.

if(mcBall.y >= stage.stageHeight-mcBall.height){
	//if the ball hits the bottom
	//then bounce up and lose a life
	ballYSpeed *= -1;
	lives --;
	//if there aren't any lives left
	if(lives <= 0){
		//the game is over now
		gameOver = true;
		//go to a lose frame
		gotoAndStop('lose');
	}
}

Of course, now we have to create a frame called "lose". I'm just going to make a frame that that has the text, "YOU LOSE". Make sure to give your frame a label of "lose", or the code won't work.

Also, we have to remove the bricks from the stage, because they were added dynamically and won't go away if you just change a frame. So, type the following code into the enterFrameEvents function in Brick.as.

//checking if the player has lost
if(_root.gameOver){
	//destroy this brick
	this.parent.removeChild(this);
	//stop running this code
	removeEventListener(Event.ENTER_FRAME, enterFrameEvents);
}

For some reason, this code outputs an error. Don't worry though, nothing is really wrong.

Now, we have to make the player be able to restart the game after losing. This will be easy. Just add a listener to the stage that will reset the game if the stage is clicked. This code should be in the "lose" frame.

//The lose frame

//resetting the game if the mouse is clicked
stage.addEventListener(MouseEvent.CLICK, resetGame);

function resetGame(event:MouseEvent):void{
	//removing this listener
	stage.addEventListener(MouseEvent.CLICK, resetGame);
	//resetting the game
	gotoAndPlay(1);
}

Well, that's all for this lesson. The next one will be the final one, where we add some finishing touches, and fix some bugs.