如何基于相对位置计算两矩形碰撞偏移量并修正偏移过大问题

你的函数偏移方向正确，但偏移量过大的核心原因是计算逻辑错误——你没有计算出让两个矩形刚好分离所需的最小差值，反而用了中心距离的平方除以允许的最小中心距离，导致结果偏大。

正确逻辑说明 #

要让静止矩形（steadyRect）移动到与移动矩形（movingRect）分离的最小距离，我们需要：

1. 计算两个矩形中心的距离向量（从moving指向steady）
2. 计算x/y方向上允许的最小中心距离：两个矩形半宽/半高之和，加上碰撞阈值COLLISION_THRESHOLD
3. 若当前中心距离小于允许的最小距离，说明需要移动，移动量为「允许的最小距离 - 当前中心距离」，方向与距离向量一致；若当前距离已满足要求，移动量为0

修正后的代码 #

function getCollisionOffset(movingRect: DOMRect, steadyRect: DOMRect) {        
    const movingCenter = {
        x: movingRect.left + movingRect.width / 2,
        y: movingRect.top + movingRect.height / 2
    };
    const steadyCenter = {
        x: steadyRect.left + steadyRect.width / 2,
        y: steadyRect.top + steadyRect.height / 2
    };
    // 从移动矩形指向静止矩形的向量
    const vector = {
        x: steadyCenter.x - movingCenter.x,
        y: steadyCenter.y - movingCenter.y 
    };

    // 当前x/y方向的中心距离绝对值
    const currentXDist = Math.abs(vector.x);
    const currentYDist = Math.abs(vector.y);
    // x/y方向允许的最小中心距离（避免碰撞的临界值）
    const minXDist = (movingRect.width / 2) + (steadyRect.width / 2) + COLLISION_THRESHOLD;
    const minYDist = (movingRect.height / 2) + (steadyRect.height / 2) + COLLISION_THRESHOLD;

    // 计算x方向偏移量：只有当前距离小于最小距离时才需要移动
    const offsetX = currentXDist < minXDist 
        ? (minXDist - currentXDist) * Math.sign(vector.x) 
        : 0;
    // 计算y方向偏移量
    const offsetY = currentYDist < minYDist 
        ? (minYDist - currentYDist) * Math.sign(vector.y) 
        : 0;
        
    return { x: offsetX, y: offsetY }; 
}

关键修正点 #

• 替换了原函数中错误的距离计算逻辑，直接用「允许的最小距离 - 当前中心距离」得到需要补偿的最小偏移量
• 增加判断逻辑：仅当当前距离小于安全阈值时才计算偏移，无碰撞场景直接返回0
• 保留了原有的方向计算逻辑，确保偏移方向与两矩形相对位置一致

内容的提问来源于stack exchange，提问作者Zhuk Nikita