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

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

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

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

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

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

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

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

У меня ноль опыта в написании кода, но к программистам всегда относился с искренним уважением. Даже самому хотелось научиться: первый 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 дня: маршрут по Сыктывкару и окрестностям

3 причины, почему с дачи мы всегда возвращаемся с полным багажником

3 причины, почему с дачи мы всегда возвращаемся с полным багажником

Комментарии
Авторизуйтесь, чтобы оставить комментарий
Таня Чудак
42 минуты назад
Какой крутой опыт и классный результат. Очень интересно было читать. Конечно, я вряд ли увлекусь вайбкодингом, но в игру с удовольствием залипла:) Сколько времени потрачено на арканоид вместо учёбы, стыдно признаться, а тут ещё и Лазейка — кайф!
Что вы могли пропустить
Представлены флагманы Xiaomi 18 Pro и Pro Max с антишпионскими экранами
Представлены флагманы Xiaomi 18 Pro и Pro Max с антишпионскими экранами
0
Вчера
Новости
Устройства
Как выбрать моющий робот-пылесос под свой ритм жизни: разбираемся на примере моделей бренда TROUVER 
Как выбрать моющий робот-пылесос под свой ритм жизни: разбираемся на примере моделей бренда TROUVER 
Вчера
Устройства
Устройства
Как проверить, поддерживает ли ваш телефон 5G, — и что эта технология даёт
Как проверить, поддерживает ли ваш телефон 5G, — и что эта технология даёт
0
Вчера
Технологии
Технологии
Amazfit показала часы T-Rex Dual Solar с двойной солнечной батареей и автономностью 180 дней
Amazfit показала часы T-Rex Dual Solar с двойной солнечной батареей и автономностью 180 дней
0
22 сентября
Новости
Устройства
Beats представила кастомизируемые накладные наушники Beats 360
Beats представила кастомизируемые накладные наушники Beats 360
0
22 сентября
Новости
Устройства
iPhone 18 Pro Max и Galaxy S26 Ultra сравнили на прочность — один разбился вдребезги
iPhone 18 Pro Max и Galaxy S26 Ultra сравнили на прочность — один разбился вдребезги
0
22 сентября
Новости
Устройства
Samsung раскрыла сроки выпуска One UI 9 для старых смартфонов Galaxy
Samsung раскрыла сроки выпуска One UI 9 для старых смартфонов Galaxy
0
22 сентября
Новости
Технологии
Для работы и чила: ещё 9 дофаминовых гаджетов и аксессуаров
Для работы и чила: ещё 9 дофаминовых гаджетов и аксессуаров
0
22 сентября
Устройства
Устройства
Зачем платить больше: 11 гаджетов и устройств, на которых не стоит экономить
Зачем платить больше: 11 гаджетов и устройств, на которых не стоит экономить
0
21 сентября
Технологии
Технологии
Для Microsoft Word вышел плагин ChatGPT — работает даже на бесплатном тарифе
Для Microsoft Word вышел плагин ChatGPT — работает даже на бесплатном тарифе
0
21 сентября
Новости
Технологии
OnePlus 16 показали на фото и видео — у него корпус с тайными посланиями
OnePlus 16 показали на фото и видео — у него корпус с тайными посланиями
0
21 сентября
Новости
Устройства
Объясняем за минуту: как узнать модель своего телефона
Объясняем за минуту: как узнать модель своего телефона
0
19 сентября
Технологии
Технологии
Всё, что нужно знать о GTA 6: отвечаем на 15 главных вопросов
Всё, что нужно знать о GTA 6: отвечаем на 15 главных вопросов
0
18 сентября
Технологии
Технологии
Face ID в iPhone 18 Pro и Pro Max частично спрятали под экран — и это вызвало проблемы
Face ID в iPhone 18 Pro и Pro Max частично спрятали под экран — и это вызвало проблемы
0
18 сентября
Новости
Устройства

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

Аватар автора комментария
Анастасия25 минут назад

0 / 0

Обычно скептически отношусь к пп-шным рецептам, но тут пару салатов прям заинтересовали, буду пробовать, спасибо за подборку!
Суперподборка белковых салатов: 15 рецептов на все случаи ПП-жизни
Аватар автора комментария
Таня Чудак42 минуты назад

0 / 0

Какой крутой опыт и классный результат. Очень интересно было читать. Конечно, я вряд ли увлекусь вайбкодингом, но в игру с удовольствием залипла:) Сколько времени потрачено на арканоид вместо учёбы, стыдно признаться, а тут ещё и Лазейка — кайф!
Приключения Лазейки: как я с помощью вайбкодинга сделал свою первую браузерную игру
Аватар автора комментария
Сергей Викторович Курочкин23 часа назад

+1 / 0

В мультиках "Ральф" и "Ральф против Интернета" главная героиня куда ближе современным девочкам будет. Из японских Тоторо и Рыбка Поньо, как тут уже писали. Ещё "Дом".
20 очаровательных мультиков для девочек, которые надолго увлекут
Аватар автора комментария
Sergey Gorovoy23.09.26 12:04

0 / 0

как поклонник корейского кино - отсмотрев нынешней ночью - поставил железобетонную 7/10 на IMDb, плюнув на затянутость тайминга, нестыковки сюжета и прикольные отношения корейцев к корейцам + и ещё кое-какие "корки". смотрибельно - более чем!
Я посмотрел «Надежду» и заявляю, что это самый драйвовый и весёлый боевик года
Давайте посчитаем. Как эффективно вести семейный бюджет

Давайте посчитаем. Как эффективно вести семейный бюджет

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