Javascript 在html5画布中使用冲突数组进行冲突检测

我试图检测图像中的角色和对象是否发生碰撞。我正在使用一个可以解析图像并创建冲突数组的函数和另一个可以检测特定位置是否存在冲突的函数。我的问题是，

isCollision

函数从未执行，这是我的JSFIDLE：

---

请帮我解决我的问题

将此添加到

init（）方法的顶部，它应该可以工作：

FieldImg.crossOrigin = '';

当您从不同的源加载图像时，CORS将启动，并且您需要在使用
getImageData（）
（或
toDataURL（）
）时请求跨源使用


注意：在您的最终代码中，这可能不是必需的，尽管您可能希望将图像包含在与页面本身相同的域中-在这种情况下，您需要删除跨源请求，除非您的服务器设置为处理此问题。如果事情突然不起作用的话，我想以后再考虑一下。
好的，我找到了：

您正在加载一个巨大的背景图像，并在更小的画布上绘制部分图像。

您可以使用process（）函数中构建的显示画布上的二进制视图执行视觉冲突检测。

当您想要测试时，问题就出现了：要计算播放器在二元视图中的像素位置，您使用的是y*width+x，但背景图像的宽度错误，而背景图像的宽度应该是视图（cw）的宽度

.

向右移动并使用此小提琴查看控制台：
控制台中有错误。首先检查它。修复了它。请检查这个错误发生在我刚刚在JSFIDLE中发布代码时，但我的主要问题不在那里。我的问题是iscollision函数没有执行。你能告诉我为什么吗
FieldImg.crossOrigin = '';

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