HTML5 Canvas, 2nd Edition

Arrays of Logical Display Objects

We have used arrays to hold all our logical display objects, and we have an array for each type of object (rocks, saucers, playerMissiles, saucerMissiles, and particles). Each logical display object is a simple object instance. We have created a separate function to draw and update each of our objects.

Note

The use of an object class prototype similar to FrameRateCounter can be implemented easily for the various display object types. To conserve space, we have not implemented them in this game. However, these objects would allow us to separate the update and draw code from the current common functions and then place that code into the individual object prototypes. We have included a Rock prototype at the end of this chapter as an example. (See Example 8-13.)

You will notice that saucers and rocks are drawn with points in the same manner as the player ship.

Rocks

The rocks will be simple squares that rotate clockwise or counterclockwise. The rock instances will be in the rocks array. When a new level starts, these will all be created in the upper-right corner of the game screen.

Here are the variable attributes of a rock object:

newRock.scale = 1;
newRock.width = 50;
newRock.height = 50;
newRock.halfWidth = 25;
newRock.halfHeight = 25;
newRock.x
newRock.y
newRock.dx
newRock.dy
newRock.scoreValue = bigRockScore;
newRock.rotation = 0;

The rock scale will be set to one of the three rock-scale constants discussed earlier. halfWidth and halfHeight will be set ...