使用矩形进行碰撞检测

时间:2016-05-29 17:27:13

标签: javascript canvas collision-detection

我试图用碰撞检测做一个小游戏。

问题是,在某些情况下,对象只是通过。我对这个事业完全视而不见。

我试图创建自己的检测,注释掉,然后我尝试了这个:

Code sample as fiddle

function rectanglesIntersect( minAx, minAy, maxAx, maxAy, minBx, minBy, maxBx, maxBy ) {
    var aLeftOfB = maxAx < minBx;
    var aRightOfB = minAx > maxBx;
    var aAboveB = minAy > maxBy;
    var aBelowB = maxAy < minBy;

    return !( aLeftOfB || aRightOfB || aAboveB || aBelowB );
}

1 个答案:

答案 0 :(得分:3)

幸运的是,你的行动在移动时具有这些简化的品质:

  • 他们只在Y方向(向上或向下)移动。
  • 他们每次移动都是30px。

所以你可以确定是否&amp;矩形对将发生碰撞:

  1. 移动开始时,计算一对矩形是否可能通过测试它们是否垂直对齐来碰撞。

    rect1.x > rect2.x && rect1.x < rect2.x + rect2.width;
    
  2. 如果这对矩形朝向彼此,则计算该对是否在彼此的60个垂直像素内。 60很重要,因为每个矩形每次移动可以移动30个像素,因此矩形对每个移动可以相互接近30 + 30 = 60px。

    var willCollideThisMove = Math.abs(rect1.y-rect2.y)<=60;
    
  3. 如果该对将发生碰撞,那么该对将在距离差的中点发生碰撞:

    var collisionY = Math.min(rect1.y,rect2.y)+Math.abs(rect1.y-rect2.y)/2;
    
  4. 对所有矩形对进行这3次计算。