HTML and CSS Reference
In-Depth Information
var theCanvas2 = document . getElementById ( "canvas2" );
var context2 = theCanvas2 . getContext ( "2d" );
We use the mediumrocks.png file ( Figure 9-9 ) from the Geo Blaster Extended game as our
source for the dynamic tile sheet. Don't let this confuse you. We will not use all five tiles on
this tile sheet—only the first tile.
Figure 9-9. The mediumrocks.png tile sheet
In Geo Blaster Extended , we used all five tiles to create a simulated rotation animation. Here,
we use only the first tile. We draw this first tile, rotate it on theCanvas2 by 10 degrees, and
then copy the current imageData pixels from this canvas to an array of imageData instances
called rotationImageArray .
Wethenrepeatthisprocessbyrotating theCanvas2 by 10 moredegreesandinaloopuntilwe
have 36 individual frames of imageData representing the rotation animation for our medium
rock in an array:
var rotationImageArray = [];
var animationFrame = 0 ;
var tileSheet = new
new Image ();
tileSheet . addEventListener ( 'load' , eventSheetLoaded , false
false );
tileSheet . src = "mediumrocks.png" ;
The rotationImageArray variable holds the generated imageData instances, which we cre-
ate by using a rotation transformation on theCanvas2 .
The animationFrame is used when redisplaying the rotation animation frames in rota-
tionImageArray back to the first theCanvas to demo the animation.
When the tileSheet is loaded, the eventSheetLoaded() function is called, which in turn
calls the startup() function. The startup() function uses a loop to create the 36 frames of
function startUp (){
for ( var
var ctr = 0 ; ctr < 360 ; ctr += 10 ){
context2 . fillStyle = "#ffffff" ;
Search WWH ::

Custom Search