🛸 НЛО: Защита города

Двухмерная игра на чистом JavaScript (canvas) в трёхмерном пространстве.
Игрок управляет НЛО, сбивает падающие метеориты и обезвреживает мины в процедурно‑генерируемом городе.

Концепции

1. Пространство и камера

• Мир трёхмерный, всё отображается на плоском холсте (600×600 px).
• НЛО – камера игрока: имеет координаты (x, y, z) и углы поворота pitch (наклон вверх‑вниз) и yaw (поворот влево‑вправо).
• Поддерживаются два режима проекции 3D → 2D:
  • Угловая (angular) – горизонтальный и вертикальный углы от направления камеры прямо переводятся в пиксельные смещения (как в FOV).
  • Плоскостная (planar) – классическая перспективная проекция с фокусным расстоянием.

2. Город

• Генерируется матрица высот (cityMatrix) заданного размера (по умолчанию 16×16). Каждая ячейка содержит либо 0 (пусто), либо высоту здания (1…5).
• Алгоритм удаляет соседние здания (по 8‑соседству), чтобы все постройки были изолированы.
• Центральная область (4 клетки) всегда свободна – это стартовая площадка.
• По матрице строятся параллелепипеды: земля (платформа) и здания (1×1×height).

3. Снаряды и метеориты

• Стрельба (ЛКМ) – снаряд летит из НЛО в направлении взгляда. Скорость и перезарядка настраиваются.
• Метеоры появляются по нажатию R высоко над городом и падают на случайную точку платформы. Если долетают до z ≤ 0.5 – проигрыш.

4. Мины

• Появляются на платформе (z = 0) в свободных клетках, где нет зданий.
• У мин есть таймер в кадрах (60 кадров = 1 секунда). Когда таймер истекает – Game Over.
• Обезвредить мину можно, попав в неё снарядом (расстояние меньше суммы радиусов).
• После уничтожения мины с некоторой вероятностью появляются 1–2 новые (до лимита, задаваемого пользователем).

5. Столкновения и игра

• Столкновение НЛО с метеором или зданием – поражение.
• При Game Over экран заливается красным, клик мыши перезапускает игру.

6. Очки и комбо

• За сбитый метеорит даётся 100 очков, умноженные на комбо‑бонус.
• Комбо‑множители накапливаются при серии успешных уничтожений и постепенно убывают (каждый кадр каждый множитель уменьшается на 1, при 0 исчезает).
• За обезвреживание мины начисляется дополнительно 50 очков.
• За каждый выстрел снимается 10 очков (штраф), со временем (каждый кадр) начисляется небольшой отрицательный счёт для предотвращения афк‑фарма.

---

📁 Структура проекта и порядок изучения

Рекомендуется читать файлы в следующем порядке – от фундаментальных утилит к игровой логике и UI.

1. var.js – глобальные переменные

Объявляет основные контейнеры данных:

• parallelepipeds – массив зданий и платформы.
• mines – массив объектов мин.
• cityMatrix – матрица высот.
• nlo – объект камеры/игрока.
• canvas, ctx, infoDiv – ссылки на DOM. Используется для быстрого доступа из всех модулей.

2. vector.js – векторная алгебра

Математика, на которой построены все 3D‑преобразования:

• сложение, вычитание, масштабирование векторов;
• скалярное и векторное произведение;
• повороты вокруг осей X и Z (для преобразований координат);
• ограничение угла pitch и нормализация yaw.

3. geometry.js – геометрические утилиты

• posRelation – положение точки относительно отрезка.
• checkCollision – проверка попадания точки внутрь параллелепипеда.
• getFaceVertices – получение вершин одной грани (нужно для отрисовки).
• distance3D – евклидово расстояние.
• getAngularCoords – преобразование мировой точки в угловые координаты относительно камеры (азимут, элевация, глубина). Используется в угловой проекции и для расчёта радиуса сферы на экране.

4. projection.js – проецирование 3D → 2D

Два режима:

