如何修复不良的 2D 碰撞

Question

我有一个关于我正在开发的 JavaScript canvas 游戏中的 2d 物理的问题。在我的游戏中，我使用以下代码来检测球和砖块（矩形）之间的碰撞。碰撞代码有效，但球在消失之前穿过了物体，从而使球穿过砖块区域并摧毁了大部分砖块。

总之，我怎样才能让球不穿过砖场？

这里是用于碰撞检测的代码：

if(this.enabled && 
   ball.x + ball.vx < this.x + BRICK_WIDTH &&
   ball.x + ball.vx + ball.radius > this.x &&
   ball.y + ball.vy < this.y + BRICK_HEIGHT &&
   ball.y + ball.vy + ball.radius > this.y) {
    ball.vy = -ball.vy;
    this.enabled = false;
}

Here is a video of the faulty collision detection

Also if you would like to, you can try it yourself

注意到球是如何轻微地穿过蓝砖的吗？

Answer 1

if(this.enabled && 
   ball.x + ball.vx - ball.radius < this.x + BRICK_WIDTH &&
   ball.x + ball.vx + ball.radius > this.x &&
   ball.y + ball.vy - ball.radius < this.y + BRICK_HEIGHT &&
   ball.y + ball.vy + ball.radius > this.y) {
    ball.vy = -ball.vy;
    this.enabled = false;
}

您没有将球的半径纳入您的两个距离计算中。我没有你的其余代码，所以你必须验证它是否有效。

Answer 2

从拐角开始，在检查过程中，您添加的半径是直径的一半。这意味着在与顶部碰撞时，球必须穿过砖块一半才能满足标准。

尝试

     ball.y + ball.vy + ball.radius*2 > this.y

也在另一个x检查中....

如何修复不良的 2D 碰撞

How to fix bad 2D collision

javascript

2d

canvas

collision-detection

game-physics