在Javascript中的每像素碰撞检测/ jquery/gamequery

我想用GameQuery插件在Jquery中编写一个网页游戏，问题是GameQuery插件不支持每像素碰撞检测只能使用包围盒进行碰撞检测。是否有可能在javascript/jquery中实现每像素的碰撞检测？在Javascript中的每像素碰撞检测/ jquery/gamequery

我有一个国家和一个球员使用箭头键移动的世界地图，我希望能够随时分辨球员在哪个国家，并且这些国家是不规则的形状。

来源

2010-05-21 J cheung

不规则形状的物体是如何构建的？他们每个人都是一个大的形象？ ...还是由彩色DOM元素组成？ – James 2010-05-21 18:15:31

我们计划让每个国家都成为一个独立的元素，它被作为一个PNG画在屏幕上，但是如果它作为一个单一的大图像会更容易，那么可以改变计划来适应这种情况。我们想到了将每个像素映射到一个国家并检查玩家对像素图以获取国家的位置的想法，这样会有效吗？ – 2010-05-21 18:22:44

它可能效率不高，但它似乎是唯一的方法。如果我可以看到您使用的图像类型的示例（例如纯色或与地形相关的颜色），我可能可以提供更多帮助 - 可以使用canvas'getImageData'来确定只要国家对象与图像的其余部分有足够的差异，就可以在国家内使用特定的像素。 – James 2010-05-21 18:47:27

这些图像只是国家的纯色和其余的透明度的png。

来源

2010-05-21 19:33:03

这是不可能的。

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

使用图像向用户展示国家，但在内部使用多边形。

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

问候！

来源

2010-05-22 19:01:10 kikito

或从不同角度攻击它......这么说吧......

载体可以是你的关键，很酷的事情发生在http://www.raphaeljs.com

也许某种组合的/集成可以工作？

来源

2010-08-07 23:36:29 vinny

好吗这里是怎样的一个解决方案：

分配给每个国家不同的颜色在你的地图（不指定特殊的颜色边框，边框应该在国家的任何颜色着色）。

载荷图像到画布

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

后，您可以显示地图上方法线贴图（它只是一个参考，而且可以在其他的东西被隐藏 - 使用的div和z指数那）。

，以确定在哪个国家的球员在他的位置刚刚得到的像素数据

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", 
... 
};

这只适用于具有画布对象的浏览器。所以如果你在iphone或android上做这个，你很幸运！

来源

2011-07-05 17:54:43 zuloo

在Javascript中的每像素碰撞检测/ jquery/gamequery

回答

相关问题