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. 将两个对象绘制为单独的空白画布
5. 使用context.getImageData()两个画布上区域的像素数据。
6. 比较返回数组的alpha值。 当两个画布上的相同像素都大于0时，就会发生冲突。