Как построить свой город на чистом JavaScript без лишней головной боли

Иногда хочется отвлечься от бесконечных правок в Jira, настройки CI/CD и споров о том, какой стейт-менеджер лучше. Хочется просто взять и написать что-то визуальное, понятное и законченное. Именно на такую находку я наткнулся в репозитории Виктора Рибейро. Проект называется isocity, и это, пожалуй, самый лаконичный градостроительный симулятор, который я видел.

screenshot

Что это за проект

Если вы ожидаете увидеть здесь замену SimCity с налогами, водопроводом и недовольными жителями, то спешу разочаровать (или обрадовать). Автор сразу заявляет: никакой симуляции, экономики или целей нет. Это чистая «песочница» в изометрии.

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

В чем прелесть реализации

Проект цепляет своей простотой. Здесь нет тяжелых движков вроде Three.js или Phaser. Автор обошелся стандартным Canvas API.

Вот пара моментов, которые мне понравились:

Изометрическая сетка. Реализовать правильное наложение тайлов в изометрии — та еще задачка для новичка. В коде можно подсмотреть, как рассчитываются координаты, чтобы домики не «летали» в воздухе и корректно перекрывали друг друга.
Текстуры от Kenney. Использование ассетов от Kenney — это уже знак качества в инди-сообществе. Они выглядят опрятно и отлично сочетаются между собой.
Никаких зависимостей. Вы просто открываете index.html и все работает. В наше время, когда для вывода «Hello World» часто нужно скачать пол-интернета в node_modules, это подкупает.

Техническая изнанка

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

Интересно, что проект изначально не затачивался под мобильные устройства, хотя по факту там нечему тормозить. Если захотите попрактиковаться, адаптация управления под тач-события — отличная задача на вечер.

Зачем это нужно разработчику

Я вижу несколько сценариев, как можно использовать этот репозиторий:

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

Кому стоит заглянуть в репозиторий

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

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

Попробовать построить свой мини-мегаполис можно в живой демо-версии. Только осторожно: процесс затягивает сильнее, чем кажется на первый взгляд.