HTML and CSS Reference
Figure 8-11. The Example 8-13 tile map vs. the A* tile map
Figure 8-11 showsthedifferencebetweenthetwo-dimensionalarraystructureforthetilemap
we have created and the two-dimensional structure that the graphs.js expects its graph map to
be in. When we create the startNode object, we use 0 for the x value and 1 for the y value
because these map to the graph.js expected values. The actual values onourtile map are 0 for
the row ( y ) and 1 for the column ( x ). We needed to use the same logic to transpose the end
node from row 2, column 1 (or, y=2 and x=1 ) into x=2, y=1 .
To find an actual path, the start and end nodes are passed into the astar.search function:
var result = astar . search ( graph . nodes , start , end , false
The false value passed into the function as the final parameter tells the function to not con-
sider diagonal nodes in the search. We will use this option in an example further along in this
section. The result that is returned is an array of nodes that is the shortest path through the
When we do the actual Canvas drawing, we use the exact same code as we used in Chapter 4
for drawing the tile map from the tile sheet. This uses the rows of columns. The tile map is
first drawn in its entirety by looping through the rows and then each element in each row (or
the column) and drawing that tile to the screen.
To show the path, we draw a green circle at the starting node and a red circle at the end node.