Mace Duel Mobile: браузерная PvP-дуэль с мобильным управлением

Что представляет собой проект

Mace Duel Mobile — это заготовка браузерной PvP-дуэли для мобильных устройств и ПК. Два игрока подключаются к одной приватной комнате, сражаются на арене булавами, используют ветровые заряды для подброса и отталкивания соперника, проходят раунды и могут запросить реванш после завершения матча.

Техническая основа проекта:

• клиент: TypeScript, Vite и Three.js;
• сервер: Node.js, TypeScript и ws;
• игровая симуляция: серверная, с частотой 30 обновлений в секунду;
• сетевая модель: клиент передаёт ввод и команды, а не доверенные координаты, здоровье или урон.

Такой подход важен для соревновательной игры: итог попадания, объём урона и победитель определяются сервером, а не браузером игрока.

Управление на телефоне и компьютере

Мобильная схема ориентирована на игру в горизонтальной ориентации:

• левый виртуальный стик — перемещение;
• перетаскивание по правой части экрана — поворот камеры;
• отдельные кнопки — прыжок, бег, удар булавой и ветровой заряд.

Одновременная работа нескольких касаний позволяет, например, двигаться, менять направление взгляда и нажимать кнопку атаки без переключения между действиями. Для этого подходят Pointer Events и мультитач-подходы, описанные в документации по мобильному управлению. 1

На компьютере сохраняются привычные клавиатурное управление и мышь.

Боевая система: удар, падение и ветер

В основе поединка лежат три механики.

Удар булавой

Обычная атака проверяется на сервере: соперник должен быть в радиусе удара и в секторе перед персонажем. У удара есть задержка между применениями, а успешное попадание отнимает здоровье и добавляет отбрасывание.

Удар после падения

Если игрок атакует в момент снижения после достаточного падения, обычный удар превращается в усиленный. Урон растёт вместе с пройденной высотой, но ограничен максимальным значением. Это делает прыжки и вертикальное позиционирование частью тактики, а не только способом перемещения.

Ветровые заряды

У каждого игрока есть ограниченный запас зарядов, который восстанавливается со временем. Заряд выпускается по направлению взгляда, а при столкновении или завершении полёта создаёт область воздействия: она отталкивает и подбрасывает персонажей поблизости. Заряд можно применять для атаки, ухода от соперника или подготовки мощного удара сверху.

Почему сервер рассчитывает бой

В проекте клиент не сообщает серверу «я нанёс 50 урона» или «я уже нахожусь в этой точке». Вместо этого он отправляет только:

• направление движения;
• угол поворота камеры;
• состояние прыжка и бега;
• команду удара;
• команду запуска ветрового заряда.

Сервер валидирует сообщения, обрабатывает их последовательность, моделирует физику и рассылает игрокам снимки состояния. В эти снимки входят позиции, скорости, здоровье, заряды, счёт, состояние раунда и видимые снаряды.

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

Структура проекта

Проект разделён на три логические части:

• client/ или src/ — трёхмерная сцена, интерфейс, звук, ввод с мыши и сенсорного экрана, локальное сглаживание движения;
• server/ — комнаты, игровой цикл, игроки, снаряды, здоровье, раунды, heartbeat и проверка сообщений;
• shared/ — общие типы сетевого протокола, игровые константы и формулы расчёта урона.

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

Рендеринг и производительность

Three.js подходит для компактной трёхмерной арены в браузере. Когда на сцене много одинаковых объектов — например, плиток пола, камней или декоративных элементов, — имеет смысл использовать InstancedMesh: это специальный вариант меша с поддержкой инстансного рендеринга. 2

Тени также стоит делать настраиваемыми. В WebGLRenderer поддержка shadow maps по умолчанию выключена, а динамические обновления теней можно отключать, если они не нужны постоянно. 4 Это особенно полезно для мобильных устройств, где качество изображения нужно балансировать с плавностью игры.

Что уже заложено в игровой цикл

В описанной реализации предусмотрены:

• приватные комнаты для двух игроков;
• подготовка перед матчем и обратный отсчёт;
• раунды с таймером;
• здоровье, очки и матч до трёх побед;
• защита в первые секунды после появления;
• обычные и усиленные атаки;
• ветровые снаряды с областью отталкивания;
• повторный матч по согласию обоих игроков;
• базовая защита от некорректных и чрезмерно крупных сетевых сообщений;
• ограничение частоты и последовательности входящих команд.

Следующий практический шаг для такого прототипа — собрать интерфейс комнаты, добавить визуальные эффекты ударов и взрывов, звуковую обратную связь, экран результатов и полноценное тестирование игры на реальных смартфонах с разной задержкой сети.