在 html5 画布中，两个球的碰撞有时会卡住而不是互相弹开

Question

球确实会弹跳，但有时它们会互相粘住。

请告诉您是否需要其余代码来解决此查询。

此功能用于测量两个球之间的距离。

    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
    }

我想我在物理或数学的某个地方犯了错误。

Answer 1

const checkCollisions = (tempArr, i) => {
    let returnArr = tempArr;
    for (let j = 0; j < tempArr.length; j++) {
        if (j === i) continue
        const distance = measureDistance(tempArr[i].x, tempArr[i].y, tempArr[j].x, tempArr[j].y) - 2 * radius
        const xVelocityDiff = tempArr[i].dx - tempArr[j].dx
        const yVelocityDiff = tempArr[i].dy - tempArr[j].dy
        const xDistance = tempArr[j].x - tempArr[i].x
        const yDistance = tempArr[j].y - tempArr[i].y
        if (distance <= 0) {
            if (xVelocityDiff * xDistance + yVelocityDiff * yDistance >= 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
}

尝试使用此代码来检查碰撞功能。