Javascript / Jquery / Gamequery中的每像素碰撞检测

Question

我正在尝试使用GameQuery插件在Jquery中编写一个网页游戏，问题是GameQuery插件不支持每像素碰撞检测只有碰撞检测边界框。是否有可能在javascript / Jquery中实现每像素碰撞检测？

我有一个国家的世界地图和一个使用箭头键移动的玩家，我希望能够随时告诉玩家所在的国家/地区，这些国家是不规则的形状。

Answer 1

或者从不同角度攻击它......可以这么说......

向量可能是您在http://www.raphaeljs.com

发生的关键，很酷的事情

也许某种组合/整合可以起作用？

Answer 2

好的，这是一种解决方案：

在地图中为每个国家/地区指定不同的颜色（不要为边框指定特殊颜色，边框应以国家/地区的颜色着色。）

将该图像加载到画布

var img = new Image();
img.src = 'worldmap.png';
var map = document.getElementById('canvas').getContext('2d');
map.drawImage(img, 0, 0);

之后，您可以在该地图上方显示您的法线贴图（它只是一个参考，可以隐藏在其他内容之下 - 使用div和z-index）。

确定玩家在哪个国家/地区获取其位置的像素数据

data = map.getImageData(x, y, 1, 1).data;
key = data.join("-"); // something like "255-0-0-255" for red
country = countries[key];

它应该是一个rgba数组，然后您可以查找分配给该颜色的国家/地区。 所以你必须保持一个数组，其中包含内含的rgba-values作为键，国家名称作为值。

countries = {
"255-0-0-255"   : "Russia",
"255-0-255-255" : "China",
...
};

这仅适用于具有canvas对象的浏览器。所以，如果你在iPhone或Android上这样做，你很幸运！

Answer 3

图像只是pngs，国家为纯色，其余为透明度。

Answer 4

这是不可能的。

然而，你有一个不太复杂的选择：使用基于多边形的碰撞。

使用图像向用户显示国家/地区，但在内部使用多边形。

您可以在this forum entry上找到有关如何实现此功能的完整说明（您可能需要向下滚动一下，直到看到图像为止）。那个问这个问题的人想要做或多或少跟你想做的一样（鼠标位置而不是字符位置）。

问候！