Вайб-кодинг. Делаем игру «Золотая жила»

Что такое вайб-кодинг

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

Главное правило: ИИ работает тем лучше, чем точнее задача. Размытая просьба «сделай игру» даёт непредсказуемый результат. Короткий план и маленькие шаги с понятной проверкой дают рабочую программу даже на простой и быстрой модели.

В этой инструкции мы по шагам соберём браузерную игру «Золотая жила»: бур копает шахту вниз, собирает руду, продаёт её на поверхности и покупает улучшения. Игра получится в одном файле index.html, без библиотек и установки. Открывается двойным кликом в браузере.

[Скриншот: готовая игра]

Какой инструмент нужен

Пример в инструкции показан на VS Code + Claude Code. Как их установить и подключить — в инструкции Установка VS Code и Claude Code.

Инструмент не важен. Те же шаги работают в любом ИИ-помощнике для кода: Cursor, Windsurf, Copilot, Cline и других. Нужно только, чтобы инструмент умел читать и редактировать файлы в папке проекта.

Какую модель выбрать

Конкретная модель тоже не важна. Важно подбирать модель под задачу:

Сильная модель один раз продумывает план. Дальше простая модель пишет код короткими правками по этому плану: так быстрее и дешевле. Если простая модель не справилась с фазой за 2 попытки, отправьте тот же промпт сильной модели.

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

Подготовка

1. Создайте пустую папку, например gold_miner.

2. Откройте её в VS Code: меню File → Open Folder.

3. Откройте Claude Code (или другой ИИ-помощник) в этой папке.

Совет: после каждой удачной фазы копируйте index.html в отдельную папку, например backup/phase1a/. Если следующая фаза что-то сломает, можно вернуть рабочую версию.

Как работать с промптами

Игра собирается за 8 фаз. Для каждой фазы:

1. Откройте новый чат. В Claude Code — команда /clear. Новый чат на каждую фазу нужен, чтобы модель не путалась в прошлых разговорах. Всё, что ей нужно знать, лежит в файлах ARCHITECTURE.md и index.html.

2. Выберите модель для фазы (см. таблицу выше). В Claude Code — команда /model.

3. Скопируйте промпт целиком и отправьте.

4. Дождитесь ответа «Готово: …». Если инструмент спрашивает разрешение на изменение файла, разрешите.

5. Проверьте результат: откройте index.html двойным кликом или обновите страницу в браузере (F5).

6. Сохраните копию index.html, если фаза прошла успешно.

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

Фаза 0. Архитектура

Модель: сильная (в примере — terra), effort medium.

Ты — архитектор браузерных игр.

<context>
Делаю браузерную игру «Золотая жила». Код по фазам будет писать
простая быстрая модель, поэтому нужен короткий и однозначный план.
</context>

<game>
Drill-down как Motherload. Бур копает вниз, собирает руду, тратит топливо,
на поверхности продаёт руду и покупает улучшения.
- Управление: ←→↓ / A D S — ехать или бурить, ↑ / W — лететь вверх,
  Space — динамит, клавиши 1–8 — покупки на поверхности.
- Мир: сетка 40×300, блок 32px. Слои: земля → камень → базальт.
  Генерация: Math.random() с вероятностями по глубине.
- Движение ПО КЛЕТКАМ, без физики: пустая клетка — переход, блок — бурение
  за время по твёрдости, падение на клетку вниз, если под игроком пусто.
  Плавность — только анимация отрисовки 0.1 с.
- Руды: медь $5, серебро $15, золото $50, самородок $200, алмаз $500.
- Опасности: газ (взрывается цепочкой), лава глубже строки 150.
- Ресурсы: топливо, HP, трюм на 10 слотов. Улучшения: бур, бак, трюм, корпус, динамит.
- Цель: «Сердце горы» на дне.
- Эффекты: темнота с фонарём (один радиальный градиент), частицы (простой массив),
  тряска экрана, всплывающие «+$50», combo, звуки через WebAudio.
</game>

<constraints>
- Один файл index.html, vanilla JS, Canvas 2D, без библиотек и ассетов.
- Модули-объекты: CONFIG, World, Player, Camera, FX (частицы, тряска, всплывающий текст),
  Light, Audio, UI (HUD, магазин, экраны), Game.
