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