使用 getImageData 的 JS 画布碰撞检测

Question

作为一个非常缺乏经验的程序员，我正在尝试编写一个游戏来检测玩家何时与画布上的某些颜色发生碰撞。我有一个黑色方块，坐标为“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");
        }
    }
}

我半意识到这不是检测红色像素的最有效方法，但我想在将代码发布到此处之前简化代码。该功能是否有明显问题？

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

提前感谢您的帮助！

Answer 1

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

player.x和player.y不能是小数，一定要四舍五入，否则getImageData会生气，玩不好。

Answer 2

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

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

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

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

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

所以你的迭代看起来像这样（每个像素 4 个索引）：

 for(var i = 0, n = whatColor.data.length; i < n; i += 4) {
      var red = whatColor.data[i];
      var green = whatColor.data[i + 1];
      var blue = whatColor.data[i + 2];
      var alpha = whatColor.data[i + 3];
      if(red==255){ ... it's a hit, do your thing! ... }
 }

有关 imageData.data 数组的迷你教程请参见此处：http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

顺便说一句，您可能会查看使用画布简化游戏制作的画布库之一。这里只是一些：easelJs、KineticJs、FabricJs 等等！