Открывается по ссылке и на телефоне, и на ПК. Ни сторов, ни загрузки перед первым запуском: игрок попадает в раунд сразу.
Десять уровней с растущим числом соперников и их скоростью, с обучением и сохранением прогресса между сессиями.
WASD и стрелки на ПК, экранный джойстик и щипок для масштаба на тач-экранах — без отдельной мобильной версии.
Кроме своего хостинга нужна отдельная статическая сборка и упаковка архива под Яндекс.Игры.
Плитки под персонажем закрашиваются сами. Но пока они просто закрашены, в счёте их нет — и до сундука их можно потерять.
Он превращает закрашенные плитки в очки раунда, очищает их и появляется в другом месте. В HUD накопленные очки идут крупно, а незафиксированные плитки — мелким «+N»: видно, сколько игрок рискует потерять.
Бомба предупреждает две секунды, а при взрыве оглушает персонажа и снимает с него все плитки. Вращающаяся стрелка закрашивает линию в том направлении, которое было активно в момент срабатывания. Ботинки временно ускоряют бег.
На первых двух уровнях бот один, к десятому их четыре, и каждый уровень поднимает их скорость. Уровень идёт до трёх побед в раундах — первым дошёл игрок, уровень пройден.
Игровой цикл и React живут рядом, поэтому разделение обязанностей здесь — не вкусовщина, а условие плавного кадра.
Изометрия с миникартой, анимациями и опасностями легко упирается в заполнение экрана. Помогли два ограничения: пониженный pixel ratio на тач-устройствах и троттлинг обновлений интерфейса — счёт перерисовывается не каждый кадр игрового цикла.
Автотест не может ждать реального времени. В браузере доступны хуки: один печатает состояние поля текстом, второй продвигает игровое время шагами. Вместе с ручным тикером и seeded RNG сценарий воспроизводится один в один.
На тач-экране некуда поставить джойстик, не закрыв поле. Джойстик появляется там, где игрок начал перетаскивание, масштаб меняется щипком, а отдельные кнопки зума остались для тех, кому щипок неудобен.
Серверная точка входа обёрнута, а неожиданные исключения перехватывает middleware запроса. Игрок в худшем случае видит понятную страницу ошибки в фирменном оформлении.
Законченный игровой цикл, который открывается по ссылке.
Это не прототип на вечер: кампания, предметы, опасности, обучение и прогресс собраны в законченный цикл. Чистая логика вынесена из рендера, поэтому новая механика добавляется отдельным модулем, а не правкой игрового цикла. Тот же проект отдаётся и со своего хостинга, и архивом на стороннюю площадку.
Делаем браузерные игры на Pixi.js и React: геймплей, рендер, серверная часть и публикация на площадках.