Canvas Game Essentials - HTML5 Canvas - page 413

Each logical display object is a simple object instance. We have created a separate
function to draw and update each of our objects.
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 based on the scale, and they will be used in cal-
culations in the same manner as the player object versions. The dx and dy values rep-
resent the values to apply to the x and y axes when updating the rock on each frame tick.
Saucers
Unlike Atari's Asteroids game, which has both small and large saucers, we are only
going to have one size in Geo Blaster Basic . It will be stored in the saucers array. On a
28×13 grid (using paths), it looks like Figure 8-6 .