HTML5 Canvas两球碰撞偶尔粘连而非反弹的问题排查

我在HTML5 Canvas实现的小球碰撞效果里，大部分时候小球能正常反弹，但偶尔会出现互相粘连的情况。怀疑是物理或数学逻辑出错了，以下是相关代码：

原测量距离函数 #

const measureDistance = (x1, y1, x2, y2) => {
    let result
    result = Math.pow(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2), 0.5)
    return result
}

原碰撞处理相关函数 #

function rotate(velocity, angle) {
    const rotatedVelocities = {
        x: velocity.dx * Math.cos(angle) - velocity.dy * Math.sin(angle),
        y: velocity.dx * Math.sin(angle) + velocity.dy * Math.cos(angle)
    };

    return rotatedVelocities;
}
const manageCollition = (tempArr, i, j) => {
    const angle = Math.tan(tempArr[j].dy - tempArr[i].dy / tempArr[j].dx - tempArr[i].dx)
    console.log(tempArr[j].dy - tempArr[i].dy / tempArr[j].dx - tempArr[i].dx)
    const u1 = rotate(tempArr[i], angle)
    const u2 = rotate(tempArr[j], angle)
    return { u1, u2 }

}
const checkCollisions = (ball, tempArr, i) => {
    let returnArr = tempArr;
    for (let j = 0; j < tempArr.length; j++) {
        if (j === i) continue
        const distance = measureDistance(ball.x, ball.y, tempArr[j].x, tempArr[j].y) - 2 * radius
        if (distance <= 0) {
                const { u1, u2 } = manageCollition(tempArr, i, j)
                returnArr = tempArr.map((element, index) => {
                    let newBall = element
                    if (index === i) {
                        newBall.dx = u1.x
                        newBall.dy = u1.y
                    }
                    if (index === j) {
                        newBall.dx = u2.x
                        newBall.dy = u2.y
                    }
                    return newBall
                })
            }

        }
    return returnArr
}

问题根源分析 #

1. 角度计算完全错误：manageCollition中误用Math.tan计算角度，且运算符优先级混乱，正确的两球连线角度应该用Math.atan2(dy, dx)计算。
2. 未处理小球重叠：检测到碰撞时只修改速度，未将重叠的小球分离，导致下一帧仍会触发碰撞判断，反复修改速度后出现粘连。
3. 碰撞物理逻辑缺失：仅做了速度旋转，未实现弹性碰撞的核心规则——法线方向交换速度，切线方向速度保持不变。

修正后的核心代码 #

优化距离测量函数

const measureDistance = (x1, y1, x2, y2) => {
    return Math.hypot(x1 - x2, y1 - y2); // 更简洁高效的距离计算方式
}

修正碰撞处理逻辑

// 旋转速度向量到目标角度坐标系
function rotate(velocity, angle) {
    return {
        x: velocity.dx * Math.cos(angle) - velocity.dy * Math.sin(angle),
        y: velocity.dx * Math.sin(angle) + velocity.dy * Math.cos(angle)
    };
}

// 处理弹性碰撞（假设所有小球质量相同）
const manageCollision = (ball1, ball2) => {
    // 计算两球连线的法线角度
    const dx = ball2.x - ball1.x;
    const dy = ball2.y - ball1.y;
    const angle = Math.atan2(dy, dx);

    // 将速度旋转到法线-切线坐标系
    const v1 = rotate(ball1, angle);
    const v2 = rotate(ball2, angle);

    // 弹性碰撞规则：法线方向交换速度，切线方向速度不变
    const updatedV1 = { x: v2.x, y: v1.y };
    const updatedV2 = { x: v1.x, y: v2.y };

    // 将速度旋转回原坐标系
    const finalV1 = rotate(updatedV1, -angle);
    const finalV2 = rotate(updatedV2, -angle);

    return { v1: finalV1, v2: finalV2 };
}

const checkCollisions = (ball, tempArr, i, radius) => {
    let returnArr = [...tempArr]; // 复制数组避免直接修改原数据
    const minDistance = 2 * radius;

    for (let j = 0; j < returnArr.length; j++) {
        if (j === i) continue;
        const otherBall = returnArr[j];
        const distance = measureDistance(ball.x, ball.y, otherBall.x, otherBall.y);

        if (distance <= minDistance) {
            // 1. 分离重叠的小球，消除碰撞残留
            const overlap = minDistance - distance;
            const separationX = ((ball.x - otherBall.x) / distance) * overlap * 0.5;
            const separationY = ((ball.y - otherBall.y) / distance) * overlap * 0.5;

            returnArr[i].x += separationX;
            returnArr[i].y += separationY;
            returnArr[j].x -= separationX;
            returnArr[j].y -= separationY;

            // 2. 应用碰撞速度规则
            const { v1, v2 } = manageCollision(returnArr[i], returnArr[j]);
            returnArr[i].dx = v1.x;
            returnArr[i].dy = v1.y;
            returnArr[j].dx = v2.x;
            returnArr[j].dy = v2.y;
        }
    }
    return returnArr;
}

关键修正点 #

• 用Math.atan2(dy, dx)正确计算两球连线角度，替代错误的Math.tan用法
• 碰撞时添加小球分离逻辑，消除重叠，避免重复触发碰撞判断
• 实现完整的弹性碰撞物理规则，确保速度变化符合真实物理效果
• 复制数组副本进行修改，避免原数组的副作用

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