{"id":250,"date":"2008-07-30T13:25:13","date_gmt":"2008-07-30T17:25:13","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=250"},"modified":"2022-05-29T08:23:39","modified_gmt":"2022-05-29T12:23:39","slug":"tutorial-create-a-brick-breaker-game-in-as3-part-3","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as3-part-3\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS3 – Part 3"},"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 3: Setting Up the Bricks on Stage<\/h3>\n

    Ok, we’ve got the paddle and the ball. Now, the only major thing left to program is the brick. This is also the hardest to program, so it will be split up into 2 parts, setting them up, and breaking them down. Let us begin.<\/p>\n

    First of all, we need to look at how we’re going to set the bricks on the stage. We’re going to use an array with different numbers that will signify different bricks. In this tutorial, because we are keeping it simple, we will only use 2 different numbers, 1 and 0. 1 will mean to place a brick, and 0 will mean not to. An example for a simple level would be this:<\/p>\n

    \r\n\/\/this would create one row of bricks\r\nlvl1Array:Array = new Array(1,1,1,1,1,1,1);\r\n<\/pre>\n
    Of course, this code will do nothing unless we create a function to actually make the bricks. The first step to this is actually making the brick movieclip. So, mine is just going to be a plain white, with dimensions of 70×15 pixels. Also, this movieclip should be exported for ActionScript so we can dynamically add it to the stage.
    \n\"Convert<\/p>\n
    Got it? Now, here comes the tricky part, programming it. First of all, we are going to define a function called makeLvl()<\/tt>. Then, we are going to need to make some starting variables. These variables, however, can’t be reset every time the user beats a level, so it we have to make a frame before the the frame with all of the code. If you don’t get it, then here’s a picture.
    \n\"Making<\/p>\n
    In this frame, put the following code:<\/p>\n
    \r\n\/\/Current level player is on\r\nvar currentLvl:int = 1;\r\n\/\/The array code for lvl 1\r\nvar lvl1Code:Array = new Array(1,1,1,1,1,1,1);\r\n\/\/The array that contains all of the level codes\r\nvar lvlArray:Array = new Array(lvl1Code);\r\n<\/pre>\n
    Hopefully, I’ve explained what each of the variables do well enough that you understand. Also, in the 2nd frame, the game frame, just add a stop();<\/tt> to the beginning. This way, the game doesn’t keep on looping.<\/p>\n
    Now, we’re going to go back to the game farme and we are going to add some intense code into the makeLvl()<\/tt> function. Here we go:<\/p>\n
    \r\nfunction makeLvl():void{ \/\/Places bricks onto Level\r\n\t\/\/finding the array length of the lvl code\r\n\t\r\n\t\/\/The index has to be currentLvl-1 because:\r\n\t\/\/array indexes start on 0 and our lvl starts at 1\r\n\t\/\/our level will always be 1 higher than the actual index of the array\r\n\tvar arrayLength:int = lvlArray[currentLvl-1].length;\r\n\t\/\/the current row of bricks we are creating\r\n\tvar brickRow:int = 0;\r\n\t\/\/Now, creating a loop which places the bricks onto the stage\r\n\tfor(var i:int = 0;i\n
    Now, just put makeLvl();<\/tt> into the beginCode()<\/tt> function and you're set. The next step is getting the ball to break the bricks. But, that is for a later time. Here is the code you should have:<\/p>\n
    First Frame:<\/h4>\n
    \r\n\/\/Current level player is on\r\nvar currentLvl:int = 1;\r\n\/\/The array code for lvl 1\r\nvar lvl1Code:Array = new Array(1,1,1,1,1,1,1);\r\n\/\/The array that contains all of the level codes\r\nvar lvlArray:Array = new Array(lvl1Code);\r\n<\/pre>\n
    Game Frame:<\/h4>\n
    \r\nstop();\r\n\/\/VARIABLES\r\n\/\/These variables are needed for moving the ball\r\nvar ballXSpeed:Number = 8; \/\/X Speed of the Ball\r\nvar ballYSpeed:Number = 8; \/\/Y Speed of the Ball\r\n\/\/First I defined a function where all of\r\n\/\/the code needed to start the game is placed\r\n\/\/This includes listeners, variable definitions, and other stuff\r\nfunction beginCode():void{\r\n\t\/\/Adds a listener to the paddle which \r\n\t\/\/runs a function every time a frame passes\r\n\tmcPaddle.addEventListener(Event.ENTER_FRAME, movePaddle);\r\n\t\/\/Adds a listener to the ball which\r\n\t\/\/runs a function every time a frame passes\r\n\tmcBall.addEventListener(Event.ENTER_FRAME, moveBall);\r\n\t\/\/making the level\r\n\tmakeLvl();\r\n}\r\n\r\nfunction movePaddle(event:Event):void{\r\n\t\/\/The paddle follows the mouse\r\n\tmcPaddle.x = mouseX - mcPaddle.width \/ 2;\r\n\t\/\/Keeping the paddle in the stage\r\n\t\r\n\t\/\/If the mouse goes off too far to the left\r\n\tif(mouseX < mcPaddle.width \/ 2){\r\n\t\t\/\/Keep the paddle on stage\r\n\t\tmcPaddle.x = 0;\r\n\t}\r\n\t\/\/If the mouse goes off too far to the right\r\n\tif(mouseX > stage.stageWidth - mcPaddle.width \/ 2){\r\n\t\t\/\/Keep the paddle on stage\r\n\t\tmcPaddle.x = stage.stageWidth - mcPaddle.width;\r\n\t}\r\n}\r\n\r\nfunction moveBall(event:Event):void{\r\n\t\/\/Code for moving ball goes here\r\n\tmcBall.x += ballXSpeed; \/\/Move the ball horizontally\r\n\tmcBall.y += ballYSpeed; \/\/Move the ball vertically\r\n\t\/\/Bouncing the ball off of the walls\r\n\tif(mcBall.x >= stage.stageWidth-mcBall.width){\r\n\t\t\/\/if the ball hits the right side\r\n\t\t\/\/of the screen, then bounce off\r\n\t\tballXSpeed *= -1;\r\n\t}\r\n\tif(mcBall.x <= 0){\r\n\t\t\/\/if the ball hits the left side\r\n\t\t\/\/of the screen, then bounce off\r\n\t\tballXSpeed *= -1;\r\n\t}\r\n\tif(mcBall.y >= stage.stageHeight-mcBall.height){\r\n\t\t\/\/if the ball hits the bottom\r\n\t\t\/\/then bounce up\r\n\t\tballYSpeed *= -1;\r\n\t}\r\n\tif(mcBall.y <= 0){\r\n\t\t\/\/if the ball hits the top\r\n\t\t\/\/then bounce down\r\n\t\tballYSpeed *= -1;\r\n\t}\r\n\t\/\/Hitting the paddle\r\n\tif(mcBall.hitTestObject(mcPaddle)){\r\n\t\tcalcBallAngle();\r\n\t}\r\n}\r\n\r\nfunction calcBallAngle():void{\r\n\t\/\/ballPosition is the position of the ball is on the paddle\r\n\tvar ballPosition:Number = mcBall.x - mcPaddle.x;\r\n\t\/\/hitPercent converts ballPosition into a percent\r\n\t\/\/All the way to the left is -.5\r\n\t\/\/All the way to the right is .5\r\n\t\/\/The center is 0\r\n\tvar hitPercent:Number = (ballPosition \/ (mcPaddle.width - mcBall.width)) - .5;\r\n\t\/\/Gets the hitPercent and makes it a larger number so the\r\n\t\/\/ball actually bounces\r\n\tballXSpeed = hitPercent * 10;\r\n\t\/\/Making the ball bounce back up\r\n\tballYSpeed *= -1;\r\n}\r\n\r\nfunction makeLvl():void{ \/\/Places bricks onto Level\r\n\t\/\/finding the array length of the lvl code\r\n\t\r\n\t\/\/The index has to be currentLvl-1 because:\r\n\t\/\/array indexes start on 0 and our lvl starts at 1\r\n\t\/\/our level will always be 1 higher than the actual index of the array\r\n\tvar arrayLength:int = lvlArray[currentLvl-1].length;\r\n\t\/\/the current row of bricks we are creating\r\n\tvar brickRow:int = 0;\r\n\t\/\/Now, creating a loop which places the bricks onto the stage\r\n\tfor(var i:int = 0;i\n
    And the final product:<\/p>\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 3: Setting Up the Bricks on Stage Ok, we’ve got the paddle and the ball. Now, the only major thing left to program is the brick. This is also the hardest […]<\/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\/250"}],"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=250"}],"version-history":[{"count":11,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":368,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/250\/revisions\/368"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}