多维数组问题

Question

我已经尝试解决这个问题大约 3 天了，但我似乎无法找到它为什么不起作用。

我有这个函数，它加载图像，并加载所有像素以创建用于 A* 寻路的墙壁网格。我正在使用 CraftyJS 来创建这个游戏，也许是这样？

但是，它似乎加载得很好，但是当我尝试在我的游戏中使用它时，它在大多数图块上给了我大量未定义的值。事实上，我觉得它只填满了一行，而不是全部 45 个。

这是填充 GRID 的函数：

var babyStart = 0, babyNodes = [], grid = new Array(new Array());
function getGridFromImage(img, worldWidth, worldHeight) {
    var image = new Image(); //maak een image object
    var c = document.getElementById("mapLoader");
    var context = c.getContext("2d");
    image.src = img; //pak het plaatje erbij
    image.onload = function () {
        context.drawImage(image, 0, 0);
        var data = context.getImageData(0, 0, worldWidth, worldHeight); //Verkrijg de Pixeldata
        console.log(data); 
        var count = 0, tmr = null, length = data.data.length, x = 0, y = 0;
        babyNodes = [];
        while(count <= length) {
            grid[y] = new Array();
            //Verkrijg de kleuren DATA
            var r = data.data[count]; //Rood channel
            var g = data.data[count + 1]; //Groen channel
            var b = data.data[count + 2]; //Blauw channel
            //console.log(data[0]);
            //console.log("Count/length: " + count + "/" + length + ";r: " + r + ";g: " + g + ";b: " + b);
            if (r == 0 && g == 0 && b == 0) {
                grid[y][x] = 1;
            } else {
                grid[y][x] = 0;
            }

            if (b > 0) {
                babyNodes[b - 255] = count;
            }

            if (g == 255) {
                babyStart = count;
            }

            count += 4;
            x++;

            if (x >= worldWidth) {
                y += 1;
                x = 0;
            }
        }
        loading = false;
    };
};

抱歉，cmets 是荷兰人，但我想你们中的大多数人甚至都不需要这些 cmets：P。

我尝试在另一个 JS 文件中的另一个函数中收集数据，它看起来有点像这样：

Crafty.scene("lvlWoonkamer", function () {
    Crafty.sprite("images/levels/Woonkamer.png", { 
        achtergrond: [0,0,1280,720]
    });

    Crafty.e("2D, DOM, achtergrond").attr({x: 0, y: 0});
    console.log("Starting grid count");
    for (var i = 0; i < 45; i++) {
        var str = "";
        for(var ii = 0; ii <= 80; ii++) {
            str += grid[i][ii] + ",";
            console.log("[" + i + "][" + ii + "]");
        }
        str += ";";
    }

    console.log(str);
});

这是我收到的输出：

未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义，未定义,未定义,未定义,未定义,未定义,未定义,0,未定义,;

抱歉代码块和东西不好，我不知道它是如何工作的 XD（只需按 ctrl + K 并复制粘贴）。

我不知道为什么会这样，我用多维数组尝试了各种各样的东西，查了很多，复制粘贴了很多，但它似乎不起作用...... （我已经很高兴它加载了图像 tbh XD）。

我对 JavaScript 和 HTML5 以及所有这一切有点陌生，所以请放轻松。

王森。

编辑：所以我发现每次执行 grid[y] = new Array(); 时我都在清除数组，所以我将其更改为 if (grid[y] == null) grid[y] = new大批（）;。现在它工作得更好了，仍然有一些未定义，但我会深入了解它:)。

编辑 2：我完全修复了它，并且寻路也在工作（A* OP）。感谢大家的帮助！令我失望的是 getGridFromImage 函数，因为它不断清除我的网格 [y]。对于和我有同样问题的人，我在下面得到了一个固定版本（不要认为有人像我一样愚蠢，但我想新开发人员可能会遇到同样的问题）

var babyStartX = 0, babyStartY = 0, babyNodes = [], grid = new Array(new Array());
function getGridFromImage(img, worldWidth, worldHeight) {
var image = new Image(); //maak een image object
var context = document.getElementById("mapLoader").getContext("2d");
image.src = img; //pak het plaatje erbij
image.onload = function() {
    context.drawImage(image, 0, 0);

    var data = context.getImageData(0, 0, worldWidth, worldHeight); //Verkrijg de Pixeldata
    console.log(data); 

    var count = 0, length = data.data.length, x = 0, y = 0;

    while(count <= length) {
        if (grid[x] == null) grid[x] = new Array();
        //Verkrijg de kleuren DATA
        var r = data.data[count]; //Rood channel
        var g = data.data[count + 1]; //Groen channel
        var b = data.data[count + 2]; //Blauw channel
        //console.log(data[0]);
        //console.log("Count/length: " + count + "/" + length + ";r: " + r + ";g: " + g + ";b: " + b);
        if (r == 0 && g == 0 && b == 0) {
            grid[x][y] = 1;
        } else {
            grid[x][y] = 0;
        }

        if (b > 0 && g == 0 && r == 0) {
            babyNodes[b - 254] = [x,y];
        }

        if (g == 255 && b == 0 && r == 0) {
            babyStartX = x;
            babyStartY = y;
            babyNodes[0] = [x,y];
        }

        count += 4;
        x++;

        if (x >= worldWidth) {
            y += 1;
            x = 0;
        }
    }
    loading = false;
}; };

Answer 1

我不熟悉 Crafty，如果我错了，我很抱歉，但我想 Scott Sauyet 是对的。 JavaScript 默认是异步的，所以也许您在第一个函数完成之前调用了第二个函数？

这里有一些关于回调的背景信息：http://recurial.com/programming/understanding-callback-functions-in-javascript/

回调背后的概念是您可以在另一个模块中调用一个模块，因此它们总是按顺序运行。

function build(argument1, argument2) {
  // Do things
  check;
}

function check() {
  // Do things
}

您的情况可能是这样的，但我无法从您的代码中真正看出。

function getGridFromImage(img, worldWidth, worldHeight) {
  // Rest of your function
  check;
}

function check() {
  Crafty.scene("lvlWoonkamer", function () {
    Crafty.sprite("images/levels/Woonkamer.png", { 
        achtergrond: [0,0,1280,720]
    });

    Crafty.e("2D, DOM, achtergrond").attr({x: 0, y: 0});
    console.log("Starting grid count");
    for (var i = 0; i < 45; i++) {
        var str = "";
        for(var ii = 0; ii <= 80; ii++) {
            str += grid[i][ii] + ",";
            console.log("[" + i + "][" + ii + "]");
        }
        str += ";";
    }

    console.log(str);
  });
}

// Actually start the first function here;
getGridFromImage(img, worldWidth, worldHeight);