Canvas Game Essentials - HTML5 Canvas - page 414

Figure 8-6. The saucer design
The variable attributes of the saucer object are very similar to the attributes of a rock
object, although without the rock scale attribute. Also, saucers don't have a rotation;
it is always set at 0 . The saucer also contains variables that are updated on each new
level to make the game more challenging for the player. Here are those variables, which
will be discussed in more detail in the upcoming section “Level Knobs” :
newSaucer.fireRate = levelSaucerFireRate;
newSaucer.fireDelay = levelSaucerFireDelay;
newSaucer.fireDelayCount = 0;
newSaucer.missileSpeed = levelSaucerMissileSpeed;
Missiles
Both the player missiles and saucer missiles will be 2×2-pixel blocks. They will be stored
in the playerMissiles and saucerMissiles arrays, respectively.
The objects are very simple. They contain enough attributes to move them across the
game screen and to calculate life values:
newPlayerMissile.dx = 5*Math.cos(Math.PI*(player.rotation)/180);
newPlayerMissile.dy = 5*Math.sin(Math.PI*(player.rotation)/180);
newPlayerMissile.x = player.x+player.halfWidth;
newPlayerMissile.y = player.y+player.halfHeight;
newPlayerMissile.life = 60;
newPlayerMissile.lifeCtr = 0;
newPlayerMissile.width = 2;
newPlayerMissile.height = 2;
Explosions and particles
When a rock, saucer, or the player ship is destroyed, that object explodes into a series
of particles. The createExplode() function creates this so-called particle explosion.
Particles are simply individual logical display objects with their own life , dx , and dy
values. Randomly generating these values makes each explosion appear to be unique.
Particles will be stored in the particles array.
Like missiles, particle objects are rather simple. They also contain enough information
to move them across the screen and to calculate their life span in frame ticks:
newParticle.dx = Math.random()*3;
newParticle.dy = Math.random()*3;
newParticle.life = Math.floor(Math.random()*30+30);