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;
    };
};

对不起，评论是荷兰语，但我想大多数人甚至都不需要这些评论：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并复制粘贴）。

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

我是JavaScript和HTML5的新手，所以请对我这么简单。

Sem Wong。

编辑：所以每次我做网格[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);

多维数组问题

1 个答案: