使用html5画布内的碰撞数组进行碰撞检测

Question

我试图检测图像中的角色和物体是否发生碰撞。我正在使用一个可以解析图像并创建碰撞数组的函数和另一个可以检测特定位置是否发生碰撞的函数。我的问题是，isCollision函数永远不会执行我的jsfiddle：http://jsfiddle.net/AbdiasSoftware/UNWWq/1/

if (isCollision(character.x, character.y)) {
    alert("Collision");
}

请帮我解决我的问题。

Answer 1

在init()方法的顶部添加它，它应该可以工作：

FieldImg.crossOrigin = '';

当您从其他来源加载图片时，CORS会启动，您需要在使用getImageData()（或toDataURL()）时请求跨域使用。

<强> See modified fiddle here

注意：在最终代码中，这可能不是必要的，因为您可能希望将图像包含在与页面本身相同的域中 - 在这些情况下，您需要删除跨源请求，除非您的服务器是设置来处理这个。如果突然发生了什么事情，那么以后需要考虑的事情......

Answer 2

好的我发现了：
您正在加载一个巨大的背景图像，并在一个小得多的画布上绘制它的一部分 您可以使用在process（）函数中构建的显示画布上的二进制视图进行视觉碰撞检测 当你想要测试时出现问题：要在二进制视图中计算播放器的像素位置，你使用的是y * width + x，但是宽度错误，背景图像应该是视图的宽度（CW）。

 function isCollision(x, y) {
     return (buffer8[y * cw + x] === 1);
 }

。
向右移动，用这个小提琴看一下控制台： http://jsfiddle.net/gamealchemist/UNWWq/9/