{"id":1071,"date":"2009-01-10T08:04:46","date_gmt":"2009-01-10T12:04:46","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1071"},"modified":"2022-05-29T08:23:31","modified_gmt":"2022-05-29T12:23:31","slug":"tutorial-create-a-brick-breaker-game-in-as2-part-5","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as2-part-5\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS2 – 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:Number = 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 into the makeLvl()<\/tt> function where we actually create the brick:<\/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 hitTest<\/tt> if statement:<\/p>\n
    \r\n\/\/decrementing how many bricks are on the stage\r\n_root.brickAmt --;\r\n<\/pre>\n
    That was pretty easy, right? Now, we have to add some code that will check if the value of bricks is 0.
    \nYou can do so in the onEnterFrame()<\/tt> function:<\/p>\n
    \r\n\/\/checking if the bricks are all gone\r\nif(brickAmt == 0){\r\n\t\/\/reset the level by increasing the level\r\n\tcurrentLvl ++;\r\n\t\/\/and re-running makeLvl\r\n\tmakeLvl();\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. The first thing we need to do is create a black rectangle that covers the entire stage. Then, we have to turn it into a MovieClip. Name it mcBg, Export it for ActionScript, and give it an instance name of mcBg. Then, add the following to the bottom of the code:  <\/p>\n
    \r\nmcBg.onRelease = function(){ \/\/creating a function that will run when bg is clicked\r\n\t\/\/move the bg out of range so it isn't bothersome\r\n\tmcBg._x = 800;\r\n}\r\n<\/pre>\n
    Now, we have to add the entire<\/strong> onEnterFrame()<\/tt> function to this, so it looks like this:<\/p>\n
    \r\nmcBg.onRelease = function(){ \/\/creating a function that will run when bg is clicked\r\n\t\/\/move the bg out of range so it isn't bothersome\r\n\tmcBg._x = 800;\r\n\t_root.onEnterFrame = function(){ \/\/this function will run during every single frame\r\n\t\t\/\/The paddle follows the mouse\r\n\t\tmcPaddle._x = _xmouse - mcPaddle._width*.5;\r\n\t\t\r\n\t\t\/\/If the mouse goes off too far to the left\r\n\t\tif(_xmouse < mcPaddle._width \/ 2){\r\n\t\t\t\/\/Keep the paddle on stage\r\n\t\t\tmcPaddle._x = 0;\r\n\t\t}\r\n\t\t\/\/If the mouse goes off too far to the right\r\n\t\tif(_xmouse > Stage.width - mcPaddle._width \/ 2){\r\n\t\t\t\/\/Keep the paddle on stage\r\n\t\t\tmcPaddle._x = Stage.width - mcPaddle._width;\r\n\t\t}\r\n\t\t\r\n\t\t\/\/MOVING THE BALL\r\n\t\tmcBall._x += ballXSpeed;\r\n\t\tmcBall._y += ballYSpeed;\r\n\t\t\/\/Bouncing the ball off of the walls\r\n\t\tif(mcBall._x >= Stage.width-mcBall._width){\r\n\t\t\t\/\/if the ball hits the right side\r\n\t\t\t\/\/of the screen, then bounce off\r\n\t\t\tballXSpeed *= -1;\r\n\t\t}\r\n\t\tif(mcBall._x <= 0){\r\n\t\t\t\/\/if the ball hits the left side\r\n\t\t\t\/\/of the screen, then bounce off\r\n\t\t\tballXSpeed *= -1;\r\n\t\t}\r\n\t\tif(mcBall._y >= Stage.height-mcBall._height){\r\n\t\t\t\/\/if the ball hits the bottom\r\n\t\t\t\/\/then bounce up\r\n\t\t\tballYSpeed *= -1;\r\n\t\t}\r\n\t\tif(mcBall._y <= 0){\r\n\t\t\t\/\/if the ball hits the top\r\n\t\t\t\/\/then bounce down\r\n\t\t\tballYSpeed *= -1;\r\n\t\t}\r\n\t\t\r\n\t\tif(mcBall.hitTest(mcPaddle)){\r\n\t\t\t\/\/calculate the ball angle if ball hits paddle\r\n\t\t\tcalcBallAngle();\r\n\t\t}\r\n\t\t\r\n\t\t\/\/checking if the bricks are all gone\r\n\t\tif(brickAmt == 0){\r\n\t\t\t\/\/reset the level by increasing the level\r\n\t\t\tcurrentLvl ++;\r\n\t\t\t\/\/and re-running makeLvl\r\n\t\t\tmakeLvl();\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n
    This is pretty solid code, but it does have some issues. One 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 paste in this code where we level up in the onEnterFrame()<\/tt> function:<\/p>\n
    \r\n\/\/checking if the bricks are all gone\r\nif(brickAmt == 0){\r\n\t\/\/reset the level by increasing the level\r\n\tcurrentLvl ++;\r\n\t\/\/and re-running makeLvl\r\n\tmakeLvl();\r\n\t\/\/reset the ball's position\r\n\tmcBall._x = 175;\r\n\tmcBall._y = 250;\r\n\t\/\/then move the background back\r\n\tmcBg._x = 0;\r\n\t\/\/and remove all of these events\r\n\t_root.onEnterFrame = null;\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:Number = 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.height-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 brick's onEnterFrame<\/tt> function.<\/p>\n
    \r\nif(_root.gameOver){\/\/if game's over\r\n\tthis.removeMovieClip();\/\/then remove this from stage\r\n}\r\n<\/pre>\n
    Now, we have to make the player be able to restart the game after losing. This will be easy. Just add the mcBg back to the stage that will reset the game if the stage is clicked. This code should be in the \"lose\" frame:<\/p>\n
    \r\nmcBg._x = 0; \/\/putting the mcBg back\r\nmcBg.onRelease = function(){\r\n\tgotoAndPlay(1);\/\/restart the game\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<\/h4>\n
    <\/embed><\/object><\/p>\n
    Source .fla File<\/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,7,65,4,6],"tags":[25,7,14,66,26,67,19,18,22],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1071"}],"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=1071"}],"version-history":[{"count":5,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1071\/revisions"}],"predecessor-version":[{"id":1345,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1071\/revisions\/1345"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1071"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}