HTML and CSS Reference
In-Depth Information
var
var
angleInRadians
=
rotation
*
Math
.
PI
/
180
;
context
.
translate
(
x
+
16
,
y
+
16
)
context
.
rotate
(
angleInRadians
);
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
,
-
16
,
-
16
,
32
,
32
);
context
.
restore
();
frameIndex
++
;
iif
(
frameIndex
==
animationFrames
.
length
) {
frameIndex
=
0
;
}
}
function
function
startUp
(){
gameLoop
();
}
function
function
gameLoop
() {
window
.
setTimeout
(
gameLoop
,
100
);
drawScreen
();
}
When
Example 4-9
is running, you will see the tank move slowly across the screen to the
right. Its treads animate through the series of tiles from the tile sheet on a plain gray back-
ground.
So far, we have used tiles only to simulate sprite-based animated movement. In the next sec-
tion, we will examine how to use an image tile sheet to create a much more elaborate back-
ground using a series of tiles.
