Jcanvas层碰撞
问题描述:
我试图做一个函数来检测两层是否碰撞。使用jQuery jcanvas和HTML5画布Jcanvas层碰撞
我建立一种飞行模拟器中,玩家可以上升/下降,以避免热airballons对玩家的到来。
我需要检测如果飞机将要与气球层碰撞。
我已经试过检查层X/Y位置,但不工作这么好,因为热airballon不squere形。
想象一下:
______________ __
/ \ // _
/ \ ___/__/_______/ /\
| Air ballon | / Plane 1 /
| | \___\ \_______\ \
\ / \ \ \/
\ / \__\
\ /
\ / __
\ / // _
\ / ___/__/_______/ /\
\ / / Plane 2 /
\____/ \___\ \_______\ \
|__| \ \ \/
|__| \__\
在我目前的解决方案既双雄会碰撞在同一时间。当计划实际与空中气球筐发生碰撞时,我需要飞机2进行碰撞
答
您遇到的问题通常被称为碰撞检测。
最常用的方法,以碰撞检测是抽象的每个对象作为几何形状,然后检查是否这些形状相交。常见的选择是矩形或圆形,因为检查它们是否相互交叉是相当平凡的。
另一种方法是使用基于像素的碰撞检测。您可以在单独的图层上绘制要检查的两个对象,然后检查两个图层上每个像素的颜色值。当两者的alpha值都大于0时,就会发生碰撞。好处是它非常准确,但缺点是CPU相当紧张,因为您需要检查很多像素。要优化CPU负载,可以将其与几何方法结合使用,以减少需要检查的像素数量。
- 限定一个矩形围绕每个对象
- 检查如果矩形相交
- 当他们这样做计算交叉区域
- 画出两个对象分离,空,画布
- 获得像素数据两个画布领域与
context.getImageData()
- 的比较返回数组的α值。当两个画布上的相同像素大于0时,就会发生碰撞。
如果是这样,我指出正确的方向。 (主要是教育目的) –
嗯我不能想到任何资源的头顶上,基本上这取决于如何绘制和存储对象的坐标,然后它只是检查x/y +宽度的问题/高度与其他物体相交以查看它们是否相交。你可以发布一些代码或小提琴吗? – Loktar
使用精心挑选的图书馆将是一个好主意。例如CreateJS。 – GameAlchemist