Canvas Games: Part II - HTML5 Canvas - page 762

function function renderRocks () {

var

var tempRock = {};
var

var rocksLength = rocks . length - 1 ;
for

for ( var var rockCtr = rocksLength ; rockCtr >= 0 ; rockCtr -- ){

context . save (); //save current state in stack
tempRock = rocks [ rockCtr ];
var var sourceX = Math . floor (( tempRock . rotation ) % 5 ) * tempRock . width ;

var var sourceY = Math . floor (( tempRock . rotation ) / 5 ) * tempRock . height ;

switch switch ( tempRock . scale ){

case

case 1 :
context . drawImage ( largeRockTiles , sourceX , sourceY ,
tempRock . width , tempRock . height , tempRock . x , tempRock . y ,
tempRock . width , tempRock . height );
break

break ;
case

case 2 :
context . drawImage ( mediumRockTiles , sourceX ,
sourceY , tempRock . width , tempRock . height , tempRock . x , tempRock . y ,
tempRock . width , tempRock . height );
break break ;

case

case 3 :
context . drawImage ( smallRockTiles , sourceX ,
sourceY , tempRock . width , tempRock . height , tempRock . x , tempRock . y ,
tempRock . width , tempRock . height );
break

break ;

}

context . restore (); //pop old state on to screen

}

}

In the renderRocks() function, we are no longer using the rock.rotation attribute as the
angle of rotation as we did in Geo Blaster Basic . Instead, we have repurposed the rotation
attribute to represent the tile ID (0-4) of the current tile on the tile sheet to render.
In the Chapter 8 version, we could simulate faster or slower speeds for the rock rotations by
simply giving each rock a random rotationInc value. This value, either negative for coun-
terclockwise or positive for clockwise, was added to the rotation attribute on each frame. In
this new tilesheet-based version, we only have five frames of animation, so we don't want to
skip frames because it will look choppy. Instead, we are going to add two new attributes to
each rock: animationCount and animationDelay .