Collision Detection и взаимодействие объектов (Неделя 3)

1. Неделя 3

2. Геометрия столкновений (AABB)

Самый популярный метод в 2D - Axis-Aligned Bounding
Box (AABB).
Мы представляем каждый объект как прямоугольник и
проверяем, не накладываются ли они друг на друга.
Если все четыре условия (лево, право, верх, низ)
пересекаются - столкновение произошло.
Прикладной смысл: Мы сравниваем x, y, width, height
игрока и монеты в каждом кадре игрового цикла.

3. Метод getBoundingClientRect()

В DOM-играх это «волшебная палочка». Метод
возвращает объект с координатами и размерами
элемента относительно окна браузера.
Это позволяет легко получить данные для коллизии,
даже если элементы вложены в разные контейнеры.

4. Круговая коллизия (Distance Check)

Если объекты круглые (как монеты), прямоугольники
неточны.
Используем теорему Пифагора: если расстояние
между центрами двух объектов меньше суммы их
радиусов - они столкнулись.

5. Работа со звуком через Web Audio API (new Audio)

Игра без звука - это половина игры.
Самый простой способ - создание объекта new
Audio('path.mp3’).
Важно вызвать метод .play() в момент коллизии.

6. Решение проблемы наложения звуков

Если монеты собираются быстро, звук может не успеть
проиграться.
Решение: перед каждым вызовом .play() сбрасывать
время воспроизведения: audio.currentTime = 0.
Это позволяет звуку «перезапускаться».

7. Деспаун и очистка памяти

Когда монета «съедена», ее нужно не просто скрыть
(display: none), а полностью удалить из DOM через
.remove() и из массива данных через .splice() или
.filter().

8. Система начисления очков (Score)

Переменная score должна быть связана с DOMэлементом.
Каждое столкновение делает score++ и обновляет
innerText.
Для красоты можно добавить эффект «всплывающих
цифр» (+1).

9. Рандомизация появления (Spawn area)

Монеты не должны появляться за краем экрана.
Формула: Math.random() * (window.innerWidth coinWidth).
Это гарантирует, что объект всегда будет виден
целиком.

10. Золотая и Серебряная монеты (Веса предметов)

Расширение механики.
Разные типы монет дают разное количество очков.
В объекте монеты добавляем свойство type и value.

11. Эффект «Поедания» (Tweening)

Вместо мгновенного исчезновения - анимация
уменьшения scale(0) или исчезновения opacity.
Это делает игру тактильно приятной.

12.

Перейдем к практике