Приключения Лазейки: как я с помощью вайбкодинга сделал свою первую браузерную игру
От первого промпта до готового релиза без знания кода.
Примитивный прототип, как может выглядеть вайбкодинговый арканоид
Трезво оценив силы, замахиваться на условную GTA я, конечно, не стал. Выбирал между платформером и арканоидом. Первый показался сложнее, поэтому остановился на втором. Делать унылое отбивание мячика не хотелось, так что решил максимально разнообразить игру: добавить сюжет, катсцены, разные биомы и полноценных боссов. С главным героем сомнений не возникло — им стал маскот Лайфхакера Лазейка.
Интерфейс Antigravity, где происходит вся магия. Справа главное — чат для общения с агентом
Что до инструментов, то у всех на слуху сейчас, конечно, Cursor и Claude Code, но у меня уже была подписка на Gemini. Чтобы не плодить новые, я решил использовать гугловский агентный IDE Antigravity. Он уже был не таким сырым, как раньше, и вполне подходил для моих задач. Тем более что там тоже есть разные модели, включая тот же Claude.
Опыт прошлых экспериментов с ChatGPT подсказывал, что тупо копировать куски кода из чата в html-файл — это тупик. Рано или поздно всё ломалось, а откатиться назад без опыта было непросто. В этот раз решил делать всё по уму. Изучил матчасть и подготовился. Завёл аккаунт на GitHub, зарегистрировался на Vercel для будущего деплоя и разложил всё, что у меня было на старте, по папкам. А было у меня не так много: док с концепцией и пара картинок с Лазейкой.
Моя изначальная задумка игры с описанием и механиками
Я понимал, что парой промптов дело не обойдётся, и честно настраивался на полноценную работу. Но то, с чем я столкнулся дальше, всё равно стало сюрпризом.
Какие были первые эмоции
В самом первом промпте я попросил сделать буквально скелет: арена с блоками, физика мячика и Лазейка вместо платформы. Блоки разрушаются, начисляются очки — ничего лишнего.
С чего всё началось
Агент выдал результат практически моментально, и он мне понравился. Серьёзно. Был настоящий детский восторг, когда картинка на экране вдруг ожила и всё заработало с первого раза. Потрясающее чувство — наверное, это и был тот самый вайбкодинговый дофамин.
Первый прототип со сгенерированным фоном, ареной и придавленной моей креативностью Лазейкой
Естественно, тут же разыгралась фантазия. Просто гонять шарик уже казалось слишком простым, и захотелось сразу развернуться по полной: накрутить сочную музыку, звуковые эффекты, анимацию фона, плавные движения Лазейки и эпичные битвы с боссами.
Те самые грозные боссы в виде заглушек, жалобно стоящие на месте
Правда, и отрезвление пришло быстро. Я почти сразу понял, что аппетиты нужно срочно умерить, иначе проект завязнет в разработке надолго. Для начала я решил отказаться от сложных анимаций и остановился на статичных спрайтах, а боссов временно заменил прямоугольниками с полоской здоровья. По количеству контента тоже пришлось ужаться: вместо кучи уровней я оставил четыре биома с двумя уровнями в каждом, плюс финальный третий уровень с боссом.
С какими проблемами я столкнулся
С графикой я решил не мудрить и выбрал пиксель-арт. Казалось, так будет проще всего, но на деле и тут вылезла куча нюансов. Главный вопрос: где вообще всё это брать?
Каталог ассетов для игр, где можно найти всё — от персонажей до музыки. Но не всегда
Я метался между генерацией с нуля и поиском готовых бесплатных ассетов. В итоге совместил оба подхода: фоны и боссов нагенерировал прямо в Gemini, а музыку пошёл искать на itch.io. Первоначальная идея создать треки в Suno провалилась: результат меня не устраивал, не удавалось попасть в нужный стиль и добиться консистентности. Звуковые эффекты тоже надёргал из готовых бесплатных SFX-паков и вручную раскидал по событиям в игре: прыжок, удар, разрушение блока.
Второй ИИ, выполняющий роль советника
Сначала всё шло гладко. Агент послушно пилил фичу за фичей. Если что-то ломалось, я открывал параллельную вкладку с обычным чат-ботом, и таким нейросетевым консилиумом мы находили ошибку и фиксили. Беда пришла откуда не ждали. Я периодически проверял остатки квоты в приложении Gemini, чтобы не остаться без токенов на самом интересном месте. Всё выглядело отлично, и я даже про себя хвалил ИИ за экономность. Но вот чего я не учёл, так это того, что лимиты подписки Gemini и лимиты агента в Antigravity — это разные вещи.
Плагин, показывающий остатки квоты: у всех основных моделей нули
В один «прекрасный» момент агент просто выключился. Лимиты сгорели в ноль, а разработка встала на целую неделю. Уже потом я нагуглил и поставил удобный плагин для VS Code, который показывает реальный остаток токенов прямо в панели. Но неделю простоя это, увы, не отменило.
Азарт никуда не делся, поэтому во время «забастовки» агента я попытался ковыряться в коде сам. Вторая нейросеть из чата бодро рапортовала, что сейчас всё починит, но чаще заводила в тупик или ломала рабочие функции. Впрочем, кое-что удавалось подкрутить на чистой логике. Я просто искал в коде знакомые параметры и менял значения: подправлял размеры шрифтов, подгонял габариты арены и двигал стартовую позицию платформы, потому что Лазейка постоянно проваливалась за экран.
Мои попытки ручного исправления кода. Не всегда успешные, но иногда дававшие свои плоды
Серьёзные фичи без агента я трогать боялся — думал, потом он просто не переварит мои правки и сделает только хуже. Но этот вынужденный опыт вылился в лайфхак. Когда лимиты вернулись, я стал просить ИИ не просто внедрять фичи, а подсвечивать их: «Сделай фон чуть темнее и укажи в комментариях к коду, какая переменная за это отвечает». Модель добавляла понятные пояснения и границы допустимых значений. В итоге цвет, затемнение фонов или громкость музыки я стал править руками за секунду, не сжигая дорогие токены на глупые промпты.
Как мне удалось всё исправить
Агент работал без устали, вот только токены таяли с пугающей скоростью. Тогда я понял, что хватит метаться между новыми фичами и бесконечным наведением красоты. Нужна какая-то система — стоит расставить приоритеты. Я завёл отдельный документ с бэклогом и выписал туда всё, что реально необходимо доделать перед релизом в порядке очереди.
Список финальных тасок выглядел так
Закрывать бэклог оказалось даже интереснее, чем набрасывать первые идеи. Мы шаг за шагом вычищали интерфейс: выкинули серые квадраты и поставили на их место спрайты боссов, которые я сгенерировал в Gemini. Также подправили CSS-стили, чтобы шрифты не размывались, и настроили нормальную работу с аудио. Потом снова кончились лимиты и всё встало на неделю, но после восполнения квот на опыте удалось быстренько допилить всё, что было задумано. Ну почти всё.
Интерфейс Vercel, где бесплатно хостится игра и куда автоматически заливается код с GitHub
С деплоем тоже не обошлось без приключений. Пока за коммиты и отправку кода на GitHub отвечал сам агент, всё было идеально. Но когда я решил в целях экономии делать это вручную через и команды git commit, и git push, всё сломалось. Я не знал, что новые папки нужно явно индексировать, поэтому половина изменений просто не сохранилась. Vercel подхватил урезанный код и выдал кривую, сломанную сборку.
Я убил кучу времени, пока разобрался, в чём дело. Зато выучил правильные команды, а чуть позже открыл для себя вкладку Source Control прямо в Antigravity, где всеми изменениями и коммитами можно управлять мышкой в удобном интерфейсе.
Заветный главный экран. Press any key, как говорится
Зато какое же это крутое ощущение — открыть не локальный предпросмотр, а настоящую, живую ссылку с игрой с любого устройства! Всё работает, Лазейка отбивает мяч, боссы патрулируют экран. Первой я показал игру жене — она осталась в полном восторге. Сын-подросток отнёсся сдержаннее — его арканоидом не удивишь. А вот коллеги по цеху оценили проект по достоинству, хотя у разных провайдеров не всё корректно подгружалось и вылезали задержки звуков.
Что получилось в итоге
В принципе, тут, наверное, лучше показывать, а не рассказывать. Результат моих экспериментов вы можете оценить сами по этой ссылке. Я ещё планирую некоторые улучшения, вроде павер-апов и таблицы рекордов, но сейчас игра выглядит более-менее законченной и такой, как я себе её представлял.
Могу подтвердить: без единой строчки опыта в программировании действительно реально навайбкодить рабочую игру, а не полусырой прототип. Разумеется, совершенству нет предела, и «Приключения Лазейки» можно допиливать бесконечно. Но получить полноценный продукт, который не стыдно показать друзьям, — вполне выполнимая задача.
Основным ресурсом и ограничителем в этом процессе выступают не ваши навыки, а токены. Без опыта вы сожжёте их в разы быстрее, просто из-за неточных запросов. Лишь по мере работы начинаешь понимать, как ставить задачи эффективнее, и расход заветных лимитов снижается.
Приключение удалось
Если говорить про затраченное время, то чистые часы подсчитать сложно. Весь процесс растянулся на три недели, но с учётом семидневных заморозок активной разработки набежало на несколько вечеров. Что интересно: на продумывание концепции и структуры у меня ушло больше времени, чем на первую сессию вайбкодинга. Я тогда отправил агенту буквально 3–4 промпта — и сжёг все лимиты. Правда, к чести ИИ, он выполнил их очень чётко и с максимальной отдачей.
Всё удовольствие обошлось, по сути, бесплатно, так как сверх базовой подписки Gemini за 5 долларов я ничего не потратил. Если брать специализированные инструменты вроде Cursor, Codex или Claude Code, то они будут стоить от 20 долларов в месяц. Лимиты там, конечно, повыше, но суть остаётся той же.
Чек-лист для тех, кто захочет повторить
Если бы я мог вернуться на три недели назад, то дал бы себе вот эти пять простых советов. Они пригодятся всем, кто хочет попробовать вайбкодинг.
- Не бойтесь и просто пробуйте. Это гораздо проще и увлекательнее, чем кажется со стороны.
- Продумывайте концепцию на старте. Намного легче урезать или упростить готовый план, чем метаться и переделывать архитектуру на ходу.
- Экономьте лимиты с первого дня. Поставьте минимальное потребление модели в настройках, пока не поймёте темпы расхода, и сразу установите плагин для мониторинга токенов.
- Просите ИИ подсвечивать параметры. Спрашивайте у агента: «Какая строчка отвечает за цвет или размер шрифта?» — и просите добавить комментарий в код. Изменить пару цифр руками быстрее и выгоднее, чем сжигать лимиты на мелкие правки.
- Комментируйте код при экспериментах. Если решили пошаманить вручную — всегда оставляйте себе заметки, чтобы потом не искать, что и где сломалось.
Скажу так: вайбкодинг — это не волшебная палочка, которая сделает за вас вообще всё, но буквально мостик между идеей в вашей голове и работающим проектом. Если вы тоже давно мечтали закрыть детский гештальт и собрать свою первую игру, сейчас для этого лучшее время.
Приключения ЛазейкиЭто может пригодиться🤩👇Найди, подумай, исследуй: как работают функции чат-ботов и когда их включать10 необычных способов использовать чат-боты вне работы: советует редакция Лайфхакера8 неочевидных вещей, которым меня научил ChatGPTРепетитор, повар, стилист: 20 кастомных чат-ботов для ChatGPT на все случаи жизниКак писать промпты для нейросети: подробная инструкция
Источник
