Как реализовать обнаружение столкновений в игре Pac-Man с помощью HTML, CSS и JavaScript? ⇐ CSS

[Anonymous]

Я создаю простую игру Pac-Man, используя HTML, CSS и JavaScript. В игре Pac-Man перемещается по лабиринту, собирает очки (точки) и избегает призраков. Pac-Man перемещается с помощью клавиш со стрелками, и игра обновляет счет при сборе точек.
У меня возникли проблемы с реализацией обнаружения столкновений для:
1)Обнаружение, когда Pac-Man касается призрака (игра окончена).
2)Обнаружение, когда Pac-Man собирает точку (обновляется счет и точка исчезает).
1 .Для обнаружения столкновений точек:
Я попытался проверить если позиция Pac-Man совпадает с позицией точки с помощью getBoundingClientRect():

Код: Выделить всё

const pacmanRect = pacman.getBoundingClientRect();
const dotRect = document.getElementById('dot1').getBoundingClientRect();

if (
pacmanRect.left < dotRect.right &&
pacmanRect.right > dotRect.left &&
pacmanRect.top < dotRect.bottom &&
pacmanRect.bottom > dotRect.top
) {
console.log('Dot collected!');
}

Однако это работает только иногда и не всегда работает, когда Pac-Man быстро движется.
2.Для обнаружения призрачных столкновений:
Я пробовал аналогичный подход, но игра не надежно обнаруживает столкновения.
3.Дополнительные попытки:
Использование setInterval() для проверки для столкновений через регулярные промежутки времени.
Уменьшение размер ограничивающих рамок для большей точности.
Ожидаемое поведение:
1. Когда Pac-Man сталкивается с точкой, точка должна исчезнуть, а счет должен обновиться.2.Когда Pac-Man сталкивается с призраком, игра должна отображать сообщение «Игра окончена».

Подробнее здесь: https://stackoverflow.com/questions/792 ... -css-and-j