• угловая проекция (projectAngular) – углы умножаются на angularScale;
• плоскостная проекция (projectPlanar) – перспективное деление с фокусным расстоянием. Общие методы:
• projectToCanvas – добавляет смещение центра холста.
• spherePixelRadius – вычисляет радиус сферы в пикселях для отрисовки.

5. city.js – генерация города и мин

Ключевые алгоритмы:

• generateCityMatrix – создаёт случайную матрицу высот и вызывает очистку соседей.
• clearAdjacentBuildings – итеративно разрешает соседние постройки, пока все не станут одиночными. Также освобождает центральные клетки.
• generateCityBuildingsFromMatrix – преобразует матрицу в массив параллелепипедов (платформа + здания).
• getFreeCells – находит пустые ячейки без зданий и мин.
• spawnMine – создаёт мину в случайной свободной клетке с заданным таймером (из window.mineTimerFrames).

6. score.js – система очков и состояния

Ведёт счёт, комбо‑множители, флаг gameOver и предоставляет методы:

• штраф за выстрел (addShotPenalty),
• штраф за время (addTimePenalty),
• бонус за сбитый метеорит с комбо (addMeteorHit),
• бонус за обезвреженную мину (addMineDefused),
• updateCombo – уменьшает значения множителей, удаляет истёкшие.
• setGameOver – фиксирует конец игры.

7. projectiles.js – управление снарядами и метеорами

• Массивы meteors и projectiles.
• spawnMeteor / spawnProjectile – создание новых объектов с начальной скоростью.
• updatePositions – перемещение, проверка коллизий метеор‑снаряд, метеор‑земля, снаряд‑здание/мина.
• Логика появления новых мин после обезвреживания.
• renderSpheres – отрисовка всех сфер (снаряды – фиолетовые, метеоры – красные).

8. renderer.js – рендеринг города и UI

• renderParallelepipeds – для каждого здания рисуются видимые грани (с учётом положения камеры). Используется posRelation для определения, с какой стороны от камеры находится грань.
• renderMines – маленькие чёрные кружки с красной обводкой.
• updateInfo – обновляет текстовую панель с координатами, углами, очками, комбо, временем до взрыва ближайшей мины.

9. controls.js – ввод

Обработчики клавиш (WASD, пробел, Shift, Q/E для поворотов, колёсико для наклона камеры, R для спавна метеора), отслеживание зажатой кнопки мыши для стрельбы с перезарядкой.
Важно: при Game Over клик по холсту вызывает resetGame().

10. main.js – главный цикл и инициализация

• Функции regenerateCity и resetGame (перезапуск без регенерации города).
• Проверка столкновений НЛО с метеорами и зданиями.
• Основной loop (60 fps):
  • обработка ввода → обновление таймеров мин → рендеринг → обновление позиций снарядов/метеоров → счёт и комбо → проверка Game Over → обновление инфо‑панели.

11. menu.js – настройки

Связывает ползунки и кнопки левой панели с глобальными параметрами:

• скорость перезарядки → window.reloadTimeFrames,
• скорость снаряда,
• максимальный угол тангажа (Vector.clampPitch),
• время жизни мины,
• лимит мин,
• кнопки «Перегенерировать город», «Сброс позиции НЛО», «Перезапустить игру»,
• переключение режима проекции (Projection.mode).

12. index.html и styles.css

Разметка: три колонки (настройки – игра – инструкция).
CSS: стилизация панели, кнопок, запрет выделения текста.

---

🚀 Запуск

1. Скопируйте все файлы в одну папку.
2. Откройте index.html в современном браузере (Chrome, Firefox, Edge).
3. Игра запустится сразу. Используйте панель слева для изменения параметров.

Управление:

• W/S/A/D (или русские Ц/Ы/Ф/В) – движение в плоскости.
• Shift / Пробел – вниз / вверх.
• Колёсико мыши – наклон камеры (pitch).
• ЛКМ – выстрел (с перезарядкой).
• R (английская или русская) – спавн метеорита.
• При Game Over – клик по экрану для перезапуска.