Javascript 矩形碰撞检测

Javascript 矩形碰撞检测,javascript,canvas,collision-detection,Javascript,Canvas,Collision Detection,我试着用碰撞检测做一个小“游戏” 问题是,在某些情况下,对象只是通过。我对这项事业一无所知 我尝试创建自己的检测,该检测被注释掉,然后我尝试了以下方法: function rectanglesIntersect( minAx, minAy, maxAx, maxAy, minBx, minBy, maxBx, maxBy ) { var aLeftOfB = maxAx < minBx; var aRightOfB = minAx > maxBx; var

我试着用碰撞检测做一个小“游戏”

问题是,在某些情况下,对象只是通过。我对这项事业一无所知

我尝试创建自己的检测,该检测被注释掉,然后我尝试了以下方法:

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 );
}
函数矩形切分(minAx、minAy、maxAx、maxAy、minBx、minBy、maxBx、maxBy){
var-aleftoff=maxAxmaxBx;
var aAboveB=minAy>maxBy;
var aBelowB=最大值<最小值;
返回!(aLeftOfB | | aRightOfB | | aAboveB | | aBelowB);
}

幸运的是,您的矩形在移动时具有以下简化特性:

  • 它们仅沿Y方向(向上或向下)移动
  • 它们每移动30像素
因此,您可以确定一个矩形对是否会发生这样的碰撞:

  • 在移动开始时,通过测试两个矩形是否垂直对齐,计算它们是否可能发生碰撞

    rect1.x > rect2.x && rect1.x < rect2.x + rect2.width;
    

  • 对所有矩形对进行这3种计算。

    如果你想让它移动得更慢,只需更改FPS,你就可以轻松地在示例的按钮中添加更少的项目快速移动的项目可能在一次移动中完全通过障碍物,这被称为“隧道”。这里有一个先前的演示如何找到初始碰撞点。如果你看我的演示,它们有时会在彼此内部碰撞?在他们进入下一帧之前我会检查一下吗?所以它们永远不应该合并?你的
    .update
    允许矩形在一次移动中移动30像素。有两个矩形,这意味着它们可以相对彼此移动60像素。这意味着它可以很容易地在一次移动中侵入(或完全通过)另一个rect。你需要用数学来确定两个矩形之间的初始碰撞点。你能再给我一个指针我缺少的吗:)谢谢你的反馈:)这正是我需要开始的。
    var willCollideThisMove = Math.abs(rect1.y-rect2.y)<=60;
    
    var collisionY = Math.min(rect1.y,rect2.y)+Math.abs(rect1.y-rect2.y)/2;