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 .
Search WWH ::

Custom Search