{"id":119,"date":"2008-07-29T09:44:54","date_gmt":"2008-07-29T13:44:54","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=119"},"modified":"2022-05-29T08:23:39","modified_gmt":"2022-05-29T12:23:39","slug":"tutorial-create-a-brick-breaker-game-in-as3","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as3\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS3"},"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 1: Coding Paddle Movement<\/h3>\n

    Ok, this is going to be my first tutorial on hopefully a simple subject. This is probably going to be broken up into a few parts. So, here we go.<\/p>\n

    First of all, we’re going to make the background of the stage black, simply because it looks better, and we’re going to set the frame rate to 24. Then, we’re going to draw the paddle and we’re going to convert it into a movieclip.
    \n
    \nMine is 55×10<\/p>\n

    Next, we’re going to give the paddle an instance name, mcPaddle<\/tt>. The instance name is case sensitive, so type it exactly the way I did.<\/p>\n

    Now, we get into some basic ActionScript. Create a new layer named “actions” where all of your code will go in. Next, type in this code:<\/p>\n

    \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}\r\n\r\nfunction movePaddle(event:Event):void{\r\n\t\/\/The paddle follows the mouse\r\n\tmcPaddle.x = mouseX;\r\n}\r\n\r\nbeginCode();\r\n<\/pre>\n
    Hopefully, I’ve explained enough in the comments for you to get an idea of what the code does. If you test the movie, you might see a few problems. First of all, the paddle is not centered with the mouse, but is left aligned with it. This is easy to fix. Just replace:<\/p>\n
    \r\nmcPaddle.x = mouseX;\r\n<\/pre>\n
    with<\/p>\n
    \r\nmcPaddle.x = mouseX - mcPaddle.width \/ 2;\r\n<\/pre>\n
    This code basically makes it so instead of using the paddle’s x<\/tt> value, which is the left side of the paddle, it uses the middle of the paddle instead to follow the mouse.<\/p>\n
    Another problem with this code is that the paddle sometimes runs off stage. We don’t want this, it annoys the user. So, we’re going to add the following code to the movePaddle function.<\/p>\n
    \r\n\/\/If the mouse goes off too far to the left\r\nif(mouseX < mcPaddle.width \/ 2){\r\n\t\/\/Keep the paddle on stage\r\n\tmcPaddle.x = 0;\r\n}\r\n\/\/If the mouse goes off too far to the right\r\nif(mouseX > stage.stageWidth - mcPaddle.width \/ 2){\r\n\t\/\/Keep the paddle on stage\r\n\tmcPaddle.x = stage.stageWidth - mcPaddle.width;\r\n}\r\n<\/pre>\n
    This code will keep your paddle in bounds, no matter how large the stage is or how wide your paddle is. I’m leaving the explanation of the code up to you to figure out yourself. After all, you can never become a real programmer if you just copy and paste the code without any idea of what it means.<\/p>\n
    And now I conclude part one of this tutorial with the final code you should have in your file with an example of what mine looks like.<\/p>\n
    \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}\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\nbeginCode();\r\n<\/pre>\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 1: Coding Paddle Movement Ok, this is going to be my first tutorial on hopefully a simple subject. This is probably going to be broken up into a few parts. So, […]<\/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\/119"}],"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=119"}],"version-history":[{"count":25,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"predecessor-version":[{"id":366,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/119\/revisions\/366"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}