Breakout Level 3 Extended Diploma Unit 22 Developing Computer Games
Currently... To make the ball move we had 3 files: MoveRect.html MoveRect.js MoveRect.css We also know how to make a bouncing ball Our aim is to make a game where a bouncing ball is directed by a moving paddle to break down a wall of bricks - Breakout
Rename the files Start by copying and renaming: MoveRect.html to Breakout.html MoveRect.js to Breakout.js MoveRect.css to Breakout.css Modify Breakout.html so that it calls the Breakout files instead of the MoveRect files Check that it works as expected
Make the ball bounce Take this code from the bouncing ball example if( x<0 x>300) dx=-dx; if( y<0 y>300) dy=-dy; x+=dx y+=dy And paste it below circle(x, y, 10); in the draw function in Breakout.js Check that the ball now bounces
Change the boundaries The ball is constrained to a 300 x 300 rectangle Replace the values of 300 with canvas.width and canvas.height if( x<0 x>canvas.width) dx=-dx; if( y<0 y>canvas.height) dy=-dy; The ball will now bounce in the rectangle
Use of variables If canvas.width is too much to type you can create a new variable and use that E.g. var width = canvas.width; // width of canvas etc
Add a paddle Declare variables and initialise the paddle: Add these in the declarations var paddlex; (initial position) var paddleh; (height) var paddlew; (width) Initialise the paddle by adding this function function init_paddle() { } paddlex = canvas.width/2; // Center of canvas paddleh = 10; paddlew = 75;
Initialise and draw the paddle Add this line after the init(); init_paddle(); // Initialise the Paddle Add this line after the circle(x, y, 10); in the draw function rect (paddlex, canvas.heightpaddleh,paddlew, paddleh); This should draw a red rectangle 75 x 10 pixels starting halfway along the bottom
Screenshot
Bouncing off the paddle We want the ball to only bounce off the paddle. If it misses the paddle the game should end. We can do this by: If the ball y position is greater than the height { If the ball x position is greater than paddle x and less than paddlex + paddlew then bounce; Else game over } pseudocode
Paddle bounce code Add this after the if( y<0 y>canvas.height) dy=-dy; in the draw function else if (y + dy > HEIGHT) { if (x > paddlex && x < paddlex + paddlew) dy = -dy; else //game over, so stop the animation clearinterval(intervalid); } The game will now stop every time as the ball misses the paddle
Test the bounce Change the initial value of paddlex so that it is positioned at the right paddlex = WIDTH/1.2;
Moving the paddle We need a variable to set the amount the paddle will move by var paddledx = 5 We already have a function which detects key presses, but we only need horizontal movement, so delete the cases for the up and down arrow keys We now replace the code which varied x and y with code to vary paddlex
Varying paddlex function dokeydown(evt){ switch (evt.keycode) { case 37: /* Left arrow was pressed */ paddlex -= paddledx; break; case 39: /* Right arrow was pressed */ paddlex += paddledx; break; } }
Results The paddle should move left and right The ball should bounce off the paddle The game should stop when the ball misses the paddle
Problems! The ball is too fast The paddle is too slow The paddle restarts the game The paddle disappears off screen Change the variables paddledx and the value of setinterval(draw, 10) to make the game playable
Prevent restarts The code to stop the game is: clearinterval(intervalid); But the variable intervalid does not exist So we need to modify the code in the init function from: To return setinterval(draw, 20); intervalid = setinterval(draw, 10); return intervalid;
Next lesson we add the bricks In the meantime see if you can prevent the paddle from disappearing off the screen
Paddle and Ball - data Width 0,0 Width,0 x,y Height radius 0,height Paddlex/paddley Paddlex+paddlew /HEIGHT-paddleh Width/height paddledx paddlew
Comment your code Comments provide Identifies Author. Provides a date stamp Provides a history of changes and by whom. explanation of functions. what lines of code do. Help with code structure. Should be used in conjunction with meaningful names.
Comment your code Should NOT be overused, could make code flow more difficult to follow. Can help identify areas of code to be re-factored. You can use // and or /*..*/ or <!-- --> Activity Add appropriate comments to your Breakout.js file. Make sure your code still runs.
Comments Example // Breakout Game // Written by your name Date Feb/March 2013 // Uses the HTML5 Canvas // List of Variables var dx = 5; /* horizontal move speed of the ball */ var dy = 5; /* vertical move speed of the ball */ var x = 150; /* Center position of ball on the horizontal axis */ etc // Initialise the Paddle // at the bottom of the game window function init_paddle() { etc
Refactor the Ball Collision Take the code that does the ball collision and move it into a new function called ballcollision. Test your code still works.