- Все числа — в CONFIG. Итоговая игра — около 600 строк JS.
</constraints>

<task>
Создай ARCHITECTURE.md, НЕ БОЛЬШЕ 80 строк:
1. Таблица модулей: модуль | ответственность (1 строка) | публичные методы и поля.
2. Типы блоков: таблица id | имя | твёрдость | цвет | цена.
3. Порядок update и render в Game.loop (5–8 строк).
4. Фазы: 1a мир и камера, 1b бур, 2 руды и HUD, 3 магазин и экраны,
   4 свет и частицы, 5 динамит и звук, 6 финал. По одной строке на фазу.
Без пояснительного текста и без кода.
</task>

Проверка: в папке появился файл ARCHITECTURE.md, в нём меньше 80 строк, есть таблицы модулей и блоков. Это «контракт», по которому дальше будет работать простая модель.

Фаза 1a. Мир и камера

Модель: простая (в примере — luna), effort low. Откройте новый чат.

Следуй ARCHITECTURE.md. Создай index.html.

<task>
Фаза 1a — только мир и камера:
- CONFIG, World (сетка 40×300; строки 0–2 небо, 3 трава, до 60 земля,
  до 150 камень, дальше базальт; пустоты Math.random() < 0.05);
- отрисовка только видимых блоков, тёмная обводка 1px;
- Camera временно двигается стрелками ↑↓;
- requestAnimationFrame с dt (dt ≤ 0.05), canvas на всё окно, resize;
- остальные модули — пустые заглушки.
Не больше 120 строк JS.
</task>

<rules>
- Читай только ARCHITECTURE.md. Других файлов не открывай.
- Не запускай команды и сервер, не создавай других файлов.
- Без объяснений. В конце одна строка: «Готово: <что сделано>».
</rules>

<acceptance>
Двойной клик по index.html: видны небо, трава и слои; стрелки ↑↓ двигают камеру; в консоли нет ошибок.
</acceptance>

Проверка: откройте index.html двойным кликом. Видны небо, трава и слои породы, стрелки ↑↓ двигают камеру.

Как посмотреть ошибки: в браузере нажмите F12 (на Mac — Cmd+Option+I) и откройте вкладку Console. Красные строки — это ошибки.

Фаза 1b. Бур по клеткам

Модель: простая. Откройте новый чат.

Следуй ARCHITECTURE.md. Отредактируй index.html.

<task>
Фаза 1b — Player, движение ПО КЛЕТКАМ:
- целые col/row, старт на траве посередине;
- ← → ↓ / A D S (зажата): пустая клетка — перейти; блок — бурить
  CONFIG.drillTime[тип] секунд, затем блок исчезает и игрок переходит;
- ↑ / W: подняться, если сверху пусто; если снизу пусто и ↑ не нажата —
  падать на клетку каждые 0.1 с;
- отрисовка: lerp позиции за 0.1 с; жёлтый корпус + серое сверло
  в сторону последнего движения: влево, вправо или ВНИЗ (при ↑ направление не меняется);
  при бурении сверло дрожит;
- клавиши хранить по event.code (ArrowLeft, KeyA…), чтобы работало в русской раскладке;
- Camera плавно следует за игроком, ручное управление убрать.
Добавь не больше 80 строк.
</task>

<rules>
- Читай только ARCHITECTURE.md и index.html. Другие файлы не открывай.
- Вноси точечные правки. НЕ переписывай файл целиком.
- Не запускай команды и сервер, не создавай других файлов.
- Без объяснений. В конце одна строка: «Готово: <что сделано>».
</rules>

<acceptance>
Бур копает вниз и вбок, падает в пустоты, поднимается по ↑, камера едет за ним.
</acceptance>

Проверка: обновите страницу, кликните мышкой по игре (чтобы страница получила фокус) и копайте стрелками. Бур копает вниз и вбок, падает в пустоты, поднимается по ↑.

Фаза 2. Руды и HUD

Модель: простая. Откройте новый чат.

Следуй ARCHITECTURE.md. Отредактируй index.html.

<task>
Фаза 2:
- руды (медь, серебро, золото, самородок, алмаз): шанс и цена растут с глубиной;
  рисовать как породу с 3–4 яркими квадратиками цвета руды;
