Бесплатная онлайн игра «Растущий город»: как я за день полностью переделал мобильную версию

Когда я делал бесплатную онлайн игру «Растущий город» (https://rastushiy-gorod.ru), она существовала только в десктопной версии. MVP собирался за три дня, и в тот момент было важнее проверить саму игровую механику, чем заниматься адаптацией под смартфоны. Но когда дело дошло до продвижения, стало очевидно: отсутствие нормальной мобильной версии игры — самое слабое место проекта. Большая часть пользователей приходит с телефона, а играть им было попросту неудобно. Поэтому я решил не ограничиваться косметическими исправлениями и полностью переделать интерфейс.

Первый вариант казался очевидным: взять существующий интерфейс и адаптировать его с помощью media queries. Очень быстро стало понятно, что получится не игра для телефона, а уменьшенная копия десктопного сайта. Всё вроде бы помещается на экран, но пользоваться этим неудобно: элементы слишком мелкие, информации слишком много, важные действия постоянно требуют масштабирования или лишних касаний.

Вместо этого я перестроил саму структуру экрана. Теперь интерфейс состоит из независимых блоков: шапка, прогресс игры, рынок карт, список игроков, панель действий и нижняя шторка. Каждый блок умеет самостоятельно подстраиваться под доступное пространство, а не зависит от размеров всего экрана.

Заодно отказался от бесконечного набора брейкпоинтов под разные модели телефонов. Вместо десятков условий вроде «если ширина 390 пикселей — сделать так» теперь есть несколько логических состояний интерфейса и адаптивная типографика, которая плавно масштабируется между ними.

На словах всё выглядит довольно просто. На практике потребовалось несколько итераций, прежде чем система действительно начала работать стабильно.

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

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

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

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

В какой-то момент я перестал доверять сообщениям вроде «готово» и начал смотреть только на конкретные значения: высоту контейнера, высоту содержимого и разницу между ними. Когда вместо описаний появились реальные цифры, причина обнаружилась практически сразу. Иногда лучший способ найти ошибку — перестать обсуждать её словами и посмотреть на данные.

Теперь в «Растущий город» можно комфортно играть с телефона. Появилась отдельная мобильная раскладка, нижняя шторка работает привычными жестами, прогресс строительства города всегда находится перед глазами, а не спрятан за дополнительными нажатиями.

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

Заодно в тот же день удалось разобраться с блокировкой сайта у части пользователей на уровне провайдера. История получилась неожиданно интересная — о ней расскажу в следующей статье.

Если у вас есть пара минут, буду рад, если попробуете бесплатную онлайн игру «Растущий город» (https://rastushiy-gorod.ru) на телефоне и напишете, что работает хорошо, а что ещё стоит улучшить. Каждое сообщение с обратной связью я действительно читаю — именно благодаря таким комментариям игра становится лучше.