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

    The next obvious step in creating a brick breaker game is making the ball. So, I’m just going to make a small 10×10 pixel white circle into the symbol, “mcBall”.
    \n\"My
    \nI’m also going to give my ball an instance name of mcBall.<\/p>\n

    Now it’s time to create some code for our lil’ ball. We’re going to do the same thing we did for the paddle and add an enter frame event listener to it in the beginCode()<\/tt> function.<\/p>\n

    \r\n\/\/Adds a listener to the ball which\r\n\/\/runs a function every time a frame passes\r\nmcBall.addEventListener(Event.ENTER_FRAME, moveBall);\r\n<\/pre>\n
    Then, we’re going to create the function which moves the ball.<\/p>\n
    \r\nfunction moveBall(event:Event):void{\r\n\t\/\/Code for moving ball goes here\r\n}\r\n<\/pre>\n
    Before we actually create the code for ball movement, we need 2 variables. Can you guess what they are? Great job! They are<\/em> the x speed variable and the y speed variable! You’re such a smart little child. Add the following code to the very beginning (line 1) of your code. I like to organize all my variables so that they are all in the same place.<\/p>\n
    \r\n\/\/These variables are needed for moving the ball\r\nvar ballXSpeed:Number = 10; \/\/X Speed of the Ball\r\nvar ballYSpeed:Number = 10; \/\/Y Speed of the Ball\r\n<\/pre>\n
    You can change these values if you want, but this is what I’m going to use. Now, we have to use these variables to make the ball move. We should now add the following code to the moveBall()<\/tt> function:<\/p>\n
    \r\nmcBall.x += ballXSpeed;\r\nmcBall.y += ballYSpeed;\r\n<\/pre>\n
    Of course, when you test the movie, the ball is just going to move diagonally without any force stopping it. The next step is to make the ball bounce off of the walls. This is pretty easy if you think about it. All you have to do is multiply the x speed by -1 if it hits a vertical wall, and the same for the y speed with a horizontal wall. Let’s do it. Add the following code to the moveBall()<\/tt> function.<\/p>\n
    \r\n\/\/Bouncing the ball off of the walls\r\nif(mcBall.x >= stage.stageWidth-mcBall.width){\r\n\t\/\/if the ball hits the right side\r\n\t\/\/of the screen, then bounce off\r\n\tballXSpeed *= -1;\r\n}\r\nif(mcBall.x <= 0){\r\n\t\/\/if the ball hits the left side\r\n\t\/\/of the screen, then bounce off\r\n\tballXSpeed *= -1;\r\n}\r\nif(mcBall.y >= stage.stageHeight-mcBall.height){\r\n\t\/\/if the ball hits the bottom\r\n\t\/\/then bounce up\r\n\tballYSpeed *= -1;\r\n}\r\nif(mcBall.y <= 0){\r\n\t\/\/if the ball hits the top\r\n\t\/\/then bounce down\r\n\tballYSpeed *= -1;\r\n}\r\n<\/pre>\n
    If you test the movie, then the ball will just keep on bouncing off the walls. Of course, we're going to change the bottom bounce, but for now we'll keep it like this. The next step is making the ball bounce off of the paddle. This might take a little more math skills. We don't want the ball to keep on moving at the same angle the whole time, so we're going to make it change depending on which part of the paddle it hits. Because this will take some intense calculations, we're going to make a new function called calcBallAngle()<\/tt>. So, let us delve into this code.<\/p>\n
    \r\n\/\/This code should be placed in the moveBall() function\r\nif(mcBall.hitTestObject(mcPaddle)){\r\n\tcalcBallAngle();\r\n}\r\n<\/pre>\n
    This part is simple. It just runs the calcBallAngle()<\/tt> function whenever the ball hits the paddle. Now, here's the code for the actual function. It's pretty intense.<\/p>\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<\/pre>\n
    I've commented the code out pretty extensively. Just read it and hopefully you'll understand.<\/p>\n
    That's basically all that I'm going to teach you today. Here's an example of what the final ActionScript should look like:<\/p>\n
    \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}\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\nbeginCode();\r\n<\/pre>\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 2: Programming the Ball The next obvious step in creating a brick breaker game is making the ball. So, I’m just going to make a small 10×10 pixel white circle into […]<\/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\/227"}],"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=227"}],"version-history":[{"count":14,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":1059,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions\/1059"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}