Home/ Questions/Q 7919973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T16:02:56+00:00

I’m using a A* pathfinding script in a simple JavaScript 2D (canvas) game. I

  • 0

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, I set up the nodes correctly (or so I think) using a simple for loop within a for loop to set up a 15 across and 10 down board.

So when I load up the page, I get this error: Uncaught TypeError: Cannot read property '5' of undefined

That is from this line start = graph.nodes[12][5]; (from SSCCE below) where if you change the 5 (Y) then the number in the error will change.

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 - 10 Tiles (Y)
        // LEFT to RIGHT - 15 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[12][5]; // X: 12, Y: 5
        end = graph.nodes[2][4]; // X: 2, Y: 4
        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 10 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/xUwghjRR (Here is astar.js for full package: http://pastebin.com/YMBtX66W)

This is where it’s laid out in graphstar.js: NEWLY UPDATED

function Graph(grid) {
    var nodes = [];

var row, rowLength, len = grid.length;
for(var y = 0; y < len; ++y){
    row = grid[y];
    rowLength = row.length; // Expected: 16;
    nodes[y] = new Array(len);
    for (var x = 0; x == rowLength - 1; ++x){

            nodes[y][x] = new GraphNode(x, y, row[y]);

    }
}

    this.input = grid;
    this.nodes = nodes;
}

As you can see, the for loop is done by seeing how long the grid. grid length should output to 11 which is correct since we’re looping the Y axis first. Then by row length which should output 16 which is correct since then we are doing the X axis.

So when I start the page I get this error:

So… I think I graphed it right however my X and Y still give undefined.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    your condition on the loop is false from the start so it never even enters the first loop, it should be 

    for(var y = 0; y < len; ++y){

    also the call to GraphNodes probably sould be using x rather than y

    edit:

    there are also a few other little bugs in the code, the second loop need a capital L in rowLength and the order of the x and y in the posion you are saving the new node object to need to be switched nodes[y][x] =

    edit2:

    working function, beware I removed the function call to GraphNodes for ease of use, there is also a few console.log calls you will want to remove

    function Graph(grid) {
    var nodes = [];

    var row, len = grid.length;
    console.log(len);
    for (var y = 0; y < len; ++y) {
        console.log(y);
        row = grid[y];
        console.log(row);
        var rowLength = row.length; // Expected: 16;
        nodes[y] = new Array(len);
        for (var x = 0; x < rowLength; ++x) {

            nodes[y][x] = row[x];
            console.log(nodes);

        }
    }

    this.input = grid;
    this.nodes = nodes;
}

    edit 3:

    the problem is probably because all your other code is looking at the co-ordinates as x,y where as the loops you have here and storing them y,x if you change the code like this it should let you keep all the other code using x,y

    function Graph(grid) {
    var nodes = [];

    var row, len = grid.length;
    for (var y = 0; y < len; ++y) {
        row = grid[y];
        var rowLength = row.length; // Expected: 16;

        for (var x = 0; x < rowLength; ++x) {
        if(!nodes[x]){      
                nodes[x] = new Array(len);
        }
            nodes[x][y] = row[x];

        }
    }

    this.input = grid;
    this.nodes = nodes;
}
    • 0