这种碰撞检测是如何工作的（JavaScript）？

Question

你能解释一下，这样一个白痴能理解，这个碰撞检测如何适用于二维破砖游戏吗？我无法想象它是如何工作的。有一个球击中球，球打破砖块，此代码中的碰撞检测是球从墙上弹回。if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {     dx = -dx;}if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {     dy = -dy;}谢谢您的帮助。

Answer 1

两个if语句都是相同的，所以我只解释第一个。

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {

    dx = -dx;

}

是相同的

const centerOfBallAfterNextTick = x + dx;

const willHitLeftWall = centerOfBallAfterNextTick - ballRadius < 0;

const willHitRightWall = centerOfBallAfterNextTick + ballRadius > canvas.width;

if (willHitRightWall || willHitLeftWall) {

    dx = -dx; //start moving in the opposite direction

}

Answer 2

如果下一个位置（currentPosition（x|y）+ direction（dx|dy））比可用空间（所有空间减去球的半径）更远，或者小于球的半径，则反转方向。
在第一种情况下，我们在右侧或底部太多，在第二种情况下，我们在左侧或顶部太多。

所以接下来x += dx或y += dy实际上倒退，永远不会撞墙。

顺便说一句，对于逼真的击球，你想要了解它应该进入墙壁多少，以便在反弹后获得正确的位置。

Answer 3

因为您需要检查右侧是否过多。当我说“下一个x += dx”时，我说的是你没有在你的问题中显示的东西，但是你提取的那些之前或之后的几行（也许是写的x = x + dx;）