- трюм на 10 слотов: в трюм попадает ТОЛЬКО руда (земля, камень, газ — нет);
  player.cargoValue — сумма цен в трюме; если трюм полон — текст «Трюм полон!»;
  деньги ($) растут только при продаже в магазине (фаза 3);
- топливо тратится за каждую клетку и за каждое бурение; при 0 под землёй — Game Over (просто текст);
- HUD сверху: $ (золотым, крупно, не перекрывается полосками), полоска топлива,
  полоска HP, «Трюм N/10 ($сумма)», глубина в метрах.
Меняй только CONFIG, World, Player, UI. Добавь не больше 70 строк.
</task>

<rules>
- Читай только ARCHITECTURE.md и index.html. Другие файлы не открывай.
- Вноси точечные правки. НЕ переписывай файл целиком.
- Не запускай команды и сервер, не создавай других файлов.
- Без объяснений. В конце одна строка: «Готово: <что сделано>».
</rules>

Проверка: в породе видны цветные вкрапления руды, сверху панель с деньгами, топливом, HP, трюмом и глубиной. Руда попадает в трюм, топливо убывает.

Фаза 3. Магазин и экраны

Модель: простая. Откройте новый чат.

Следуй ARCHITECTURE.md. Отредактируй index.html.

<task>
Фаза 3:
- когда игрок на поверхности (row ≤ 3), справа показывается панель магазина:
  1 — продать руду, 2 — заправиться, 3 — починиться,
  4 — бур, 5 — бак, 6 — трюм, 7 — корпус (по 3 уровня, цена ×2 за уровень),
  8 — динамит ×3. Первая строка панели: «МАГАЗИН: нажми цифру 1–8».
  Нажатие цифры (event.code Digit1–8 или Numpad1–8) сразу покупает; недоступные пункты серые;
  при продаже: «+$сумма» над игроком и золотые искры;
  цифра под землёй — текст «Магазин — только на поверхности»;
- одна функция overlay(title, subtitle): затемнение экрана + крупный текст по центру;
- стартовый экран: overlay("ЗОЛОТАЯ ЖИЛА", "Нажми Enter");
- Game Over: overlay с деньгами и рекордом (localStorage в try/catch), Enter — заново.
Стиль: тёмная полупрозрачная панель, золотой #FFC83D, моноширинный шрифт.
World не меняй. Добавь не больше 90 строк.
</task>

<rules>
- Читай только ARCHITECTURE.md и index.html. Другие файлы не открывай.
- Вноси точечные правки. НЕ переписывай файл целиком.
- Не запускай команды и сервер, не создавай других файлов.
- Без объяснений. В конце одна строка: «Готово: <что сделано>».
</rules>

Проверка: появился стартовый экран (нажмите Enter). Накопайте руды, поднимитесь на поверхность, нажмите 1 (продать), затем 4 (улучшить бур). Деньги должны вырасти, а потом уменьшиться.

Фаза 4. Визуальные эффекты ⭐

Модель: простая. Откройте новый чат. Это самая эффектная фаза: игра из набора квадратов превращается в атмосферную шахту.

Следуй ARCHITECTURE.md. Отредактируй index.html.

<task>
Фаза 4 — визуальные эффекты, простыми средствами:
1. Light: если игрок ниже строки 8 — после отрисовки мира залить экран
   радиальным градиентом с центром на буре: 0–120px прозрачный,
   к 260px — rgba(0,0,0,0.95), дальше чёрный. Один createRadialGradient, без offscreen canvas.
   Руда рисуется с shadowBlur 12 своего цвета, чтобы светиться в темноте.
2. FX.particles: обычный массив {x,y,vx,vy,life,color}, максимум 400.
   Крошка цвета блока при бурении (3 шт/кадр), 20 золотых искр при подборе руды.
3. FX.shake(power, time): случайный сдвиг камеры, затухает.
   Сдвиг ПРИМЕНЯЙ в Game.loop: прибавь к camera.x/y перед отрисовкой мира и вычти после.
4. FX.text("+$50", x, y): плывёт вверх и тает за 1 с.
5. Combo: подборы подряд за 1.5 с → множитель ×2, ×3…,
   по центру «COMBO ×N!», увеличивается и тает.
   Множитель умножает цену руды, которая идёт в cargoValue, и число во «+$».
