<script type="text/javascript" src="breakout.js"> </script>

Transcription

1 This lesson brings together everything we've learned so far. We will be creating a breakout game. You can see it on It is great to think that you have learned so much so quickly that you are able to create a web page, with styles and enough JavaScript to write a game. 1. Open sublime text, create an html page and add a canvas <canvas id="mycanvas" width="480" height="320"></canvas> Because there is a lot of script let's create a separate JavaScript file save it as breakout.js and add a link to it underneath the canvas. <script type="text/javascript" src="breakout.js"> </script> Last time we got the canvas object and the context inside a function but this time we are going to call it from several functions so lets put it outside so they can all use it. Let's start with the ball centered in the middle 30px from the bottom. We need to create variables for the x and y position. Let's see if you can fill these variables in without looking: canvas = document ('mycanvas'); var ctx = canvas ("2d"); var x = canvas.-----/2; var y = canvas ; var Remember we can make our program call a function at time intervals with setinterval(function_to_call, milliseconds) & we create a function with function functionname(){. See if you can add a function called draw without looking. Also we need to clear the canvas, 1. clearrect(x, y, w, h), 2. draw a circle: beginpath(), 3. arc(center x, center y, r, start angle (from 0 to pi*2), end angle (from 0 to pi*2)); 4. add a fillstyle, 5. fill() and 6. closepath(). Remember they all need to be attached to the context. Who can suggest how we are going to make it move? Below is what you should have so far:

2 var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.beginpath(); ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillstyle = "#0095DD"; ctx.fill(); ctx.closepath(); x += dx; y += dy; setinterval(draw, 10); The function draw is starting to get a little complicated and it is going to get even more complicated so i want to split it into 2 functions. I am just creating a new function function drawball(){ and moving to ball drawing lines of code into it. Then I will just call the function. This is not essential for to work but keeping things in small function s makes your code easier to understand.

3 var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; function drawball(){ ctx.beginpath(); ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillstyle = "#0095DD"; ctx.fill(); ctx.closepath(); function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawball(); x += dx; y += dy; setinterval(draw, 10);

4 We need to make dy and dx change directions when they hit the edges of the canvas. But first let's replace arch radius, with a variable ballradius which we can create at the top of the code so all the functions have access to it. var ballradius = 10 ; and then change the arc to: ctx.arc(x, y, ballradius, 0, Math.PI*2); Now we need to test if x and y will be outside of the canvas when we add dx and dy. So we test if x + dx < 0 or x + dx > canvas.width and if y + dy < 0 or y + dy > canvas.height. But remember x and y is in the middle of the ball, so we have to adjust this to compensate for the ball radius. So instead of 0 or width or zero and height ballradius and canvas.widthballradius and ballradius and canvas.height-ballradius Then to change directions we make dx = -dx or dy = -dy as necessary. Remember an if statement looks like if(what you are checking){. If you have 2 conditions and you want to see if either of them are true then you can use 2 vertical bars aka pipes. ( "shift" key + backslash "\" key ) to represent or. if(what you are checking 1 what you are checking 2 ){ Try to write the if statement before checking below.

5 function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawball(); if(x + dx > canvas.width-ballradius x + dx < ballradius) { dx = -dx; if(y + dy > canvas.height-ballradius y + dy < ballradius) { dy = -dy; x += dx; y += dy; Draw the paddle is easy, as we a re just drawing a rectangle. An anyone remember how to that? Let's just add some variable to hold the paddle's height, width and x. Say 10 by 75. And we want the paddle at the bottom in the middle; var paddleheight = 10; var paddlewidth = 75; var paddlex = (canvas.width-paddlewidth)/2; var paddley = (canvas.width-paddleheight) ; let's create a function called drawpaddle. Use beginpath(), rect(x, y, width, height), fillstyle, fill() & closepath() to draw the paddle.

6 function drawpaddle() { ctx.beginpath(); ctx.rect(paddlex, paddley, paddlewidth, paddleheight); ctx.fillstyle = "#0095DD"; ctx.fill(); ctx.closepath(); The last The paddle of course needs to move when the arrows keys are pressed. So we need to add an eventlistener to the document. Since we want the movement to stop when the key is not longer pressed we need event listeners for both keydown and key up. Remember its document.addeventlistener( what to listen for, what to do, capture order) parameter is not actually necessary in this case as the default is false: bubbling. In bubbling the inner most So you need to add keydown and keyup. element's event is handled first and then the document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); outer: the <p> element's click event is handled first, then the <div> element's We need a variable to hold whether the right and left keys are pressed. Add these at the top. var rightpressed = false; var leftpressed = false; Key 39 is right and 37 is the left arrow key. Remember you send the event automatically so you can add a variable to hold the click event. In capturing the outer most element's event is handled first and then the inner: the <div> element's click event will be handled first, then the <p> element's click event.

7 event in the function's parameters. We just want to change the variables rightpressed or leftpressed. function keydownhandler(e) { if(e.keycode == 39) { rightpressed = true; else if(e.keycode == 37) { leftpressed = true; keyuphandler should change them back to false again. See if you can do keyuphandler without looking. var rightpressed = false; var leftpressed = false; document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); function keydownhandler(e) { if(e.keycode == 39) { rightpressed = true; else if(e.keycode == 37) { leftpressed = true; function keyuphandler(e) { if(e.keycode == 39) { rightpressed = false; else if(e.keycode == 37) { leftpressed = false;

8 In the draw function call the drawpaddle function in the draw function after drawball. We can change the paddlex if leftpressed or rightpressed is true. Of course we only want to move it is it is less than canvas.width-paddlewidth and greater then 0. if(rightpressed && paddlex < canvas.width-paddlewidth) { paddlex += 7; else if(leftpressed && paddlex > 0) { paddlex -= 7; Add The Bricks First create variables for number of rows, number of columns, width, height padding, offsets and array to hold the bricks. The we can loop through the number of rows and columns to fill the array.

9

10

11 var brickrowcount = 3; var brickcolumncount = 5; var brickwidth = 75; var brickheight = 20; var brickpadding = 10; var brickoffsettop = 30; var brickoffsetleft = 30; var bricks = []; for(c=0; c<brickcolumncount; c++) { bricks[c] = []; for(r=0; r<brickrowcount; r++) { bricks[c][r] = { x: 0, y: 0, status = 1; function drawbricks() { for(c=0; c<brickcolumncount; c++) { for(r=0; r<brickrowcount; r++) { if(bricks[c][r].status == 1) { var brickx = (c*(brickwidth+brickpadding)) +brickoffsetleft; var bricky = (r*(brickheight+brickpadding)) +brickoffsettop; bricks[c][r].x = brickx; bricks[c][r].y = bricky; ctx.beginpath(); ctx.rect(brickx, bricky, brickwidth, brickheight); ctx.fillstyle = "#0095DD"; ctx.fill(); ctx.closepath();

12 Add function collisiondetection and call it from draw. This is very like the bubbles code we did last time, except we hold a arguemtn status and change it to 0 when the ball collides with it. function collisiondetection() { for(c=0; c<brickcolumncount; c++) { for(r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; Game over Add Game over if the ball goes past bottom Change the if(y + dy > canvas.height-ballradius y + dy < ballradius) { dy = -dy; to below: if(y + dy < ballradius) {

13 dy = -dy; else if(y + dy > canvas.height-ballradius) { alert("game OVER"); document.location.reload(); Paddle if(y + dy < ballradius) { dy = -dy; else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; else { alert("game OVER"); document.location.reload();