Javascript Jcanvas层碰撞

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

我正在建造一种飞行模拟器，玩家可以在其中升降，以避免热气球向玩家飞来

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

我已经试过检查图层的x/y位置，但效果不太好，因为热空气球不是挤压形状

想象一下：

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

---

在我当前的解决方案中，两个平面将同时碰撞。我需要飞机2稍后碰撞，当飞机实际与气球篮碰撞时

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

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

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

围绕每个对象定义一个矩形

检查矩形是否相交

当他们计算相交面积时

绘制两个对象以分离、清空画布

使用

context.getImageData（）

比较返回数组的alpha值。当两个画布上的相同像素大于0时，发生碰撞

---

如果是这样，请给我指出正确的方向。（主要是出于教育目的）嗯，我想不出有什么现成的资源，基本上可以归结为如何绘制和存储对象的坐标，然后只需对照其他对象检查x/y+宽度/高度，看看它们是否相交。你能发布一些代码或是一把小提琴吗？使用一个精心挑选的库将是一个好主意。例如CreateJS。