Question

尝试做一些基本的游戏开发。

var = mapArray是一个用随机数填充的二维数组。随机数很重要，我不想提出预先定义的2D数组。

将数字分配给相关图像，然后打印以形成基本上为<canvas>元素的图块地图：

for (var i = 0; i < mapArray.length; i++) {
    for (var j = 0; j < mapArray[i].length; j++){

        if (mapArray[i][j] === 0) {
                context.drawImage(grass, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 1) {
                context.drawImage(forest, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 2) {
                context.drawImage(hills, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 3) {
                context.drawImage(mountains, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 4) {
                context.drawImage(swamp, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 5) {
                context.drawImage(forest, posX, posY, 60, 60);
        }

        posX+=60;
    }
    posX = 0;
    posY+=60;
}

我可以跟踪整个画布上相对于页面位置的鼠标点击，并获得点击的正确X和Y坐标。

现在我需要实际链接点击坐标和2D数组中保存的图块。对我来说，知道点击哪个图块很重要，因为它会调用不同的行为（例如资源，敌人，事件等）。

我在这里完全不知所措，这几天一直在阅读。我可能需要调用每个元素的函数，然后检查数组中每个元素的坐标与鼠标坐标作为函数中的IF语句，或者我可以在所有元素上广播鼠标坐标以查看哪个元素将响应。这似乎不是问题（至少现在，他是他）。

我的问题如下：我如何将函数和其他属性分配给我的数组中的元素，前提是这些是图像。可能是我构建我的阵列的方式最初是错误的，因为我用纯数字填充它然后将数字转换为图像？我可能需要推送具有更多属性的对象？我该如何处理这种情况？

数组元素的功能和与canvas的交互

0 个答案: