Загрузка 0
ПОДЕЛИТЬСЯ

Мой блог

Листай вниз

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

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

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

У меня нулевой опыт в написании кода, но к программистам я всегда относился с большим уважением. Мне и самому когда-то хотелось научиться создавать софт, даже первый компьютер покупался именно под эти задачи. Однако процесс не пошел, и попытки были заброшены. Сейчас же сошлось всё: хайп вокруг концепции вайбкодинга, желание протестировать современные технологии на практике и давний незакрытый гештальт.

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

Взвесив свои силы, замахиваться на масштабные проекты я не стал, выбирая между классическим платформером и арканоидом. Второй вариант показался более подходящим, но делать примитивное отбивание мячика не хотелось. Я решил добавить сюжет, элементы кат-сцен, уникальные биомы и полноценных боссов, а в качестве главного героя задействовал узнаваемый маскот.

Реклама
Примитивный прототип вайбкодингового арканоида
Простой прототип игрового поля с минимальным набором элементов.
Панель управления Antigravity со встроенным чатом
Главная панель управления агентом и чат для постановки задач.

В качестве рабочего инструмента я выбрал агентную среду разработки Antigravity от компании Google, так как у меня уже имелась активная подписка на Gemini. Опыт прошлых лет подсказывал, что просто копировать куски кода из обычного чата в файл — тупиковый путь, ведущий к неизбежным поломкам. На этот раз я подготовился основательно: завел учетную запись на GitHub, зарегистрировался на платформе для деплоя и собрал всю имеющуюся документацию.

Реклама
Документ с описанием изначальной концепции игры
Наброски базовых правил и концепции будущей браузерной игры.
Начальный скелет игры с ареной и платформой
Самый первый сгенерированный результат работы ИИ на экране.
Прототип арканоида со сгенерированным фоном
Игра со сгенерированным фоном и кастомным персонажем в качестве платформы.

Какие были первые эмоции

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

Боссы-заглушки в игровой зоне
Простые геометрические фигуры, выполняющие роль боссов на начальном этапе.
Каталог бесплатных ассетов для разработки
Каталог готовых графических и звуковых элементов для инди-игр.
Вспомогательный чат-бот для анализа ошибок
Параллельный чат для консультаций по поиску багов в коде.
Плагин мониторинга квот и токенов
Специальный плагин среды разработки, показывающий нулевой баланс квот.

Результат меня поразил: агент выдал рабочий прототип практически моментально. Испытать детский восторг от того, что картинка на экране ожила с первой попытки, было невероятно приятно. Наверное, это и есть тот самый главный дофаминовый стимул вайбкодинга.

Ручное редактирование исходного кода
Процесс ручного изменения параметров в файлах стилей и скриптов.
Список финальных задач бэклога
Перечень оставшихся задач перед финальным релизом игры.
Панель управления деплоем на Vercel
Платформа автоматического развертывания веб-приложений.
Главный экран готовой браузерной игры
Стартовый экран с приглашением к началу игрового процесса.

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

Финальный результат работы ИИ-разработки
Игровой процесс полностью собранной с помощью нейросетей игры.
Успешное завершение эксперимента с вайбкодингом
Радость от успешного релиза собственного проекта без навыков программирования.

С какими проблемами я столкнулся

С визуальным оформлением тоже возникли вопросы. Я остановился на пиксель-арт стиле, рассчитывая на простоту, но поиск подходящих материалов отнял много сил. В итоге фоновые изображения и персонажей я сгенерировал прямо через Gemini, а звуковое сопровождение подобрал на специализированных независимых площадках.

Сначала разработка шла отлично, но вскоре меня ждал неприятный сюрприз. Я следил за расходом квот, но не учел, что лимиты самого сервиса и лимиты специализированного агента — это совершенно разные вещи. В один момент инструмент просто заблокировался, а разработка встала на целую неделю.

Пока агент отдыхал, я пытался ковыряться в коде самостоятельно с помощью обычного чат-бота, но это чаще приводило к новым тупикам. Тем не менее, определенную пользу из этого извлечь удалось: я научился менять базовые параметры интерфейса и размеры элементов вручную.

Как мне удалось всё исправить

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

Не обошлось без трудностей и при публикации проекта. Попытка вручную управлять коммитами через консоль без предварительной индексации папок привела к тому, что система собрала поврежденную версию игры. Разобравшись с командами и освоив встроенный интерфейс контроля версий, я успешно залил рабочий билд на сервер.

Что получилось в итоге

Итоговый результат превзошел ожидания: получилась полноценная, работающая игра, которую можно запустить по прямой ссылке с любого устройства. Весь процесс занял около трех недель с учетом пауз на исчерпание лимитов, а финансовые затраты свелись к базовой подписке на нейросеть.

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

Главный вывод, который я сделал: вайбкодинг действительно позволяет людям без профильных навыков создавать рабочие продукты. Главным ресурсом здесь выступают даже не знания, а правильное расходование токенов и умение ставить четкие задачи искусственному интеллекту.

01.