HTML and CSS Reference
In-Depth Information
}
var
var
tankSourceX
=
Math
.
floor
(
3
%
5
)
*
32
;
var
var
tankSourceY
=
Math
.
floor
(
3
/
5
)
*
32
;
context
.
save
();
//save current state in stack
context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
// reset to identity
context
.
translate
((
tankY
)
+
16
,(
tankX
)
+
16
);
context
.
rotate
(
angleInRadians
);
context
.
drawImage
(
tileSheet
,
tankSourceX
,
tankSourceY
,
32
,
32
,
-
16
,
-
16
,
32
,
32
);
context
.
restore
();
}
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvas"
width=
"500"
height=
"500"
>
Your browser does not support the HTML 5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
Figure 8-19
demonstrates
Example 8-19
.
The poorly designed tile map with diagonal node
paths turned on results in a path where the tank can move through the walls. In the next ex-
ample, we will fix this problem with a new tile map.
