Working with Audio - HTML5 Canvas - page 359

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 prop-
erties: x , y , width , height . This was so the hitTest() function could test them as generic