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.