HTML5 Canvas, 2nd Edition

A* Applied to a Larger Tile Map

To demonstrate A* path finding in a more real-world way, we must first create a new tile map. For our next example, we are going to create a more maze-like structure that still uses just the first two tile types.

The following code example shows the changes to the Example 8-13 tile map for Example 8-14. We will also be changing the startNode and endNode for Example 8-14. We have not provided the full code listing for this example, just the changes needed to turn Example 8-13 into Example 8-14:

 //Example 8-14 changes to Example 8-13 to make a larger tile map
   var mapRows=15;
   var mapCols=15;
   var tileMap=[
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  ,[0,1,1,1,1,1,1,1,1,1,1,1,1,1,0]
  ,[0,1,0,1,0,0,1,0,1,0,0,1,0,1,0]
  ,[0,1,0,1,0,0,1,0,1,0,0,1,0,1,0]
  ,[0,1,0,1,0,0,1,1,1,0,0,1,0,1,0]
  ,[0,1,1,1,1,1,0,0,0,1,1,1,1,1,0]
  ,[0,1,0,0,0,1,0,0,0,1,0,0,0,1,0]
  ,[0,1,1,1,1,1,0,0,0,1,1,1,1,1,0]
  ,[0,0,0,0,0,1,1,1,1,1,0,0,0,0,0]
  ,[0,1,1,1,1,1,0,0,0,1,1,1,1,1,0]
  ,[0,1,0,1,0,0,1,1,1,0,0,1,0,1,0]
  ,[0,1,0,1,0,0,1,0,1,0,0,1,0,1,0]
  ,[0,1,0,1,0,0,1,0,1,0,0,1,0,1,0]
  ,[0,1,1,1,1,1,1,1,1,1,1,1,1,1,0]
  ,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
 ];

If we create a tile map like the above, it will result in a map that looks like Figure 8-13, which shows the output from the new, larger tile map that will be generated from this data.

Figure 8-13. The Example 8-14 15×15 tile map with no path finding applied

Along with ...