{"id":1069,"date":"2009-01-10T08:03:45","date_gmt":"2009-01-10T12:03:45","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1069"},"modified":"2022-05-29T08:23:31","modified_gmt":"2022-05-29T12:23:31","slug":"tutorial-create-a-brick-breaker-game-in-as2-part-4","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-brick-breaker-game-in-as2-part-4\/","title":{"rendered":"Tutorial: Create a Brick Breaker Game in AS2 – Part 4"},"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 4: Hit Testing the Bricks<\/h3>\n

    Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. All you have to do is change this code in the makeLvl()<\/tt> function:<\/p>\n

    \r\n\t\tif(lvlArray[currentLvl-1][i] == 1){\r\n\t\t\t\/\/creating a variable which holds the brick instance\r\n\t\t\t_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());\r\n\t\t\t\/\/setting the brick's coordinates via the i variable and brickRow\r\n\t\t\t_root['brick'+i]._x = 15+(i-brickRow*7)*75;\r\n\t\t\t_root['brick'+i]._y = 10+brickRow*20;\r\n\t\t\t\/\/checks if the current brick needs a new row\r\n\t\t\tfor(var c:Number = 1;c<=10;c++){\r\n\t\t\t\tif(i == c*7-1){\r\n\t\t\t\t\tbrickRow ++;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n<\/pre>\n
    to this:<\/p>\n
    \r\n\t\tif(lvlArray[currentLvl-1][i] == 1){\r\n\t\t\t\/\/creating a variable which holds the brick instance\r\n\t\t\t_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());\r\n\t\t\t\/\/setting the brick's coordinates via the i variable and brickRow\r\n\t\t\t_root['brick'+i]._x = 15+(i-brickRow*7)*75;\r\n\t\t\t_root['brick'+i]._y = 10+brickRow*20;\r\n\t\t\t\/\/giving this brick some actions\r\n\t\t\t_root['brick'+i].onEnterFrame = function(){\r\n\t\t\t\tif(this.hitTest(_root.mcBall)){\/\/if this touches the ball\r\n\t\t\t\t\t\/\/then destroy this mofugger!\r\n\t\t\t\t\tthis.removeMovieClip();\r\n\t\t\t\t\t\/\/and make the ball bounce away\r\n\t\t\t\t\tballYSpeed *= -1;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\/\/checks if the current brick needs a new row\r\n\t\t\tfor(var c:Number = 1;c<=10;c++){\r\n\t\t\t\tif(i == c*7-1){\r\n\t\t\t\t\tbrickRow ++;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n<\/pre>\n
    That was pretty easy, wasn't it? Definitely much easier than what had to be done in AS3. Well, since we have time, I'm going to post here what your code should look like at this time:<\/p>\n
    Frame 1:<\/h4>\n
    \r\n\/\/Current level player is on\r\nvar currentLvl:Number = 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
     Frame 2:<\/h4>\n
    \r\nstop();\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\r\nonEnterFrame = function(){ \/\/this function will run during every single frame\r\n\t\/\/The paddle follows the mouse\r\n\tmcPaddle._x = _xmouse - mcPaddle._width*.5;\r\n\t\r\n\t\/\/If the mouse goes off too far to the left\r\n\tif(_xmouse < 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(_xmouse > Stage.width - mcPaddle._width \/ 2){\r\n\t\t\/\/Keep the paddle on stage\r\n\t\tmcPaddle._x = Stage.width - mcPaddle._width;\r\n\t}\r\n\t\r\n\t\/\/MOVING THE BALL\r\n\tmcBall._x += ballXSpeed;\r\n\tmcBall._y += ballYSpeed;\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\t\r\n\r\n\r\n\tif(mcBall.hitTest(mcPaddle)){\r\n\t\t\/\/calculate the ball angle if ball hits paddle\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\/\/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:Number = _root.lvlArray[currentLvl-1].length;\r\n\t\/\/the current row of bricks we are creating\r\n\tvar brickRow:Number = 0;\r\n\t\/\/Now, creating a loop which places the bricks onto the stage\r\n\tfor(var i:Number = 0;i\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 4: Hit Testing the Bricks Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. All you have […]<\/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\/1069"}],"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=1069"}],"version-history":[{"count":5,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1069\/revisions"}],"predecessor-version":[{"id":1346,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1069\/revisions\/1346"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1069"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}