jQuery 1.4 Animation Techniques - Index of

[ 299 ]
Chapter 10
We also declare some more local variables here including bulletPos which is the current
position of the bullet plus half of the width of the ship, and an array to hold the x and y
coordinates of the bullet. The values for this array are set to the bulletPos variable for the
x position, and directly above the nose of the ship for the y position. We also store the length
of the aliens array as a local variable for use in a for loop once again.
We define an inline function along with our variables called fire(). This function is used
in conjunction with an interval to create the motion of the bullet. Within this function, we
check that the bullet hasn't reached the top of the canvas, and provided it hasn't, that is if
its y position is greater than 0, we remove the bullet with the clearRect() function, then
update the values in the bulletPos array and draw the bullet in its new location using the
updated values from the array.
Once the position of the bullet has been updated, we then need to check whether the bullet,
in its new position, has collided with an alien or not, so we use a for loop to iterate over
each alien in the aliens array.
On each iteration we first check whether the bullet falls within the y axis of an alien, that
is whether its position is less than the bottom edge of an alien, but more than its top edge.
The aliens are positioned according to their top-left corner, so to work out whether the
bullet has passed its bottom edge we just add the height of an alien to its y position.
If the bullet does fall within the alien on the y axis, we then check whether it falls within
the space an alien is taking up along the x axis. If it does, we remove the alien from the
canvas with the clearRect() function and splice the alien out of the array so that it
stays removed.
We then remove the bullet from the canvas using the clearRect() function again,
and clear the bulletInt interval. If there are no more aliens left, we clear the interval
producing the motion of the aliens, reset the dirCounter variable, reduce the
alienSpeed variable by 100, and then call the addAliens() function to redraw
the aliens at the top of the canvas.
This is effectively how the player moves up to the next level, and each time the aliens are
redrawn they move faster, creating basic progression of the game. This now brings us to the
end of the code. If we run the game now in a standard-compliant browser such as Firefox or
Chrome, we should find that we have a perfectly playable game, implemented entirely using
JavaScript and the element.