Mace Duel Mobile: браузерна PvP-гра з серверною симуляцією та сенсорним керуванням

Що пропонує Mace Duel Mobile

Mace Duel Mobile — це концепція компактного 3D PvP-дуельника, який запускається у браузері на смартфоні або комп’ютері. Двоє гравців підключаються до приватної кімнати, готуються до раунду й б’ються на арені: пересуваються, стрибають, завдають ударів булавою та використовують вітрові заряди, щоб відкинути суперника або підняти його в повітря.

Технічна основа проєкту така:

• клієнт: TypeScript, Vite, Three.js;
• сервер: Node.js, TypeScript, ws;
• мережева модель: двосторонній WebSocket-зв’язок;
• ігрова симуляція: серверна, з частотою 30 Hz;
• формат матчів: приватні кімнати для двох учасників.

Чому сервер має бути авторитетним

Ключова ідея архітектури — не довіряти клієнту критично важливі дані. Браузер гравця надсилає лише введення: напрямок руху, напрямок погляду, стрибок, біг і запити на атаку чи запуск вітрового заряду.

Натомість сервер сам визначає:

• фактичне переміщення персонажа;
• зіткнення й дальність атаки;
• шкоду від звичайного удару та удару після падіння;
• відкидання, підйом у повітря й вибухи зарядів;
• здоров’я, очки раунду та переможця матчу.

Такий підхід не робить гру повністю захищеною від зловживань, проте не дозволяє клієнту просто надіслати «я вже переміг» або довільно змінити власне здоров’я й позицію.

Керування, розраховане на смартфон

Для телефона запропоновано горизонтальний режим і набір елементів, звичний для мобільних екшенів:

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

Важливо підтримувати кілька одночасних дотиків: наприклад, гравець має мати змогу рухатися, водночас обертати камеру та натискати кнопку атаки. Документація MDN описує сенсорне керування через події дотику й вказує, що окремий вказівник відповідає одному пальцю на екрані; це придатно для паралельних дій у грі. 1

Клавіатура й миша також залишаються корисними для тестування на ПК та гри без телефона.

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

У проєкті закладено кілька взаємопов’язаних механік.

Удар булавою

Звичайний удар перевіряється сервером за дистанцією та кутом до цілі. Це важливо: анімація на екрані сама по собі не повинна бути доказом влучання.

Удар після падіння

Якщо персонаж атакує, падаючи з достатньої висоти, удар перетворюється на посилений. Шкода зростає з дистанцією падіння, але має верхню межу. Така механіка заохочує використовувати вертикальність арени, а не лише обмінюватися ударами на землі.

Вітрові заряди

Гравець має обмежену кількість зарядів, які поступово відновлюються. Заряд летить у напрямку погляду, а вибух підкидає персонажів поруч і відштовхує їх по горизонталі. Це створює комбінації: підняти суперника, зайняти позицію вище та спробувати провести посилений удар у падінні.

Раунди та матч

Матч починається, коли обидва учасники підтвердили готовність. Після короткого відліку запускається раунд із часовим лімітом.

Перемога в раунді можлива, якщо:

• здоров’я суперника знижується до нуля;
• спливає час, а один гравець має більше здоров’я.

За нічиєї очко нікому не нараховується. Матч триває до кількості перемог, визначеної правилами; у наведеній конфігурації це три виграні раунди. Після завершення обидва гравці можуть погодитися на реванш.

Мережеві деталі, які варто не пропускати

Для публічного розгортання потрібне захищене з’єднання: сайт має працювати через HTTPS, а сокет — через WSS. [web:24]

Якщо WebSocket проксіюється через Nginx, необхідно коректно передати заголовки оновлення з’єднання Upgrade і Connection, а також подбати про тайм-аути або регулярний heartbeat. [web:16]

Для підтримання з’єднання сервер може надсилати ping-повідомлення; бібліотека ws автоматично відповідає на WebSocket Ping кадром Pong. [web:23] [web:57]

Окремо потрібні базові обмеження:

• перевірка формату та розміру вхідних повідомлень;
• ліміт частоти повідомлень;
• відхилення некоректних номерів послідовності;
• очищення порожніх кімнат;
• контроль максимальної кількості гравців у кімнаті.

Як не перевантажити мобільний браузер

У 3D-сцені продуктивність часто впирається не тільки в кількість полігонів, а й у кількість викликів малювання. Для багатьох однакових об’єктів арени доцільно використати InstancedMesh — спеціальний тип Three.js для інстансного рендерингу. 2

Тіні теж можуть бути дорогими для слабших пристроїв. У Three.js shadowMap.enabled за замовчуванням вимкнено; за потреби тіні можна увімкнути, підібрати їхній тип або не оновлювати динамічно, якщо сцена цього не потребує. 4

Практичне правило для мобільної версії: дайте користувачеві перемикач якості графіки. У «економному» режимі можна зменшити роздільність рендеру, вимкнути тіні та скоротити кількість декоративних ефектів.

Підсумок

Mace Duel Mobile будується навколо зрозумілого принципу: швидкий і доступний браузерний PvP-матч, у якому сенсорне керування не є другорядним, а результат бою визначає сервер. Поєднання авторитетної симуляції, коротких раундів, вертикальної бойової механіки та приватних кімнат добре підходить для невеликого двогравцевого екшену.

Водночас для готового публічного запуску одного прототипу недостатньо: знадобляться навантажувальні тести, захист від зловживань, моніторинг, стабільне WSS-розгортання та перевірка на реальних мобільних пристроях.