HTML5 Canvas [134]
function startLevel() {
for (var r = 0; r < ALIEN_ROWS; r++) {
for( var c= 0; c < ALIEN_COLS; c++) {
aliens.push({speed:2,x:ALIEN_START_X+c*ALIEN_SPACING, y:ALIEN_START_Y+r*
ALIEN_SPACING,width:alienImage.width, height:alienImage.height});
}
}
}
Mouse control
Before we talk about the game play itself, let’s quickly discuss mouse event handlers, which will collect all user input for the game. When the player moves the mouse, the eventMouseMove() handler is called. This function operates just like the same function we created for the audio player, except for the last two lines. Those two lines set the x and y properties of the player object we created back in the variable definition section of canvasApp(). We will use these two properties to position the playerImage on the canvas in the drawScreen() function:
function eventMouseMove(event) {
if ( event.layerX || event.layerX == 0) { // Firefox
mouseX = event.layerX ;
mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
mouseX = event.offsetX;
mouseY = event.offsetY;
}
player.x = mouseX;
player.y = mouseY;
}
The eventMouseUp() handler is called when the player presses and releases the left mouse button. When this event occurs, a missile will fire. The missile object is almost identical to the alien object, as it includes speed, x, y, width, and height properties. Since the player is firing the missile, we set the missile’s x and y positions to the center of the player’s ship on the x-axis (player.x+.5*playerImage.width), and to the y position of the player’s ship, minus the height of the missile (player.y - missileImage.height):
function eventMouseUp(event) {
missiles.push({speed:5, x: player.x+.5*playerImage.width,
y:player.y-missileImage.height,width:missileImage.width,
height:missileImage.height});
Next is the first really critical line of code for the subject at hand: audio. For this first iteration of Space Raiders, we simply call the play() function of shootSound. This will play the shoot sound as often as the player presses the left mouse button (in theory):
shootSound.play();
}
Bounding box collision detection
Before we get to the main part of the game logic, we should discuss bounding box collision detection. We need to detect collisions between the missiles the player fires and the aliens the player is firing upon. To do this, we will create a function that tests to see whether two objects are overlapping. For lack of a better name, we call this function hitTest().
The type of hit test we are going to perform is called a bounding box collision test. This means that we are going to ignore the intricate details of the bitmapped graphics and simply test to see whether an invisible “box” drawn around the bounds of each object overlaps with a similar box drawn around the other objects.
Recall that both the alien and missile dynamic objects were created with similar properties: x, y, width, height. This was so the hitTest() function could test them as generic objects, unspecific to the type of on-screen object that they represent. This means that we can add any other type of object to this game (boss alien, power-ups, enemy missiles, etc.), and if it is created with similar properties, we can use the same function to test collisions against it.
The function works by finding the top, left, bottom, and right values for each object, and then testing to see whether any of those values overlap. Bounding box collision detection will be discussed in detail in Chapter 8, but we just wanted to give you a preview of what it looks like for Space Raiders:
function hitTest(image1,image2) {
r1left = image1.x;
r1top = image1.y;
r1right = image1.x + image1.width;
r1bottom = image1.y + image1.height;
r2left = image2.x;
r2top = image2.y;
r2right = image2.x + image2.width;
r2bottom = image2.y + image2.height;
retval = false;
if ( (r1left > r2right) || (r1right < r2left) || (r1bottom < r2top) ||
(r1top > r2bottom) ) {
retval = false;
} else {
retval = true;
}
return retval;
}