javascript - Jcanvas图层碰撞

Question

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

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

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

我试过检查层的 x/y 位置，但效果不佳，因为热气球不是方形的。

想象一下:

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

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

Answer 1

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

最常见的碰撞检测方法是将每个对象抽象为几何形状，然后检查这些形状是否相交。常见的选择要么是矩形，要么是圆形，因为检查它们是否相互交集非常简单。

另一种方法是使用基于像素的碰撞检测。您在不同的图层上绘制要检查的两个对象，然后检查两个图层上每个像素的颜色值。当两者的 alpha 值 > 0 时，就会发生碰撞。优点是非常准确，缺点是需要检查太多的像素，所以非常耗CPU。要优化 CPU 负载，您可以将其与几何方法结合使用，以减少需要检查的像素数量。

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