Лайфхакер
Лайфхакер
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Куда поехать на выходные
Розовый октябрь
Добрые новости
Стыдные вопросы
Есть мнение
Норм или стрём
Личный опыт
Объясняем за минуту
Технологии
24 сентября

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

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

Автор Лайфхакера

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

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

⚡ Новости из мира гаджетов, обзоры, гайды и не только — в телеграм-канале «Технологии | Лайфхакер».

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

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

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

Трезво оценив силы, замахиваться на условную GTA я, конечно, не стал. Выбирал между платформером и арканоидом. Первый показался сложнее, поэтому остановился на втором. Делать унылое отбивание мячика не хотелось, так что решил максимально разнообразить игру: добавить сюжет, катсцены, разные биомы и полноценных боссов. С главным героем сомнений не возникло — им стал маскот Лайфхакера Лазейка.

Вайбкодинг игры: интерфейс Antigravity
Интерфейс 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
Интерфейс 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. Комментируйте код при экспериментах. Если решили пошаманить вручную — всегда оставляйте себе заметки, чтобы потом не искать, что и где сломалось.

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

Приключения Лазейки
Это может пригодиться
🤩👇
Найди, подумай, исследуй: как работают функции чат-ботов и когда их включать
10 необычных способов использовать чат-боты вне работы: советует редакция Лайфхакера
8 неочевидных вещей, которым меня научил ChatGPT
Репетитор, повар, стилист: 20 кастомных чат-ботов для ChatGPT на все случаи жизни
Как писать промпты для нейросети: подробная инструкция
Если нашли ошибку, выделите текст и нажмите Ctrl + Enter
Это интересно
Экстренная контрацепция: что о ней важно знать, а во что стоит перестать верить

Экстренная контрацепция: что о ней важно знать, а во что стоит перестать верить

Учебный год под контролем!

Учебный год под контролем!

Что посмотреть в Коми за 2 дня: маршрут по Сыктывкару и окрестностям

Что посмотреть в Коми за 2 дня: маршрут по Сыктывкару и окрестностям

Как заселиться в отель без паспорта: всё о Цифровом ID для путешественников 

Как заселиться в отель без паспорта: всё о Цифровом ID для путешественников 

