Javascript 使用getImageData检测JS画布冲突

作为一个非常缺乏经验的程序员，我正在尝试编写一个游戏，当玩家与画布上的某些颜色发生碰撞时，我会进行检测。我有一个带有坐标“player.x”和“player.y”的黑色正方形，尺寸为50x50，按下箭头键时会四处移动。在画布的其他地方，我还有一个固定的红色（255,0,0）正方形

下面的函数应该抓住“玩家”方格周围稍大一点的方格，看看里面是否有红色。如果有，它将发出警报。问题是，这似乎不起作用

function collideTest(){
    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");

    var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60);

    for (var i = 0; i < 3600; i++) {
        if (whatColor.data[i] == 255) {
            alert("red");
        }
    }
}

函数测试（）{
var canvas=document.getElementById（“canvas”）；
var c=canvas.getContext（“2d”）；
var whatColor=c.getImageData（player.x-5，player.y-5,60,60）；
对于（变量i=0；i<3600；i++）{
if（whatColor.data[i]==255）{
警报（“红色”）；
}
}
}

我知道这不是检测红色像素的最有效方法，但我想在这里发布之前简化代码。功能是否有明显的问题

问题可能在于函数的调用方式。它在另一个函数的末尾被调用，该函数检测用户输入并更改“玩家”方块的坐标。在画布上绘制所有内容之前调用该函数

---

提前感谢您的帮助

对于画布上的每个像素，whatColor.data数组包含4条连续的颜色信息：红色、绿色、蓝色、alpha（不透明度）。因此，whatColor.data对于每个像素都是这样的：

whatColor.data[i]是颜色的红色部分

whatColor.data[i+1]是颜色的绿色部分

whatColor.data[i+2]是颜色的蓝色部分

whatColor.data[i+3]是颜色的alpha（不透明度）分量

因此，您的迭代将如下所示（每像素4个索引）：

for（变量i=0，n=whatColor.data.length；i

有关imageData.data数组的迷你教程，请参见此处：

---

顺便说一下，您可能会看到其中一个canvas库，它简化了使用canvas制作游戏的过程。这里只有几个：画架、KineticJs、FabricJs等等

对于画布上的每个像素，whatColor.data数组包含4条连续的颜色信息：红色、绿色、蓝色、alpha（不透明度）。因此，whatColor.data对于每个像素都是这样的：

var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60);

whatColor.data[i]是颜色的红色部分

whatColor.data[i+1]是颜色的绿色部分

whatColor.data[i+2]是颜色的蓝色部分

whatColor.data[i+3]是颜色的alpha（不透明度）分量

因此，您的迭代将如下所示（每像素4个索引）：

for（变量i=0，n=whatColor.data.length；i

有关imageData.data数组的迷你教程，请参见此处：

顺便说一下，您可能会看到其中一个canvas库，它简化了使用canvas制作游戏的过程。这里只有几个：画架、KineticJs、FabricJs等等

var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60);

player.x

和

player.y

不能是十进制，请确保它们是四舍五入的，否则getImageData会生气，不会玩得很好

---

player.x

和

player.y

不能是十进制，请确保它们是四舍五入的，否则getImageData会生气，不能玩得很好。

谢谢您的回复！不过，正如我所怀疑的，函数本身的内容似乎不是问题所在。即使我照你写的那样做，我一碰到红色就没有反应。这可能是函数如何调用的问题吗？只要在画布完全渲染后调用collideTest（），那么collideTest（）就是进行命中测试的正确位置。虽然我不知道你的程序逻辑，但如果你知道黑匣子和红匣子的坐标+大小，你可以通过分析它们的两个边界框来进行命中测试。谢谢你的回复！不过，正如我所怀疑的，函数本身的内容似乎不是问题所在。即使我照你写的那样做，我一碰到红色就没有反应。这可能是函数如何调用的问题吗？只要在画布完全渲染后调用collideTest（），那么collideTest（）就是进行命中测试的正确位置。虽然我不知道你的程序逻辑，但是如果你知道黑匣子和红匣子的坐标+大小，你可以通过分析它们的两个边界框来进行命中测试。