javascript - 多维数组问题

Question

我已经尝试修复此问题大约 3 天了，但我似乎找不到它不起作用的原因。

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

然而，它似乎加载得很好，但是当我尝试在我的游戏中使用它时，它会在大多数图 block 上给我加载未定义的值。事实上，我觉得它只填满了一行，而不是全部 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;
    };
};

抱歉这些评论是荷兰语的，但我认为你们中的大多数人甚至不需要这些评论: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);
});

这是我收到的输出:

undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,0,undefined,;

对于错误的代码块和东西，我很抱歉，我不知道它是如何工作的 XD(只需按 ctrl + K 并复制粘贴)。

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

我对 JavaScript 和 HTML5 等还不太熟悉，所以请放轻松。

Sem 王。

编辑:所以我发现每次执行 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);