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/

顺便说一下，您可以查看一个简化使用画布进行游戏制作的画布库。以下是一些：画架，动力学，FabricJs等等！

使用getImageData进行JS Canvas Collision-Detection

2 个答案: