Jcanvas层碰撞

问题描述:

我试图做一个函数来检测两层是否碰撞。使用jQuery jcanvas和HTML5画布Jcanvas层碰撞

我建立一种飞行模拟器中,玩家可以上升/下降,以避免热airballons对玩家的到来。

我需要检测如果飞机将要与气球层碰撞。

我已经试过检查层X/Y位置,但不工作这么好,因为热airballon不squere形。

想象一下:

 ______________    __ 
    /    \   //  _ 
/    \  ___/__/_______/ /\ 
    | Air ballon  | / Plane 1 /
    |     | \___\ \_______\ \ 
    \    /  \ \  \/ 
    \    /   \__\ 
    \   /
     \   /    __ 
     \  /   //  _ 
     \  /   ___/__/_______/ /\ 
     \ /  / Plane 2 /
      \____/    \___\ \_______\ \ 
      |__|     \ \  \/ 
      |__|     \__\ 

在我目前的解决方案既双雄会碰撞在同一时间。当计划实际与空中气球筐发生碰撞时,我需要飞机2进行碰撞

+0

如果是这样,我指出正确的方向。 (主要是教育目的) –

+0

嗯我不能想到任何资源的头顶上,基本上这取决于如何绘制和存储对象的坐标,然后它只是检查x/y +宽度的问题/高度与其他物体相交以查看它们是否相交。你可以发布一些代码或小提琴吗? – Loktar

+0

使用精心挑选的图书馆将是一个好主意。例如CreateJS。 – GameAlchemist

您遇到的问题通常被称为碰撞检测

最常用的方法,以碰撞检测是抽象的每个对象作为几何形状,然后检查是否这些形状相交。常见的选择是矩形或圆形,因为检查它们是否相互交叉是相当平凡的。

另一种方法是使用基于像素的碰撞检测。您可以在单独的图层上绘制要检查的两个对象,然后检查两个图层上每个像素的颜色值。当两者的alpha值都大于0时,就会发生碰撞。好处是它非常准确,但缺点是CPU相当紧张,因为您需要检查很多像素。要优化CPU负载,可以将其与几何方法结合使用,以减少需要检查的像素数量。

  1. 限定一个矩形围绕每个对象
  2. 检查如果矩形相交
  3. 当他们这样做计算交叉区域
  4. 画出两个对象分离,空,画布
  5. 获得像素数据两个画布领域与context.getImageData()
  6. 的比较返回数组的α值。当两个画布上的相同像素大于0时,就会发生碰撞。