Jcanvas图层碰撞

Question

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

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

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

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

想象一下：

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

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

Answer 1

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

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

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

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