Добавь не больше 90 строк.
</task>

<rules>
- Читай только ARCHITECTURE.md и index.html. Другие файлы не открывай.
- Вноси точечные правки. НЕ переписывай файл целиком.
- Не запускай команды и сервер, не создавай других файлов.
- Без объяснений. В конце одна строка: «Готово: <что сделано>».
</rules>

Проверка: обновите страницу и копайте вниз. Под землёй темно, вокруг бура светит фонарь, руда светится, при бурении летит крошка, при подборе руды — искры и «+$».

Фаза 5. Динамит, газ, лава и звук

Модель: простая. Откройте новый чат.

Следуй ARCHITECTURE.md. Отредактируй index.html.

<task>
Фаза 5:
- на старте у игрока 3 динамита (CONFIG.START_DYNAMITE); в HUD «Динамит: N [Space]»;
  если динамита нет — текст «Нет динамита: купи «8» на поверхности»;
- Space: положить динамит (мигающий красный квадрат), взрыв через 1.5 с:
  убрать блоки в радиусе 2, урон 30, если игрок в радиусе;
  60 частиц оранжевых и серых, FX.shake(12, 0.4), белая вспышка 0.1 с;
- газ (зеленоватый блок, генерируется с шансом 3% ниже строки 30):
  если взрыв задел газ — setTimeout(взрыв в этой клетке, 100);
- лава (ниже строки 150, шанс 4%): оранжевая и пульсирует; войти в неё — урон 30;
- Audio: ленивое создание AudioContext при первом нажатии клавиши;
  beep(freq, dur, type) — oscillator + быстрое затухание;
  noise(dur) — буфер белого шума с затуханием;
  бурение: beep(80, 0.05, 'sawtooth') раз в 0.1 с; подбор: beep(400 + цена, 0.15, 'sine');
  взрыв: noise(0.5).
Добавь не больше 80 строк.
</task>

<rules>
- Читай только ARCHITECTURE.md и index.html. Другие файлы не открывай.
- Вноси точечные правки. НЕ переписывай файл целиком.
- Не запускай команды и сервер, не создавай других файлов.
- Без объяснений. В конце одна строка: «Готово: <что сделано>».
</rules>

Проверка: включите звук. Найдите зелёный газ (глубже 30 метров), положите рядом динамит (Space) и отойдите — должна пройти цепная реакция взрывов с тряской экрана.

Фаза 6. Финал

Модель: простая. Откройте новый чат.

Следуй ARCHITECTURE.md. Отредактируй index.html.

<task>
Фаза 6:
- на дне блок «Сердце горы» 3×3 в центре: пульсирует золотым, $10000;
  когда его добыли — overlay("ТЫ НАШЁЛ СЕРДЦЕ ГОРЫ!", "$ итог, Enter — заново")
  и салют: каждые 0.3 с 40 разноцветных частиц в случайной точке экрана;
- клавиша G (для демо): +$5000 и полный бак;
- баланс в CONFIG: топлива хватает примерно на 40 строк вглубь и обратно.
Добавь не больше 40 строк.
</task>

<rules>
- Читай только ARCHITECTURE.md и index.html. Другие файлы не открывай.
- Вноси точечные правки. НЕ переписывай файл целиком.
- Не запускай команды и сервер, не создавай других файлов.
- Без объяснений. В конце одна строка: «Готово: <что сделано>».
</rules>

Проверка: нажмите G несколько раз, купите улучшения на поверхности и спуститесь к лаве. Клавиша G — «чит» для проверки, чтобы не копить деньги долго.

Готово

Игра собрана: один файл index.html, ноль зависимостей. Его можно отправить коллеге — откроется в любом браузере.

Что получилось: сильная модель потратила один запрос на архитектуру, а простая модель написала весь код короткими точечными правками. Чем точнее план и чем меньше лишнего мы просим, тем быстрее и надёжнее работает даже простая модель.

Дальше игру можно развивать своими промптами по тому же шаблону: новый чат, «Следуй ARCHITECTURE.md», задача в <task>, те же <rules> и лимит строк. Например, добавить новый тип руды, врагов или таблицу рекордов.

Техники промптинга

Подробнее о том, как писать промпты, — в инструкции «Как написать промпт».

Если что-то пошло не так

Дата обновления: 16 октября 2026