{"id":281,"date":"2008-07-31T12:44:38","date_gmt":"2008-07-31T16:44:38","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=281"},"modified":"2022-05-29T08:23:38","modified_gmt":"2022-05-29T12:23:38","slug":"tutorial-create-a-brick-breaker-game-in-as3-part-5","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as3-part-5\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS3 – Part 5"},"content":{"rendered":"
\n

Table of Contents<\/h3>\n
    \n
  1. Coding Paddle Movement<\/a><\/li>\n
  2. Programming the Ball<\/a><\/li>\n
  3. Setting Up the Bricks on Stage<\/a><\/li>\n
  4. Hit Testing the Bricks<\/a><\/li>\n
  5. Creating Levels<\/a><\/li>\n
  6. Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n

    Step 5: Creating Levels<\/h3>\n

    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.<\/p>\n

    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.<\/p>\n

    \r\nvar brickAmt:int = 0;\r\n<\/pre>\n
    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<\/tt> in the beginClass()<\/tt> function.<\/p>\n
    \r\n\/\/incrementing how many bricks are on the stage\r\n_root.brickAmt ++;\r\n<\/pre>\n
    Next, we have to decrement the number every time a brick is destroyed. Just type in this code in the hitTestObject<\/tt> if statement.<\/p>\n
    \r\n\/\/decrementing the amount of bricks on stage\r\n_root.brickAmt --;\r\n<\/pre>\n
    That was pretty easy, right? Now, we have to add a listener that will check if the value of bricks is 0.
    \nYou can do so in the beginCode()<\/tt> function.<\/p>\n
    \r\n\/\/adding a listener to check if the level is done\r\naddEventListener(Event.ENTER_FRAME, checkLevel);\r\n<\/pre>\n
    Next, we have to define this function. Place this at the end of the code, but before we run beginCode()<\/tt><\/p>\n
    \r\nfunction checkLevel(event:Event):void{\r\n\t\/\/checking if the bricks are all gone\r\n\tif(brickAmt == 0){\r\n\t\t\/\/reset the level by increasing the level\r\n\t\tcurrentLvl ++;\r\n\t\t\/\/and re-running makeLvl\r\n\t\tmakeLvl();\r\n\t}\r\n}\r\n<\/pre>\n
    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.<\/p>\n
    Remember at the bottom of the code when we ran beginCode()<\/tt>? Well, we can just have it run after listening to a mouse click. Here’s the code.<\/p>\n
    \r\n\/\/if the mouse clicks, then begin the game\r\nstage.addEventListener(MouseEvent.CLICK, beginCode);\r\n<\/pre>\n
    Just replace beginCode();<\/tt> with that. We also have to change the beginCode()<\/tt> function itself just slightly so it will accept a mouse event. When we define the function, just change it to:<\/p>\n
    \r\nfunction beginCode(event:MouseEvent):void{\r\n\t\/\/removes the listener for a click\r\n\tstage.removeEventListener(MouseEvent.CLICK, beginCode);\r\n\t[..Code..]\r\n}\r\n<\/pre>\n
    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()<\/tt> out of the beginCode()<\/tt> function and put it at the bottom of the code.<\/p>\n
    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()<\/tt> function.<\/p>\n
    \r\nfunction checkLevel(event:Event):void{\r\n\t\/\/checking if the bricks are all gone\r\n\tif(brickAmt == 0){\r\n\t\t\/\/reset the level by increasing the level\r\n\t\tcurrentLvl ++;\r\n\t\t\/\/and re-running makeLvl\r\n\t\tmakeLvl();\r\n\t\t\/\/then resetting the ball's and paddle's position\r\n\t\tmcBall.x = 150;\r\n\t\tmcBall.y = 265;\r\n\t\tmcPaddle.x = 230;\r\n\t\t\/\/then removing all of the listeners\r\n\t\tmcPaddle.removeEventListener(Event.ENTER_FRAME, movePaddle);\r\n\t\tmcBall.removeEventListener(Event.ENTER_FRAME, moveBall);\r\n\t\tremoveEventListener(Event.ENTER_FRAME, checkLevel);\r\n\t\t\/\/then listening for a mouse click to start the game again\r\n\t\tstage.addEventListener(MouseEvent.CLICK, beginCode);\r\n\t}\r\n}\r\n<\/pre>\n
    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.<\/p>\n
    \r\n\/\/how many lives you got\r\nvar lives:int = 3;\r\n\/\/if the game is over\r\nvar gameOver:Boolean = false;\r\n<\/pre>\n
    Then, we have to subtract a life every time the ball hits the floor and do other stuff when the lives are all gone.<\/p>\n
    \r\nif(mcBall.y >= stage.stageHeight-mcBall.height){\r\n\t\/\/if the ball hits the bottom\r\n\t\/\/then bounce up and lose a life\r\n\tballYSpeed *= -1;\r\n\tlives --;\r\n\t\/\/if there aren't any lives left\r\n\tif(lives <= 0){\r\n\t\t\/\/the game is over now\r\n\t\tgameOver = true;\r\n\t\t\/\/go to a lose frame\r\n\t\tgotoAndStop('lose');\r\n\t}\r\n}\r\n<\/pre>\n
    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.<\/p>\n
    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<\/tt> function in Brick.as.<\/p>\n
    \r\n\/\/checking if the player has lost\r\nif(_root.gameOver){\r\n\t\/\/destroy this brick\r\n\tthis.parent.removeChild(this);\r\n\t\/\/stop running this code\r\n\tremoveEventListener(Event.ENTER_FRAME, enterFrameEvents);\r\n}\r\n<\/pre>\n
    For some reason, this code outputs an error. Don't worry though, nothing is really wrong.<\/p>\n
    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.<\/p>\n
    \r\n\/\/The lose frame\r\n\r\n\/\/resetting the game if the mouse is clicked\r\nstage.addEventListener(MouseEvent.CLICK, resetGame);\r\n\r\nfunction resetGame(event:MouseEvent):void{\r\n\t\/\/removing this listener\r\n\tstage.addEventListener(MouseEvent.CLICK, resetGame);\r\n\t\/\/resetting the game\r\n\tgotoAndPlay(1);\r\n}\r\n<\/pre>\n
    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.<\/p>\n
    The Final Product:<\/h3>\n
    <\/embed><\/object><\/p>\n
    Source Files (Zipped)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Table of Contents Coding Paddle Movement Programming the Ball Setting Up the Bricks on Stage Hit Testing the Bricks Creating Levels Finishing Touches Step 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,8,65,4,6],"tags":[25,8,14,66,26,67,19,18,22],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":11,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":379,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/379"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}