История создания игры, которая на пальцах показывает посетителям сайта реальную ценность работы архитектора.
Концепция
Геймификация преимуществ архитектора
Технологии
HTML5 Canvas · JavaScript
Дата
Май 2026
Идея01 / 06
Геймификация «зачем нужен архитектор»
Главная задача — показать посетителям сайта art-dom.su в игровой форме, что архитектор это не «дорогая лишняя строчка в смете», а наоборот — инструмент контроля бюджета и защиты от переделок.
Исходный запрос заказчика
Промпт
Хочу сделать анимацию-игру для сайта art-dom.su, которое изображает реальный процесс строительства дома. Заказчик берет и кидает в строителя деньгами, и дом постепенно строится. Как в Angry Birds — есть сила оттяжки: чем больше зажмёт курсор, тем больше денег полетит. И чем быстрее щёлкает мышкой — тем больше и быстрее деньги летят в строителей.
Постепенно на заднем плане строится схематично дом. Каждый раз, когда деньги попадают, строитель улыбается. Есть дополнительная кнопка — «Рука архитектора». Если её активировать, часть денег возвращается заказчику, и строитель грустный, и не получает деньги.
Когда дом построен на 100% — с архитектором у заказчика остаются деньги на машину. Без архитектора — он заселяется в дом в одних трусах и майке.
Ключевая метафора
Деньги летят к строителю — стройка идёт. Но без контроля бюджет «утекает» в переделки и хаос. Архитектор — это рука, которая возвращает половину денег обратно, не давая стройке выйти из-под контроля.
art-dom.su02
Дизайн02 / 06
Стиль сайта в каждой детали
Игра выполнена в единой эстетике с основным сайтом — минималистично, монохромно, с акцентом на природные «горные» формы (отсылка к философии «дом-кристалл» Тимура Алиева).
Палитра — взято с art-dom.su
Фон
#f4f1ec
Основной
#1a1a1a
Акцент
#c8a875
Тёмный
#3a342c
Архитектор
#2c3e50
Что взято с сайта
01
Брутальный минимализм
Тёплая бежевая палитра в духе brut-эстетики сайта. Тонкие линии, рамки в 1 пиксель.
02
Горные силуэты
На заднем плане игры — горы. Прямая отсылка к концепции «дом с прообразом гор».
Системный sans-serif. Тонкие заголовки, UPPERCASE с большим трекингом для UI.
art-dom.su03
Механика03 / 06
Как игра работает
1
Бросок денег
Игрок зажимает мышь на заказчике и тянет — появляется траектория и шкала силы. Чем дольше держит — тем больше пачек денег полетит (от 1 до 5). Быстрые клики = серия мелких бросков. Каждая пачка = 100 000 ₽.
2
Постройка дома
Дом строится в 8 этапов, синхронно с прогрессом:
Фундамент → стены с пустыми проёмами → крыша-кристалл → труба с дымом
Окна со стеклом → дверь с ручкой → декор (лампа, табличка) → кустарники
A
Рука архитектора
Кнопка-тумблер внизу. Когда включена — рука появляется в центре и автоматически перехватывает 50% пачек на лету, возвращая их заказчику. Стройка идёт чуть медленнее, но бюджет копится.
!
Эффект «переделок»
Если на отметке 60% прогресса архитектор не был использован — бюджет на оставшуюся стройку удваивается. Появляется красное мигающее уведомление: «Бюджет вышел из-под контроля! Переделки удорожили стройку в 2 раза».
art-dom.su04
Финалы04 / 06
Два сценария — один вывод
Игра ведёт игрока к одному из двух финалов, и каждый — это аргумент в пользу работы с архитектором.
С архитектором
Дом построен. И ещё хватило на машину.
Бюджет под контролем — благодаря архитектору половина денег была возвращена обратно. Дом — мечта, в гараже — машина.
Без архитектора
Дом построен. Но больше — ничего.
На 60% прогресса бюджет удвоился из-за переделок. Дом стоит, но денег нет — заехать пришлось в одних трусах и майке.
Главный посыл
«Архитектор стоит денег — но без него стройка стоит дороже».
art-dom.su05
Итерации05 / 06
История доработок
Игра дорабатывалась по обратной связи. Ниже — хронология ключевых изменений.
v1
Первая версия
Базовая механика: бросок денег с зарядом, постройка дома в 5 этапов (фундамент → стены → крыша → окна → отделка), кнопка «Рука архитектора», два финала. Цветовая палитра и шрифты подобраны под стиль сайта art-dom.su.
v2
Баланс и логика архитектора
Унифицирован номинал пачек — каждая ровно 100 000 ₽ (раньше зависело от заряда)
Архитектор теперь возвращает 50% пачек случайным образом, независимо от прогресса
Стройка идёт от любых попаданий — архитектор не блокирует прогресс, только экономит
Дом строится в 8 этапов: фундамент → стены с проёмами → крыша → труба → окна → дверь → декор → кустарники
v3
Мобильная адаптация и эмоции
Полная адаптация под iPhone и узкие экраны (брейкпоинты <420px и <700px)
Все элементы UI помещаются и масштабируются корректно
Заказчик грустит во время броска денег — нахмуренные брови, рот дугой вниз
На 60% прогресса без архитектора — удвоение бюджета с красным уведомлением «Переделки удорожили стройку в 2 раза»
Финальная кнопка ведёт на блок «Записаться на встречу» (#rec1761815691)
art-dom.su06
Итог06 / 06
Что получилось в итоге
Игра-метафора, которая в 1-2 минуты доносит до посетителя сайта art-dom.su главную мысль студии: архитектор не статья расходов, а инструмент защиты бюджета и контроля стройки.
8
Этапов стройки
2
Финала
100K
₽ за пачку
50%
Перехват архитектора
Технические характеристики
01
Один HTML-файл
Никаких зависимостей и сборки. Готово к вставке в Tilda через HTML-блок или iframe.
02
HTML5 Canvas
Векторная отрисовка с физикой бросков. Адаптируется под любой Retina-дисплей.
03
Touch и Mouse
Работает на десктопе и на мобильных. Полная поддержка тач-событий.
04
SEO-friendly
Корректные мета-теги, semantic HTML. Не блокирует индексацию страницы.
Готово к запуску на сайте art-dom.su
Игра встраивается одним HTML-блоком. Все ссылки ведут на нужные якоря и формы сайта.