HTML and CSS Reference
In-Depth Information
var
var dy = - 1 ;
var
var x = 50 ;
var
var y = 50 ;
function
function eventSheetLoaded () {
startUp ();
}
function
function drawScreen () {
y = y + dy ;
x = x + dx ;
//draw a background so we can see the Canvas edges
context . fillStyle = "#aaaaaa" ;
context . fillRect ( 0 , 0 , 500 , 500 );
var
var sourceX = Math . floor ( animationFrames [ frameIndex ] % 8 ) * 32 ;
var
var sourceY = Math . floor ( animationFrames [ frameIndex ] / 8 ) * 32 ;
context . drawImage ( tileSheet , sourceX , sourceY , 32 , 32 , x , y , 32 , 32 );
frameIndex ++ ;
iif ( frameIndex == animationFrames . length ) {
frameIndex = 0 ;
}
}
function
function startUp (){
gameLoop ();
}
function
function gameLoop () {
window . setTimeout ( gameLoop , 100 );
drawScreen ();
}
By running this example, we see the tank move slowly up the canvas while its treads play
through the eight separate tiles of animation.
Our tile sheet has images of the tank facing only in the up position. If we want to have the
tank move in other directions, we can do one of two things. The first option is to create more
tiles on the tile sheet to represent the left, right, and down positions. However, this method
Search WWH ::




Custom Search