I'm using a A* pathfinding script in a simple JavaScript 2D (canvas) game. I broke my game down to a SSCCE. Anyway, my game is 15 columns across and 10 rows down.
What is the problem? Setting up the graph, the nodes are only set up 11 times across and 10 times up and down. The X axis should be up to 15 when appearently it only sets up to grid.length which is 11. OK, so there is my problem. My grid is a return array included in the SSCCE.
Here is my SSCCE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src='graphstar.js'></script>
<script type="text/javascript">
var board;
</script>
<script type='text/javascript' src='astar.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
// UP to DOWN - 11 Tiles (Y)
// LEFT to RIGHT - 16 Tiles (X)
graph = new Graph([
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 1, 13, 13, 1],
[1, 13, 1, 1, 13, 1, 1, 13, 1, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 13, 1, 1, 1, 13, 13, 1, 13, 13, 1, 1, 1, 13, 1],
[1, 13, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 1],
[1, 13, 1, 1, 1, 1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
]);
//Let's do an example test.
start = graph.nodes[1][2]; // X: 1, Y: 2
end = graph.nodes[12][7]; // X: 12, Y: 7
result = astar.search(graph.nodes, start, end);
});
</script>
</head>
<body>
Loading... pathfinding. Look in Chrome Console/Firefox Firebug for more information.
</body>
</html>
As you can see, my grid is 11 rows up and down and 16 columns across. However my graph doesn't interpret it that way.
See the whole graphstar.js here: http://pastebin.com/KfS9ALFq (Here is astar.js for full package: http://pastebin.com/8WyWnTpQ)
This is where it's laid out in graphstar.js:
function Graph(grid) {
var nodes = [];
var row, rowLength, len = grid.length;
console.log("Length:" + len);
for (var x = 0; x < len; ++x) {
row = grid[x];
rowLength = row.length;
nodes[x] = new Array(rowLength);
for (var y = 0; y < rowLength; ++y) {
nodes[x][y] = new GraphNode(x, y, row[y]);
}
}
this.input = grid;
this.nodes = nodes;
}
As you can see, the for loop only goes to the grid.length (len) which is 11 because it is 11 rows down. BUT That's the X axis. My map for the X axis goes 15 columns across and the Y axis is 16 rows down.
Now you say... why don't you switch the axis's around? I tried that. Like, X and Y being switched. But all I get is Uncaught TypeError: Cannot set property '0' of undefined in line 24 which is nodes[x][y] = new GraphNode(x, y, row[y]);
How can I make it so the graph is set up accordingly with X's highest axis is 15 and Y's highest axis is 10?
EDIT: Misinterpreted what you were saying.
It seems like you just need to change the way you're iterating through with the for loops so that you're going down one and across it, down one and across it
var row, rowLength, len = grid.length;
for(y = 0; y == len - 1; ++y) {
row = grid[x];
rowLength = row.length; // Expected: 16;
nodes[y] = new Array(len);
for (var x = 0; x == rowlength - 1; ++x){
//figure out your nodes[y][x] here;
}
}