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

Question

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

我有一个国家和球员的世界地图，这是使用箭头键移动，我希望能够告诉球员在哪个国家在任何时候，国家是不规则的形状。

Answer 1

或者从不同的angle...so攻击它。

向量可能是你的关键，在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值作为键，将国家名称作为值。

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

这只适用于具有canvas对象的浏览器。所以，如果你是在iphone或android上做这件事，那你就很幸运了！

Answer 3

这些图像只是pngs，对于国家是纯色的，对于其余的是透明的。