Here is the full code listing for Example 8-13. We will be modifying this code in the
following sections to add to the size of the map and to demonstrate further A* func‐
tionality. This simple example shows the basics of using the algorithm with our tile sheet
and tile map and shows how to display the results on the Canvas.
Example 8-13. A* Example 1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 8 Example 14: A* Example 1</title>
<script src="modernizr.js"></script>
<script type='text/javascript' src='graph.js'></script>
<script type='text/javascript' src='astar.js'></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
}
//set up tile map
var mapRows=5;
var mapCols=5;
var tileMap=[
[0,1,0,0,0]
,[0,1,0,0,0]
,[0,1,0,0,0]
,[0,0,0,0,0]
,[0,0,0,0,0]
];
//set up a* graph
var graph = new Graph(tileMap);
var startNode={x:0,y:1}; // use values of map turned on side
var endNode={x:2,y:1};
//create node list
var start = graph.nodes[startNode.x][startNode.y];
var end = graph.nodes[endNode.x][endNode.y];
var result = astar.search(graph.nodesstartendfalse);
//load in tile sheet image
Simple A* Path Finding on a Tile Grid  |  489
Pdf data extraction - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
exporting data from excel to pdf form; how to save a filled out pdf form in reader
Pdf data extraction - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
how to save editable pdf form in reader; exporting pdf form to excel
var tileSheet=new Image();
tileSheet.addEventListener('load'eventSheetLoaded , false);
tileSheet.src="tiles.png";
function eventSheetLoaded() {
drawScreen();
}
function drawScreen() {
for (var rowCtr=0;rowCtr<mapRows;rowCtr++) {
for (var colCtr=0;colCtr<mapCols;colCtr++){
var tileId=tileMap[rowCtr][colCtr];
var sourceX=Math.floor(tileId % 5*32;
var sourceY=Math.floor(tileId / 5*32;
context.drawImage(tileSheet,sourceX,sourceY,32,32,colCtr*32,
rowCtr*32,32,32);
}
}
//draw green circle at start node
context.beginPath();
context.strokeStyle="green";
context.lineWidth=5;
context.arc((startNode.y*32)+16,(startNode.x*32)+16,10,0,
(Math.PI/180)*360,false);
context.stroke();
context.closePath();
//draw red circle at end node
context.beginPath();
context.strokeStyle="red";
context.lineWidth=5;
context.arc((endNode.y*32)+16, (endNode.x*32)+16, 10, 0,
(Math.PI/180)*360,false);
context.stroke();
context.closePath();
//draw black circles on path
for (var ctr=0;ctr<result.length-1;ctr++) {
var node=result[ctr];
context.beginPath();
context.strokeStyle="black";
context.lineWidth=5;
context.arc((node.y*32)+16, (node.x*32)+16, 10, 0,
(Math.PI/180)*360,false);
context.stroke();
context.closePath();
}
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
490  |  Chapter 8: Canvas Games: Part I
VB.NET PDF Text Extract Library: extract text content from PDF
Application. Advanced Visual Studio .NET PDF text extraction control, built in .NET framework 2.0 and compatible with Windows system.
pdf form data extraction; export pdf form data to excel spreadsheet
C# PDF Text Extract Library: extract text content from PDF file in
Image text extraction control provides text extraction from PDF images and image files. Best C#.NET PDF text extraction library and component for free download.
edit pdf form in reader; vb extract data from pdf
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Example 8-13 presents some new concepts and some review from Chapter 4. Let’s take
a look at the most important parts of the code before we take a look at what it does in
action.
In the example code, we first set up our tile map. This describes the look of the game
screen and which tiles to display:
var mapRows=5;
var mapCols=5;
var tileMap=[
[0,1,0,0,0]
,[0,1,0,0,0]
,[0,1,0,0,0]
,[0,0,0,0,0]
,[0,0,0,0,0]
];
Our tile map will be made up of five rows and five columns. The tile map is laid out in
a two-dimensional array of rows and columns that mimic how it will look on the screen.
Notice that the second column is made up of the number 1 in the first three rows. When
displayed on the canvas (without including the path finding code from Example 8-13),
it will look like Figure 8-10. This amounts to simply swapping the x and y values we use
for displaying the map when we use and evaluate the data that comes back from the
astar.js functions.
Figure 8-10. The Example 8-13 tile map with no path finding code applied
The goal of Example 8-13 is to use this very simple tile map with only three movable
tiles to show an example of how the astar.as and graph.as functions work to find a path
of nodes.
Simple A* Path Finding on a Tile Grid  |  491
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document in VB.NET Project. DLLs for PDF Image Extraction in VB.NET.
extracting data from pdf forms to excel; extract pdf form data to excel
VB.NET PDF Page Extract Library: copy, paste, cut PDF pages in vb.
VB.NET PDF - PDF File Pages Extraction Guide. Detailed VB.NET Guide for Extracting Pages from Microsoft PDF Doc. Free PDF document
extract data from pdf forms; how to make a pdf form fillable in reader
The first task is to create a new Graph object from the prototype code in the graph.as
file. We do this by passing a two-dimensional array into to new Graph() constructor
function. As mentioned earlier, the problem is that the Graph prototype is looking for
columns of rows rather than rows of columns. Therefore, when we create the start
Node and endNode objects that are used by astar.js, we need to flip our idea of the tile
map on its side and pass in the values as if the tile map was set up in this manner. (Again,
simply swapping the x and y values will do the trick.)
//set up a* graph
var graph = new Graph(tileMap);
var startNode={x:0,y:1}; // use values of map turned on side
var endNode={x:2,y:1};
Figure 8-11 shows this flipping concept in an easy-to-understand fashion. The x and y
values for our tile map are simply swapped for use with astar.js.
Figure 8-11. The Example 8-13 tile map vs. the A* tile map
Figure 8-11 shows the difference between the two-dimensional array structure for the
tile map 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
on our tile 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:
492  |  Chapter 8: Canvas Games: Part I
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
Document. Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document. C# Project: DLLs for PDF Image Extraction. In
extract data from pdf form to excel; extract data from pdf into excel
VB.NET PDF Library SDK to view, edit, convert, process PDF file
PDF Text Extraction. Mature and robust APIs are provided for programmers to integrate and perform PDF text extraction feature in .NET windows and web project.
extract data from pdf using java; how to fill out a pdf form with reader
var result = astar.search(graph.nodesstartendfalse);
The false value passed into the function as the final parameter tells the function to not
consider 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. In between, we draw a black circle on each path node. The interesting thing to
note here is that when we loop through the result array of objects for the nodes, we use
the y value returned as the x coordinate (or row) and the x returned as the y coordinate
(or column):
context.arc((node.y*32)+16, (node.x*32)+16100,(Math.PI/180)*360,false);
The final output from the example will return the simplest path that can be drawn
between two points. Figure 8-12 shows this final output.
Figure 8-12. The final output from Example 8-13
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;
Simple A* Path Finding on a Tile Grid  |  493
C#: Demos and Sample Codes for Image Content Extraction Using OCR
C# Sample Code for Png Image Text Extraction. This C# OCR demo code illustrates how to extract text from Png and save to png.pdf. // Set the training data path.
extract data from pdf; how to save filled out pdf form in reader
C# PDF File Permission Library: add, remove, update PDF file
Form Process. Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert Choose to offer PDF annotation and content extraction functions.
make pdf form editable in reader; saving pdf forms in acrobat reader
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 changing the map data for Example 8-14, we will also be adding new start
and end nodes to reflect the larger map size. Let’s choose a start node of row 4, column
494  |  Chapter 8: Canvas Games: Part I
VB.NET PDF File Permission Library: add, remove, update PDF file
Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert, Delete, Update Choose to offer PDF annotation and content extraction functions.
how to save a pdf form in reader; how to make pdf editable form reader
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. PDF document splitting, PDF page reordering and PDF page image and text extraction.
using pdf forms to collect data; extracting data from pdf to excel
1, and end node of row 13, column 10. This would require us to make changes to the
new startNode and endNode variables. The changes for Example 8-14 are simple, but
they will create this larger map and provide a better demonstration of the capabilities
of the graph.as and astar.js functions:
In Example 8-14 we will demonstrate what happens when we increase the size of the
Example 8-13 tile map and run the A* functions. The following code shows the changes
to the startNode and endNode for this larger tile map.
//Example 8-14 startNode and endNode
var graph = new Graph(tileMap);
var startNode={x:4,y:1}; // use values of map turned on side
var endNode={x:13,y:10};
If you make all of the changes to Example 8-13 listed previously, the result will be
Example 8-14. The result of Example 8-14 is shown in Figure 8-14.
Figure 8-14. Example 8-14 A* applied to the 15x15 tile map
Example 8-14. Larger A* example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 8 Example 14 - Larger A* Example</title>
Simple A* Path Finding on a Tile Grid  |  495
<script src="modernizr.js"></script>
<script type='text/javascript' src='graph.js'></script>
<script type='text/javascript' src='astar.js'></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
}
//set up 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]
];
console.log("tileMap.length=" , tileMap.length);
//set up a* graph
var graph = new Graph(tileMap);
var startNode={x:4,y:1}; // use values of map turned on side
var endNode={x:13,y:10};
496  |  Chapter 8: Canvas Games: Part I
//create node list
var start = graph.nodes[startNode.x][startNode.y];
var end = graph.nodes[endNode.x][endNode.y];
var result = astar.search(graph.nodes, start, end, false);
//load in tile sheet image
var tileSheet=new Image();
tileSheet.addEventListener('load'eventSheetLoaded , false);
tileSheet.src="tiles.png";
function eventSheetLoaded() {
drawScreen()
}
function drawScreen() {
for (var rowCtr=0;rowCtr<mapRows;rowCtr++) {
for (var colCtr=0;colCtr<mapCols;colCtr++){
var tileId=tileMap[rowCtr][colCtr];
var sourceX=Math.floor(tileId % 5*32;
var sourceY=Math.floor(tileId / 5*32;
context.drawImage(tileSheetsourceXsourceY,32,32,
colCtr*32,rowCtr*32,32,32);
}
}
//draw green circle at start node
context.beginPath();
context.strokeStyle="green";
context.lineWidth=5;
context.arc((startNode.y*32)+16, (startNode.x*32)+1610, 0,
(Math.PI/180)*360,false);
context.stroke();
context.closePath();
//draw red circle at end node
context.beginPath();
context.strokeStyle="red";
context.lineWidth=5;
context.arc((endNode.y*32)+16, (endNode.x*32)+16, 100,
(Math.PI/180)*360,false);
context.stroke();
context.closePath();
//draw black circles on path
for (var ctr=0;ctr<result.length-1;ctr++) {
var node=result[ctr];
Simple A* Path Finding on a Tile Grid  |  497
context.beginPath();
context.strokeStyle="black";
context.lineWidth=5;
context.arc((node.y*32)+16, (node.x*32)+16, 10, 0,
(Math.PI/180)*360,false);
context.stroke();
context.closePath();
}
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
A* Taking Diagonal Moves into Account
For Example 8-15, we will be making changes to Example 8-14 to add in diagonal
movement to the A* path.
So far, each of our examples has used the astar.js functions, which ignore diagonal
movements between nodes. We can easily add this capability. Example 8-15 does this
with one simple change. We will be changing the false in the A* search function to true:
//For example 8-15 we will add true to the end of the search function
var result = astar.search(graph.nodesstartendtrue);
By simply changing false to true at the end of the call to the astar.search(), we can
change the result node path dramatically. Figure 8-15 shows the path difference.
498  |  Chapter 8: Canvas Games: Part I
Documents you may be interested
Documents you may be interested