{"id":1056,"date":"2009-01-10T08:01:42","date_gmt":"2009-01-10T12:01:42","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1056"},"modified":"2022-05-29T08:23:31","modified_gmt":"2022-05-29T12:23:31","slug":"tutorial-create-a-brick-breaker-game-in-as2-part-2","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as2-part-2\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS2 – 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, 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 onEnterFrame()<\/tt> function:<\/p>\n
    \r\n\/\/MOVING THE BALL\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 onEnterFrame()<\/tt> function:<\/p>\n
    \r\n\t\/\/Bouncing the ball off of the walls\r\n\tif(mcBall._x >= Stage.width-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.height-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<\/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's first add this code to the onEnterFrame()<\/tt> function.<\/p>\n
    \r\nif(mcBall.hitTest(mcPaddle)){\r\n\t\/\/calculate the ball angle if ball hits paddle\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. Join us next time!<\/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 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,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\/1056"}],"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=1056"}],"version-history":[{"count":9,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1056\/revisions"}],"predecessor-version":[{"id":1348,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1056\/revisions\/1348"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1056"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}