HTML and CSS Reference
In-Depth Information
Drawing the tank on the screen
This is a review of the discussion in
Chapter 4
about using the Canvas transformations to ro-
tate the tank to the correct angle based on the
angleInRadians
value we have stored on each
node change:
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
();
First, we find the tile location of the tile sheet (top-left corner) of the tank tile and place those
values into the
tankSourceX
and
tankSourceY
variables. Next we save the current canvas to
the stack and reset the transformation matrix to the reset identity. We then translate the entire
canvas to the center of the current node (tile) and rotate it using the
angleInRadians
value.
The image is then drawn to the Canvas as if the drawing pen is sitting at 0,0. To draw the tank
in the center, we must offset
−16
on each.
Figure 8-18
shows the tank following the path created in
Example 8-18
.
If we change
var
result = astar.search(graph.nodes, start, end, false)
to
var result = as-
tar.search(graph.nodes, start, end, true)
, we will get the result shown in
Fig-
ure 8-19
. The path will actually take the tank diagonally through walls, so if you plan to use
the
true
(use diagonal path node) parameter, you will want to take this into consideration
when you are creating your tile maps. An extra block at that intersection would prevent the
tank from moving through that path, as can be seen in
Figure 8-20
.
