JS画布使用getImageData进行碰撞检测

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

下面的函数应该抓住“玩家”广场周围的一个稍大的方块，并确定它是否有红色。如果有，它会发出警报。问题是，这似乎没有工作。

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

我半意识到这是不检测红色像素的最有效的方式，但我想在这里张贴之前简化代码。这个函数有什么明显的错误吗？

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

在此先感谢您的帮助！

来源

2013-02-09 trevnewt

对于画布上的每个单个像素，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等等！

来源

2013-02-09 20:43:29 markE

感谢您的回复！但正如我所怀疑的那样，功能本身的内容似乎不成问题。即使我做了你在那里写的东西，我也没有反应。这可能是该函数如何被调用的问题吗？ – trevnewt 2013-02-09 20:59:12

只要collideTest（）在画布完全渲染后被调用，那么collideTest（）就是进行碰撞测试的正确位置。虽然我不知道你的程序逻辑，但如果你知道黑盒子和红盒子的坐标+大小，你可以通过分析它们的两个边界框来进行测试。 – markE 2013-02-10 01:30:43

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

player.x和player.y不能是十进制，确保它们圆形或getImageData会生气，而不是发挥好。

来源

2016-03-05 16:36:28

JS画布使用getImageData进行碰撞检测

回答

相关问题