Приключения Лазейки: как я с помощью вайбкодинга сделал свою первую браузерную игру

От первого промпта до готового релиза без знания кода.

Можно ли собрать готовую видеоигру без опыта в разработке, просто надиктовывая задачи нейросети? Я решил провести эксперимент и узнать, где заканчивается магия ИИ и начинается суровая реальность. Спойлер: договориться с искусственным интеллектом оказалось сложнее, чем кажется. Делюсь честным опытом, факапами и готовым результатом.

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

Как всё начиналось

У меня ноль опыта в написании кода, но к программистам всегда относился с искренним уважением. Даже самому хотелось научиться: первый Mac когда-то покупал именно под это дело. Но не поехало, и я забросил попытки. А тут совпало сразу всё: хайп вокруг вайбкодинга, желание проверить технологии в деле для статьи и, чего грешить, незакрытый гештальт. Ну кто из нас в детстве не хотел создать свою игру, рисуя в тетрадках виртуальные миры и придумывая их законы?

Примитивный прототип, как может выглядеть вайбкодинговый арканоид

Трезво оценив силы, замахиваться на условную 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 долларов в месяц. Лимиты там, конечно, повыше, но суть остаётся той же.

Чек-лист для тех, кто захочет повторить

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

  1. Не бойтесь и просто пробуйте. Это гораздо проще и увлекательнее, чем кажется со стороны.
  2. Продумывайте концепцию на старте. Намного легче урезать или упростить готовый план, чем метаться и переделывать архитектуру на ходу.
  3. Экономьте лимиты с первого дня. Поставьте минимальное потребление модели в настройках, пока не поймёте темпы расхода, и сразу установите плагин для мониторинга токенов.
  4. Просите ИИ подсвечивать параметры. Спрашивайте у агента: «Какая строчка отвечает за цвет или размер шрифта?» — и просите добавить комментарий в код. Изменить пару цифр руками быстрее и выгоднее, чем сжигать лимиты на мелкие правки.
  5. Комментируйте код при экспериментах. Если решили пошаманить вручную — всегда оставляйте себе заметки, чтобы потом не искать, что и где сломалось.

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

Если нашли ошибку, выделите текст и нажмите Ctrl + Enter

Это упрощённая версия страницы.

Читать полную версию
Таня Чудак
Какой крутой опыт и классный результат. Очень интересно было читать. Конечно, я вряд ли увлекусь вайбкодингом, но в игру с удовольствием залипла:) Сколько времени потрачено на арканоид вместо учёбы, стыдно признаться, а тут ещё и Лазейка — кайф!
Елена Грицун
Весь перерыв веселилась - простенькая, но залипательная игра )) Ну и опыт крутой.