Combining Bitmaps and Sound - HTML5 Canvas - page 455

tempRock = rocks[rockCtr];
var sourceX = Math.floor((tempRock.rotation) % 5) * tempRock.width;
var sourceY = Math.floor((tempRock.rotation) /5) *tempRock.height;
switch(tempRock.scale){
case 1:
context.drawImage(largeRockTiles, sourceX, sourceY,
tempRock.width,tempRock.height,tempRock.x,tempRock.y,
tempRock.width,tempRock.height);
break;
case 2:
context.drawImage(mediumRockTiles, sourceX,
sourceY,tempRock.width,tempRock.height,tempRock.x,tempRock.y,
tempRock.width,tempRock.height);
break;
case 3:
context.drawImage(smallRockTiles, sourceX,
sourceY,tempRock.width,tempRock.height,tempRock.x,tempRock.y,
tempRock.width,tempRock.height);
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 were able to simulate faster or slower speeds for the rock
rotations by simply giving each rock a random rotationInc value. This value, either
negative for counterclockwise 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 .
The animationDelay will represent the number of frames between each tile change for
a given rock. The animationCount variable will restart at 0 after each tile frame change
and will increase by 1 on each subsequent frame tick. When animationCount is greater
than animationDelay , the rock.rotation value will be increased (clockwise) or decreased
(counterclockwise). Here is the new code that we will have in our updateRocks()
function:
tempRock.animationCount++;
if (tempRock.animationCount > tempRock.animationDelay){
tempRock.animationCount = 0;
tempRock.rotation += tempRock.rotationInc;