Вайбкодинг игр: как собрать первую браузерную игру

Вайбкодинг игр проще начать с маленькой браузерной задачи. Соберите в Codex Desktop один экран, одну механику, одну победу и один полный reset. Такой объём позволяет проверить правила, а не прятать ошибки за оформлением.

Какой проект реально закончить первым

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

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

Если Codex ещё не знаком, сначала полезно понять как пользоваться Codex на практике. Для игры важен не длинный первый промпт, а серия коротких задач с проверкой после каждой.

Canvas или Phaser: правило выбора

• Чистый HTML Canvas: берите для одного экрана, простых фигур, клавиатуры и минимального числа файлов.
• Phaser: берите, когда нужны сцены, загрузка ассетов, анимации, камера или готовая 2D-физика.
• Другой движок: выбирайте для 3D, консольных платформ или редактора уровней, если браузерный 2D-формат не подходит.
• Один HTML-файл: допустим для первого прототипа, но разделите код позже, когда механика подтверждена.

Phaser официально описывает себя как фреймворк для 2D-игр в браузере с Canvas и WebGL, а не как встроенный 3D-движок. Это честная граница выбора, подробнее в документации Phaser. Для маленькой игры Canvas снижает число зависимостей и упрощает поиск ошибки.

Шаг 1. Подготовить отдельную папку и спецификацию

Основной путь для большинства пользователей: десктопный Codex внутри приложения ChatGPT на Windows или macOS. Откройте отдельную пустую папку, а не рабочий проект. Официальная документация приложения ChatGPT описывает работу с Codex и проектами. CLI и расширение редактора оставьте на потом, если терминал вам не нужен.

Создайте файл GAME_SPEC.md. Он удерживает правила, когда вы меняете графику или просите новую функцию. В нём не нужен длинный сюжет. Нужны только состояния и проверяемые условия.

# Игра
Экран: один, 800x600, масштабируется по окну
Управление: стрелки или WASD
Механика: собрать 10 объектов и не коснуться препятствия
Победа: счёт 10
Поражение: одно столкновение
Reset: кнопка и клавиша R
Готово: нет ошибок console, цикл повторяется три раза

Попросите агента не писать код до короткого плана файлов и состояний. Затем создайте минимальный каркас без внешних картинок: фигуры проще проверить и у них нет вопросов с лицензией. Связь инструмента с методом разобрана в статье Codex для вайбкодинга.

По теме: Настройка Codex в 2026: приложение, config.toml, CLI и IDE

Шаг 2. Собрать игровой цикл по одному элементу

1. Создайте экран и объект игрока, убедитесь, что страница открывается.
2. Добавьте одно управление и проверьте границы экрана.
3. Добавьте объект цели и изменение счёта при касании.
4. Добавьте препятствие и состояние поражения.
5. Добавьте победу, поражение и единую функцию reset.
6. Только после рабочего цикла меняйте оформление, звук и число объектов.

Для Canvas цикл обычно строят на requestAnimationFrame(). В руководстве MDN показаны очистка, обновление и отрисовка кадра. Считайте движение через прошедшее время, иначе скорость зависит от частоты экрана.

Шаг 3. Проверять после каждой правки

Не оценивайте игру только по скриншоту. После каждого шага пройдите сценарий руками и откройте console браузера. Фиксируйте рабочую точку в системе версий или отдельной копией папки перед большой правкой. Если агент изменил несколько механик сразу, попросите вернуть минимальное изменение и снова пройти тест.

• Страница загружается без красных ошибок в console.
• Игрок не выходит за границы видимой области.
• Счёт меняется ровно один раз на событие.
• После победы и поражения управление не меняет скрытое состояние.
• Reset возвращает счёт, позиции, таймер и объекты в исходное состояние.
• Три полных цикла подряд дают одинаковые правила.
• Изменение размера окна не прячет управление и перезапуск.

Диагностика по симптому

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

• Белый экран: проверьте первую ошибку в console и Network.
• Клавиши не работают: проверьте фокус и обработчики.
• Скорость меняется: используйте delta time и ограничьте большой шаг.
• Столкновение ложное: временно нарисуйте hitbox.
• Reset неполный: возвращайте все изменяемые значения одной функцией.
• После правки стало хуже: откатите последний шаг и найдите минимальную причину.

По теме: Codex: версии продукта, моделей и приложений в 2026 году

Когда нужен локальный сервер

Один самодостаточный HTML-файл иногда открывается напрямую, но ассеты и модули ограничиваются правилами браузера. Phaser рекомендует локальный сервер, это объяснено в официальной инструкции настройки. Попросите Codex запустить сервер внутри папки проекта и сообщить локальный адрес.

python3 -m http.server 8000
# открыть http://127.0.0.1:8000/

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

Шаг 4. Подготовить публикацию HTML5-игры

Перед публикацией замените абсолютные пути на относительные, положите index.html в корень и проверьте архив в чистой папке. itch.io принимает один HTML-файл или ZIP с index.html и ресурсами. В официальной инструкции HTML5 uploads указаны относительные пути и чувствительность имён к регистру.

1. Скопируйте финальную сборку в пустую папку.
2. Откройте её через локальный сервер и пройдите полный цикл.
3. Убедитесь, что файлы загружаются относительными путями.
4. Создайте ZIP с index.html в корне архива.
5. Загрузите как HTML Game и откройте предварительный просмотр.
6. Проверьте управление, reset, размер экрана и console на опубликованной странице.

По теме: Вайбкодинг: какое приложение поставить и в каком порядке (2026)

Что добавить во вторую версию

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

Roblox, Minecraft и Telegram-игры требуют других правил. Например, отдельный разбор Codex и Roblox касается Luau и среды Roblox, он не заменяет браузерный HTML5-путь.

Когда этот способ не подходит

Браузерный прототип не подходит большой 3D-игре, консольному релизу, постоянному сетевому миру и проекту с платежами или персональными данными без инженерного ревью. ИИ может собрать механику и найти ошибку, но не гарантирует интересный баланс, законность ассетов, скорость на всех устройствах и безопасность сервера.

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

Нужно ли знать JavaScript для первой игры?

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

Что выбрать для начала, Canvas или Phaser?

Canvas подходит одному экрану и простым фигурам. Phaser полезен для сцен, ассетов, анимаций и готовой 2D-физики. Выбирайте по обязательным функциям.

Можно ли сразу сделать игру для телефона?

Можно добавить touch и адаптивный экран, но сначала примите цикл на одном устройстве. Затем отдельно проверьте размеры, жесты, поворот и скорость на реальном телефоне.

Нужны ли картинки и музыка?

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