JavaScript - 未捕获类型错误 : Cannot set property '0' of undefined

标签 javascript jquery html a-star

我正在使用A* pathfinding script在一个简单的 JavaScript 2D( Canvas )游戏中。我将游戏分解为 SSCCE 。无论如何,我的游戏是横向 15 列,向下 10 行。

问题是我得到的错误。下面我有一种方法来开始和结束节点之间的路径。以下是 第 15 行 上的错误消息 Uncaught TypeError: Cannot set property '0' of undefined。第 15 行是第二个 for 循环之间的 nodes[x][y] = new GraphNode(x, y, row[x]);

这是我的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[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>

如您所见,我的游戏是 jQuery。还有graphstar.jsastar.js。不用担心 astar.js,因为它工作得很好。 graphstar.js 是我的问题所在。 astar.js 是放置节点 等的地方。 graphstar.js 是绘制 map 的位置。

在此处查看整个 graphstar.js:http://pastebin.com/5AYRreip (这里是astar.js:http://pastebin.com/ee6PMzc3)

这是它在 graphstar.js 中的布局:

function Graph(grid) {
    var nodes = [];
    var row, rowLength, len = grid.length;
    for (y = 0; y <= 15; y++) {
        row = grid[y];
        nodes[y] = new Array(15);
        for (x = 0; x <= 10; x++) {
            nodes[x][y] = new GraphNode(x, y, row[x]);
        }
    }
    this.input = grid;
    this.nodes = nodes;
}

因此,如您所见...Y 可以是 10 或更低。 X 可以是 15 或更低。但是,我收到此错误。

当我输入end = graph.nodes[12][7];时//X:12,Y:7 应该可以工作,因为它在 XY 范围内...但是我什至在一开始就设置它都遇到了麻烦。

为什么它是未定义的?

更新新内容

for (y = 0; y <= 10; y++) {

    row = grid[y];
    nodes[y] = new Array(15);

    for (x = 0; x <= 15; x++) {

        console.log("X: " + x + " Y: " + y);
        //console.log("Row: " + row[x]);
        nodes[x][y] = new GraphNode(x, y, row[x]);
    }
}

最佳答案

你的轴混淆了。

function Graph(grid) {
    var nodes = [];
    var row, rowLength, len = grid.length;
    for (y = 0; y <= 15; y++) {
        row = grid[y];
        // Here, you're indexing into `nodes` using `y`, so you're creating
        // an array at `nodes[0]` through `nodes[15]`
        nodes[y] = new Array(15);
        for (x = 0; x <= 10; x++) {
            // But here you're index into `nodes` using `x` in the first dimension,
            // so you're filling in `nodes[0][0]` through `nodes[10][15]`, not
            // `nodes[15][10]`.
            nodes[x][y] = new GraphNode(x, y, row[x]);
        }
    }
    this.input = grid;
    this.nodes = nodes;
}

因此,当您检索nodes[12]时,您会得到undefined,因为从未为该索引分配过值。然后您尝试对其进行索引,并收到错误。

您需要确保始终使用一个坐标(xy,无论您喜欢哪一个)对外部数组进行索引,并对内部数组进行索引与另一个坐标(yx,无论您喜欢哪个)。

关于JavaScript - 未捕获类型错误 : Cannot set property '0' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10460128/

相关文章:

javascript - 即使列表中的一个未选中,如何取消选中复选框?

html - 如何检查输入文本是否具有值(value)而不仅通过java脚本触发其中的提交

c# - 如何使用 CSS 或 CSSClass 或 C# 更改多个不同样式的 asp.net 文本框或标签或标签?

javascript - sequelize 缓存常见请求

javascript - 为什么当我下载我的数组并尝试获取它的长度时,它只是吐出数组的字节数

jquery - 带选项卡的 slider

javascript - 通过 javascript 访问 JSON

javascript - anchor 标签自动上传文件场景

javascript - Canvas 不绘制图像

javascript - Vuetify 在焦点上打开选择/自动完成/组合框菜单