Images on the Canvas - HTML5 Canvas - page 251

function function startUp (){

gameLoop ();

}

function function gameLoop () {

window . setTimeout ( gameLoop , 100 );
drawScreen ();

}

When you test Example 4-8 , you should see that the tank has rotated 90 degrees and that the
tank treads loop through their animation frames.

As we did in Example 4-6 , let's move the tank in the direction it is facing. This time, it will
move to the right until it goes off the screen. Example 4-9 has added back in the dx and dy
movement vectors; notice that dx is now 1 , and dy is now 0 .

Example 4-9. Rotation, animation, and movement
var

var tileSheet = new new Image ();

tileSheet . addEventListener ( 'load' , eventSheetLoaded , false

false );

tileSheet . src = "tanks_sheet.png" ;

var var animationFrames = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 ];

var

var frameIndex = 0 ;
var var rotation = 90 ;

var var x = 50 ;

var

var y = 50 ;
var

var dx = 1 ;
var var dy = 0 ;

function function eventSheetLoaded () {

startUp ();

}

function function drawScreen () {

x = x + dx ;
y = y + dy ;

//draw a background so we can see the Canvas edges
context . fillStyle = "#aaaaaa" ;
context . fillRect ( 0 , 0 , 500 , 500 );

context . save ();
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 )