HTML and CSS Reference
In-Depth Information
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
var
result
=
astar
.
search
(
graph
.
nodes
,
start
,
end
,
false
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
movable tiles.
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.
Inbetween,wedrawablackcircleoneachpathnode.Theinterestingthingtonotehereisthat
