JavaScript粒子墙碰撞检测偶现粘墙单方向移动问题咨询

• 核心诱因是边界穿透后的反复速度反转：现有逻辑仅在检测到越界时反转速度，没有修正粒子越界后的位置。当页面卡顿帧率下降、粒子速度较高时，粒子单帧移动距离过大，会直接跨过边界进入墙体区域。此时仅反转速度的话，如果粒子下一帧反向移动的距离不足以让它回到画布内部，就会再次触发越界判定、再次反转速度，x或y方向的速度会在反复反转中无法驱动粒子离开墙面，最终表现为贴墙仅沿另一方向移动。这种触发依赖帧间隔波动、粒子位置的概率性组合，因此是偶发，和观测到的复现概率吻合。
• 代码存在笔误：y方向上边界的判定条件中，this.radius被错写为this.rafius，该值为undefined时会导致上边界碰撞判定完全失效，属于显性代码错误。

碰撞触发时，除反转对应方向的速度外，必须将粒子的越界坐标强制重置到边界内的合法位置，避免粒子停留在越界区间反复触发判定，同时修正拼写错误。
修正后的方法代码如下：

wallCollisionDetection(){
    // 垂直墙体（左右边界）碰撞处理
    if (this.position.x >= canvasWidth - this.radius) {
        this.position.x = canvasWidth - this.radius
        this.speed.x = -this.speed.x
    } else if (this.position.x <= this.radius) {
        this.position.x = this.radius
        this.speed.x = -this.speed.x
    }

    // 水平墙体（上下边界）碰撞处理，修正rafius拼写错误为radius
    if (this.position.y >= canvasHeight - this.radius) {
        this.position.y = canvasHeight - this.radius
        this.speed.y = -this.speed.y
    } else if (this.position.y <= this.radius) {
        this.position.y = this.radius
        this.speed.y = -this.speed.y
    }
}

补充说明：如果需要更真实的碰撞弹性效果，还可以在反转速度时乘以0~1之间的阻尼系数模拟能量损耗，但这不属于解决卡墙问题的必要逻辑。

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