Егор Урванов

Архитектура игры «Северный Разлом»: C4 и критические пути

Схемы C4 до уровня компонентов и четыре критических пути через sequence: запуск, кадр, ввод и конец заезда.

Игра «Северный Разлом» — 3D-аркада про полёт по бесконечному ледяному каньону: один файл index.html около 70 КБ, без сборки и без своих ассетов. Здесь описано, как она устроена: схемы C4 до уровня компонентов и четыре пути, на которых всё держится.

C4: контекст и контейнеры

Уровень 1. Система и её окружение

Игрокклавиатура, касания«Северный Разлом»игра в браузереCDN cdnjsthree.js r128Google FontsTektur, Onestиграетгрузит движокшрифты
Своего сервера у игры нет: подойдёт любой статический хостинг. Без three.js игра показывает просьбу обновить страницу.

Уровень 2. Контейнеры

Страницаindex.htmlменю, HUD, экраныСкрипт игрыодин блок, ~950 строкthree.jsсцена, шейдеры, WebGLWeb Audioмузыка и эффектыlocalStorageрекорд, звуккнопки, клавиширендерсинтезчитает, пишет
Звука-файлов и картинок нет: музыка синтезируется на лету, мир рисуется шейдерами.

C4 уровня 3: компоненты контекстов

Скрипт делится на два контекста. Правила игры хранят состояние и решают, что произошло; сцена и звук только показывают результат. Общий язык один: объект состояния G и корабль ship.

Правила игры

Вводклавиши, указательРежимplay · pause · overГенераторPATTERNS, diff()Объекты, столкновенияobjs[]Счёт и состояниеGРекордrift-bestстарт, паузаруль, прорывновые объектысобытияпри конце
Всё решается в одной функции `update(dt)`: она же двигает корабль, зовёт генератор и проверяет столкновения.
  • Восемь шаблонов препятствий (кристаллы, лазеры, кольца, слалом, маятник и другие) выбираются случайно с весами.
  • Сложность растёт плавно: diff() от 0 до 1 на дистанции 14 000 м, новые шаблоны открываются по порогам.
  • Три щита; после удара 1,7 с неуязвимости. Прорыв ломает лёд и стоит энергии.
  • Счёт = бонусы × множитель + половина дистанции. Множитель ×1…×8 растёт за кольца и сбрасывается ударом.

Сцена и звук

РендерерWebGLRendererКаньоншейдер рельефаНебо и сияниешейдер, палитрыКорабль и шлейфыship, makeTrailЧастицы, снегburst, emitКамеранаклон, FOV, тряскаSoundмузыка, эффектывид
Мир бесконечный за счёт приёма: корабль летит вперёд, а плоскость каньона каждый кадр подтягивается следом.
  • Снег, полосы скорости и препятствия пересаживаются вперёд, когда уходят за камеру: объекты не копятся.
  • Все частицы лежат в одном буфере на 1400 точек; звук — генератор на Web Audio, который шагает по тактам заранее.
  • Цвет сияния плавно меняется каждые 2500 м (новый сектор).

Четыре критических пути

1. Запуск

ИгрокСтраницаCDNСкриптМенюоткрываетthree.js, fontsбиблиотекизапуск скриптарекорд из localStorageboot: resetGameменю и мир под нимСтарт / EnterstartGame: play
Меню уже живое: корабль летит по каньону под ним. «Старт» только сбрасывает счёт и включает режим игры.

2. Один кадр

rAFupdateГенераторОбъектыСценаHUDdt ≤ 0.05скорость, руль, позициявпереди пусто?новый шаблонстолкновенияосколок, кольцо, ударкамера, небо, частицысчёт, щиты, энергияrender
Время кадра ограничено 0,05 с, чтобы после паузы объекты не «телепортировались»; на паузе dt равен нулю.

3. Ввод в действие

КлавишиКасаниеВводupdateКорабльWASD, Spaceсдвиг пальца, кнопкаkeys{} / pointer / boostHeldчитает каждый кадрскорость x, y; прорывпозиция в пределах каньона
Ввод только записывает состояние; действие рождается в кадре. Касание тянет корабль к точке, клавиши задают скорость.

4. Удар и конец заезда

ОбъектыupdateСостояниеЗвук, частицыlocalStorageЭкран итогалазер / кристаллhurt: shields−1вспышка, тряскамножитель ×1, неуязвим 1,7 сshields = 0 → crashрекорд, дистанциячерез 1,3 сЕщё раз / Меню
Единственное место, где игра что-то сохраняет, — конец заезда. Прорыв превращает тот же кристалл из угрозы в очки.

Правила, на которых всё держится

  • Один цикл, одно состояние. Режим (state) и счёт (G) меняет только код скрипта; экраны лишь показывают.
  • Мир идёт за кораблём. Корабль движется по оси z, а каньон, небо и снег подстраиваются под камеру.
  • Объекты не копятся. Что ушло за корабль на 30 м, убирается; впереди держится запас в 430 м.
  • Кадр защищён. Время кадра ограничено, пауза обнуляет его, потеря фокуса ставит игру на паузу.
  • Сохранения безопасны. Любая ошибка localStorage гасится, игра работает и без него.

Слабые места

Где Что не так
Монолит Звук, мир, правила и интерфейс лежат в одном блоке; границы только в комментариях.
Одна функция кадра update растёт: ввод, спавн, столкновения и камера в одном месте.
Внешние зависимости three.js и шрифты с CDN: без сети игра не стартует.
Нет тестов Правила счёта и сложности проверяются только игрой.
Случайность Каньон строится от Math.random без зерна: заезд не воспроизвести.

Об игре

Страница игрыСеверный РазломПолёт по бесконечному ледяному каньону под северным сиянием — 3D-аркада в одном файле
© 2026 Егор Урванов