Canvas Games: Part II - HTML5 Canvas - page 763

The animationDelay represents the number of frames between each tile change for a given
rock. The animationCount variable restarts at 0 after each tile frame change and increases
by 1 oneachsubsequentframetick.When animationCount isgreaterthan animationDelay ,
the rock.rotation value is increased (clockwise) or decreased (counterclockwise). Here is
the new code in our updateRocks() function:

tempRock . animationCount ++ ;
iif ( tempRock . animationCount > tempRock . animationDelay ){
tempRock . animationCount = 0 ;
tempRock . rotation += tempRock . rotationInc ;

iif ( tempRock . rotation > 4 ){

tempRock . rotation = 0 ;
} else

else iif ( tempRock . rotation < 0 ){
tempRock . rotation = 4 ;

}

}

Notice that we have hardcoded the values 4 and 0 into the tile ID maximum and minimum
checks. We could have just as easily used a constant or two variables for this purpose.

Rendering the missiles

Both the player missiles and saucer missiles are rendered in the same manner. For each, we
simply need to know the tile ID on the four-tile particleTiles image representing the tile
we want to display. For the player missiles, this tile ID is 1 ; for the saucer missile, the tile ID
is 0 .

Let's take a quick look at both of these functions:

function function renderPlayerMissiles () {

var

var tempPlayerMissile = {};
var var playerMissileLength = playerMissiles . length - 1 ;

//ConsoleLog.log("render playerMissileLength=" + playerMissileLength);
for

for ( var var playerMissileCtr = playerMissileLength ; playerMissileCtr >= 0 ;

playerMissileCtr -- ){

//ConsoleLog.log("draw player missile " + playerMissileCtr)
tempPlayerMissile = playerMissiles [ playerMissileCtr ];
context . save (); //save current state in stack
var var sourceX = Math . floor ( 1 % 4 ) * tempPlayerMissile . width ;

var var sourceY = Math . floor ( 1 / 4 ) * tempPlayerMissile . height ;

context . drawImage ( particleTiles , sourceX , sourceY ,
tempPlayerMissile . width , tempPlayerMissile . height ,
tempPlayerMissile . x , tempPlayerMissile . y , tempPlayerMissile . width ,
tempPlayerMissile . height );