Как работает это обнаружение столкновений (JavaScript)?

Question

Не могли бы вы объяснить, чтобы идиот мог понять, как это обнаружение столкновений работает в игре 2d Brick-Breaker?У меня проблемы с визуализацией, как это работает.Мяч ударяет по мячу, и мяч разбивает кирпичи. Обнаружение столкновений в этом коде предназначено для отскока мяча от стен.

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(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 фактически идет назади никогда не ударяется о стену.

Кстати, для реалистичного удара вы бы хотели узнать, сколько он должен был пройти в стену, чтобы получить правильную позицию после отскока.