Комментарии
Авторизуйтесь, чтобы оставить комментарий
Таня Чудак
24.09.26 13:21
Какой крутой опыт и классный результат. Очень интересно было читать. Конечно, я вряд ли увлекусь вайбкодингом, но в игру с удовольствием залипла:) Сколько времени потрачено на арканоид вместо учёбы, стыдно признаться, а тут ещё и Лазейка — кайф!
Елена Грицун
24.09.26 14:35
Весь перерыв веселилась - простенькая, но залипательная игра )) Ну и опыт крутой.
Yu Ch
25.09.26 07:35
Про самое интересное не рассказали - про танцы с бубном вокруг ДНС, чтобы обойти региональные ограничения гугла и заставить антигравити работать )
Елена Исупова
25.09.26 11:23
Артём, ну это восторг! Вчера поиграла во время обеда, хочется еще позалипать:)
Ольга Сапиенс
25.09.26 14:25
Вау! Какая крутая крутотенюшка!!! Не сразу сообразила, что мяч надо отбивать головой, но потом прошла без потерь два уровня подряд)
Наталья Копылова
25.09.26 15:19
Круто! Как пишут в тиктоке, главное - не подумать, что я тоже так могу
Что вы могли пропустить
Обзор Honor X9e Pro — сверхпрочного смартфона с батарейкой 11 000 мА·ч
Обзор Honor X9e Pro — сверхпрочного смартфона с батарейкой 11 000 мА·ч
0
Вчера
Устройства
Устройства
«Крёстные отцы ИИ» и 400 учёных потребовали запереть мощные нейросети в «песочницах»
«Крёстные отцы ИИ» и 400 учёных потребовали запереть мощные нейросети в «песочницах»
0
Вчера
Новости
Советы
Ledger представила Android-смартфон, с которого нельзя звонить. Для чего он нужен?
Ledger представила Android-смартфон, с которого нельзя звонить. Для чего он нужен?
0
Вчера
Новости
Устройства
ZTE выпустила монструозный игровой смартфон с батареей на 8 400 мА⋅ч и экраном с частотой 185 Гц
ZTE выпустила монструозный игровой смартфон с батареей на 8 400 мА⋅ч и экраном с частотой 185 Гц
0
Вчера
Новости
Устройства
Как проверить скорость интернета на компьютере и телефоне
Как проверить скорость интернета на компьютере и телефоне
0
Вчера
Технологии
Технологии
Чем заменить сервисы «Яндекса»: альтернативы картам, музыке, облачному хранилищу, такси и доставке
Чем заменить сервисы «Яндекса»: альтернативы картам, музыке, облачному хранилищу, такси и доставке
0
14 октября
Технологии
Технологии
В Сети составили список всего, что Apple ещё представит в октябре — от ОС до устройств
В Сети составили список всего, что Apple ещё представит в октябре — от ОС до устройств
0
14 октября
Новости
Устройства
Где создать почту без номера телефона — рассказываем о сервисах и способах
Где создать почту без номера телефона — рассказываем о сервисах и способах
0
14 октября
Технологии
Технологии
Названы устройства OnePlus, которые получат Android 17
Названы устройства OnePlus, которые получат Android 17
0
13 октября
Android
Новости
Apple показала линейку умных камер, замков и термостатов — часть помогла создать LG
Apple показала линейку умных камер, замков и термостатов — часть помогла создать LG
0
13 октября
Новости
Устройства
Apple представила совершенно новое устройство — HomeView
Apple представила совершенно новое устройство — HomeView
0
13 октября
Новости
Устройства
100 из 100: чип Apple A20 Pro не оставил шансов новейшим Snapdragon и Dimensity в тестах
100 из 100: чип Apple A20 Pro не оставил шансов новейшим Snapdragon и Dimensity в тестах
0
13 октября
Новости
Технологии
Почему Android показывает уведомления от приложений, которые в России заблокированы и не работают
Почему Android показывает уведомления от приложений, которые в России заблокированы и не работают
0
13 октября
Android
Android
Google представила фитнес-браслет Fitbit Edge по цене смарт-часов
Google представила фитнес-браслет Fitbit Edge по цене смарт-часов
0
12 октября
Новости
Устройства
9 000 мА·ч, 185 Гц и Snapdragon 8 Elite Extreme Gen 6: анонсирован флагман OnePlus 16
9 000 мА·ч, 185 Гц и Snapdragon 8 Elite Extreme Gen 6: анонсирован флагман OnePlus 16
0
12 октября
Новости
Устройства

Новые комментарии

Аватар автора комментария
Олег Залялов22 минуты назад

0 / 0

mailinator вроде еще работает, там вообще не надо регистрироваться, просто заходишь и читаешь все, что приходит, зато адрес можно вообще рандомный писать. Правда адрес с mailinator уже не везде принимают.
Где создать почту без номера телефона — рассказываем о сервисах и способах
Аватар автора комментария
Дасерон Эвалёрн6 часов назад

+1 / 0

Прошлую зиму отходил в soft plus 2 без флиса. Выдерживали -20° при ходьбе спокойно, если стоять на снегу лишь немного было прохолодно. Водонепроницаемость полная, спокойно можно хоть в лужу наступить.
Переобуваемся к холодам в утеплённые кроссовки от Li-Ning
Аватар автора комментария
Иван Иванов7 часов назад

0 / 0

Шедевр без преувеличения и очень недооцененный фильм, который потом может стать классикой жанра. Дикая смесь комедии ситуаций, экшена и боди-хоррора. Это не resident evil, но это выдающееся самостоятельное авторское произведение в духе трилогии Кровь и мороженое.
4 причины, почему новая «Обитель зла» от режиссёра «Орудий» — лучшая за всё время экранизация игры
Аватар автора комментария
Владимир П10 часов назад

+1 / 0

Да, норм уже 5 лет пользуюсь
Стильные колонки от Edifier с Bluetooth и хорошим звуком отдают со скидкой 34%
ИГРА: Снова в школу! Найдите всё, что пригодится для учёбы

ИГРА: Снова в школу! Найдите всё, что пригодится для учёбы

Лайфхакер
Информация
О проектеРубрикиРекламаРедакцияВакансииО компании
Подписка
TelegramВКонтактеTwitter (X)PinterestYouTubeИнициалRSS
Правила
Пользовательское соглашениеПолитика обработки персональных данныхПравила применения рекомендательных технологийПравила сообществаСогласие на обработку персональных данныхСогласие для рекламных рассылокСогласие для информационной программы
18+Копирование материалов запрещено.
Издание может получать комиссию от покупки товаров, представленных в публикациях