JavaScript - 用于 x 轴和 y 轴上的循环

JavaScript - for loops on x and y axes

本文关键字：循环 轴和 用于 JavaScript      更新时间：2023-09-26

我在一个简单的JavaScript 2D(画布(游戏中使用A*寻路脚本。我把我的游戏分解为SSCCE。无论如何，我的游戏是 15 列和 10 行。

问题出在哪里？设置图形时，节点仅设置了 11 次，上下设置了 10 次。X轴应该最多15，因为它看起来最多只能设置grid.length 11。好的，这就是我的问题。我的grid是包含在SSCCE中的退货array。

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

如您所见，我的grid上下11行，横跨16列。但是，我的graph并没有这样解释。

在此处查看整个graphstar.js：http://pastebin.com/KfS9ALFq(这是完整包的astar.js：http://pastebin.com/8WyWnTpQ(

这是它在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;
}

如您所见，for循环只转到grid.length(len(，这是11的，因为它是向下11行。但这是X轴。 我的X轴地图横跨15列，Y轴向下16行。

现在你说...你为什么不切换轴？我试过了。就像，X和Y被切换。但我得到的只是Uncaught TypeError: Cannot set property '0' of undefined line 24这是nodes[x][y] = new GraphNode(x, y, row[y]);

我怎样才能使图形相应地设置X的最高轴是15而Y的最高轴是10？

编辑：误解了你在说什么。

似乎您只需要更改使用 for 循环进行迭代的方式，以便向下并穿过它，向下向下并穿过它

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;
    }
}
相关文章：