Canvas Games: Part I - HTML5 Canvas - page 724

A* with Node Weights and Diagonals

In Example 8-17 we will add back in the diagonal node capability to see whether this will al-
low for a path that will bypass the grass tiles. A diagonal will add 1.41 (the square root of 2)
to the total node path weight, while a grass tile will add 2. For that reason, adding in the use
of diagonals will cost less than moving over grass.

//Example 8-17 changes to Example 8-16 to add node weights
var

var result = astar . search ( graph . nodes , start , end , true true );

After simply adding true back into astar.search() , Figure 8-17 shows that the grass tiles
can be avoided because even though a diagonal adds 1.41 to the path cost, that amount is still
less than grass tile movement.

Figure 8-17. A* with grass tiles and diagonals

Wow...just adding in diagonal path node capability changed the node structure of the result
path dramatically and allowed us to avoid a path that moves over grass tiles. As a final ex-
ample, and because this topic really is about making cool things happen on the canvas, we are
going add the green tank from the tile sheet to the demo and have it follow the A* created
path.

Example 8-17. Larger A* Example with grass tiles and diagonal movement