Вайб-кодинг игры: делаем браузерную игру с ИИ-агентом

Вайб-кодинг игры — хороший способ почувствовать, как работает агентная разработка: результат виден сразу, в браузере, а ошибки заметны глазами. Ниже пошаговый пример: мы делаем простую игру на JavaScript («уворачивайся от падающих блоков») с агентом Claude Code, разбираем, как формулировать механику, какие баги встречаются в играх чаще всего и сколько стоит сессия. Сам термин и общие принципы описаны в статье что такое вайб-кодинг↗; здесь практика.

Почему браузерная игра на JavaScript

Для первого опыта это самый короткий путь: один HTML-файл и один скрипт, никаких движков и сборки, запуск локальным сервером. Весь код целиком помещается в контекст агента, а вы за секунды проверяете результат. Про Unity скажем в конце: там схема другая.

Шаг 1. Подготовка

Установите Claude Code и подключите ключ Zukko. Адрес без /v1, переменная именно ANTHROPIC_AUTH_TOKEN:

export ANTHROPIC_BASE_URL=https://api.zukko.pro
export ANTHROPIC_AUTH_TOKEN=fetch_ваш_ключ
export ANTHROPIC_MODEL=claude-sonnet-5-5
mkdir dodge-game && cd dodge-game
git init
claude

Подробная установка и настройка — в документации по Claude Code↗. Git нужен не для порядка: каждая рабочая версия игры должна быть сохранена, чтобы агент не мог испортить её без возможности откатиться.

Шаг 2. Файл с правилами проекта

Claude Code читает файл CLAUDE.md в корне проекта. Создайте короткий:

Проект: игра «Уворот»
- Чистый JavaScript, без библиотек и сборки. Файлы: index.html, game.js.
- Рисуем на canvas 480x640.
- Движение зависит от времени кадра (dt), а не от числа кадров.
- Перед завершением задачи объясни, что изменил, и предложи, как это проверить в браузере.
- Не переписывай весь файл ради мелкой правки.

Последнее правило экономит токены и уменьшает риск, что агент заодно «улучшит» то, о чём вы не просили.

Шаг 3. Первый промпт: механика, а не «сделай игру»

Описывайте правила так, как описали бы человеку: что видит игрок, что он может делать, когда проигрывает.

Сделай игру на canvas. Игрок — квадрат внизу экрана, двигается стрелками влево и вправо.
Сверху падают красные блоки случайного размера и в случайных колонках.
Если блок касается игрока — игра окончена, показываем счёт и текст «Нажми пробел».
Счёт растёт каждую секунду выживания. Блоки со временем падают быстрее.

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

Шаг 4. Запуск и проверка

Откройте второй терминал и запустите простой сервер:

python3 -m http.server 8000

Затем откройте http://localhost:8000 в браузере. Поиграйте две минуты и записывайте, что не нравится. Не надо проверять код глазами сразу: сначала смотрите на поведение. Если игра работает, зафиксируйте версию (git add -A && git commit -m "first version") и переходите к итерациям.

Шаг 5. Итерации маленькими шагами

Просите по одному изменению за раз, иначе вы не поймёте, что сломало игру:

1. «Добавь рекорд, хранить в localStorage.»
2. «Сделай паузу на клавишу P.»
3. «Добавь бонусы: жёлтый квадрат даёт 10 очков.»
4. «Добавь звук при столкновении через Web Audio, без внешних файлов.»

После каждого шага играйте и коммитьте. Если шаг сломал игру, откатывайтесь на предыдущий коммит и формулируйте иначе, а не накапливайте исправления поверх.

Типичные баги в играх и как их формулировать

Скорость зависит от частоты кадров. На быстром мониторе блоки падают быстрее. Просите использовать время между кадрами:

let last = performance.now();
function loop(now) {
  const dt = Math.min((now - last) / 1000, 0.05);
  last = now;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Неточные столкновения. Игрока «убивает» блок, который визуально не коснулся. Проверка пересечения прямоугольников:

function hit(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x &&
         a.y < b.y + b.h && a.y + a.h > b.y;
}

Состояние не сбрасывается при рестарте. После проигрыша блоки остаются на экране или счёт не обнуляется. Просите вынести начальное состояние в функцию reset().

Утечки объектов. Блоки, упавшие за экран, не удаляются, и игра тормозит через пару минут. Просите удалять объекты за границей.

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

Сколько стоит сессия

Цены на 18 октября 2026 для claude-sonnet-5-5: вход 0.4, выход 2, чтение кэша 0.05, запись в кэш 0.5 за 1 млн токенов. Допустим (это условные числа, а не замер), что 25 промптов дали 0,3 млн свежего входа, 3 млн чтения кэша, 0,3 млн записи в кэш и 0,15 млн выхода:

0.3 × 0.4 + 3 × 0.05 + 0.3 × 0.5 + 0.15 × 2 = 0.12 + 0.15 + 0.15 + 0.30 = $0.72

Скидку за кэш даёт Anthropic-формат, в котором работает Claude Code. Реальный расход зависит от размера игры и числа правок, он виден в разделе «Использование» кабинета. Как оценивать час работы агента: сколько стоит агентная сессия↗. Ключ создаётся в кабинете↗, оплата из России доступна по СБП, картой MasterCard или криптой.

А как же Unity

Вайб-кодинг на Unity устроен иначе. Агент может править C#-скрипты, но сцены, префабы и настройки компонентов живут в редакторе и служебных файлах проекта, и результат агент не видит. Приходится описывать, какие объекты куда повесить, и проверять самому. Для первой игры JavaScript проще; к Unity переходите, когда понимаете, чего хотите от механики.

Частые вопросы

Нужно ли знать программирование?

Нет, чтобы начать. Но умение читать код и пользоваться git заметно помогает: вы быстрее поймёте, что именно сломалось.

Можно ли делать игру не в Claude Code?

Да, подойдут и другие агенты, например opencode↗. Принцип одинаковый: маленькие шаги, коммиты, описание поведения.

Какая модель подойдёт?

Для простой игры начните с claude-sonnet-5-5. Если задачи усложняются, попробуйте claude-opus-5-5 на самых трудных шагах и сравните результат на своём проекте.

Как не потратить лишнего?

Просите небольшие правки, начинайте новую сессию для новой фичи и задайте ключу дневной лимит в долларах.