Jcanvas层碰撞

Question

我正在尝试创建一个函数来检测两个图层是否发生碰撞。使用Jquery，jcanvas和HTML5 canvas

我正在构建一种飞行模拟器，玩家可以上升/下降以避免热气球飞向玩家。

我需要检测飞机是否即将与气球层碰撞。

我已经尝试检查x / y位置的图层，但由于热气球没有形状，因此效果不佳。

想象一下：

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

在我目前的解决方案中，两架飞机会同时发生碰撞。当计划实际上与空气气球筐碰撞时，我需要飞机2稍后碰撞

Answer 1

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

最常见的碰撞检测方法是将每个对象抽象为几何形状，然后检查这些形状是否相交。常见的选择是矩形或圆形，因为检查它们是否相互交叉是相当微不足道的。

另一种方法是使用基于像素的碰撞检测。您绘制要在不同图层上检查的两个对象，然后检查两个图层上每个像素的颜色值。当两者的α值均> 1时0，你有碰撞。优点是它非常准确，但缺点是它非常强大，因为你需要检查这么多像素。要优化CPU负载，可以将其与几何方法结合使用，以减少需要检查的像素数量。

1. 围绕每个对象定义一个矩形
2. 检查矩形是否相交
3. 当他们计算交叉区域时
4. 将两个对象绘制为独立的，空的，画布
5. 使用context.getImageData()
获取两幅画布上区域的像素数据
6. 比较返回数组的alpha值。当两幅画布上的相同像素大于0时，就会发生碰撞。