Игру теперь собирают за час: как завайбкодить браузерную игру с управлением телом за 10 минут
Ещё пять лет назад «сделать игру» означало студию, движок, месяцы работы и бюджет. Сегодня рабочий прототип с управлением телом через камеру собирается за один вечер — прямо в браузере, без установки и без магазина приложений. Мы это не предполагаем — мы это делаем. На скриншоте выше — наша игра: вы летите птицей над островами и управляете полётом руками перед камерой.
Ниже — зачем это бизнесу, на чём это собрано и пошаговая инструкция для вайбкодеров: какие промпты писать и в каком порядке, чтобы получить первый играбельный прототип минут за 10.
Почему мир игр меняется
Игра перестала быть «большим проектом». Она становится форматом общения — как сторис или мем. Нужно объяснить продукт, развлечь клиента на лендинге, провести необычную промо-акцию — вместо статичной страницы можно дать живой интерактив, где человек машет руками перед камерой и управляет полётом птицы.
Та же волна накрывает интерфейсы. Мышь и тап — не предел. Камера видит тело, руки, лицо, а браузер уже умеет это обрабатывать в реальном времени. Управление жестами, дополненная реальность, «магия из ладони» — всё это работает на обычном телефоне, без приложения. Интерфейс будущего — не кнопки, а ты сам.
Что такое «завайбкодить»
Вайбкодинг — это когда идея превращается в работающий продукт за один заход, на скорости мысли: описал AI-ассистенту, что хочешь, он собрал из готовых кубиков, ты тут же проверил и попросил поправить. Не полгода разработки, а один вечер до играбельного результата.
Секрет не в том, что «код стал проще». Секрет в том, что тяжёлые технологии стали бесплатными и браузерными — их больше не надо изобретать, только грамотно соединить.
Стек, на котором это летает
- three.js — 3D-графика прямо в браузере: мир, острова, вода, облака, освещение. Никакого Unity, никакой установки.
- MediaPipe — компьютерное зрение от Google: камера в реальном времени считывает скелет тела, руки, лицо. Наклонили руки — птица кренится, взмахнули — набирает скорость.
- WebAudio — звук и музыка генерируются кодом на лету, без единого аудиофайла.
- Чистый JavaScript + HTML — ни тяжёлого движка, ни сборки. Открывается по ссылке и сразу работает на компьютере и телефоне.
Всё это — открытые бесплатные инструменты. Мощь, которая раньше требовала команды, теперь помещается в папку на 25 мегабайт.
Как завайбкодить такую игру за 10 минут
Что нужно: AI-ассистент для кода (Claude Code, Cursor или любой похожий), браузер Chrome, ноутбук с веб-камерой. Писать код руками не нужно — вы пишете промпты, ассистент пишет код.
Шаг 0 · Папка (30 секунд)
Создайте пустую папку, например bird-game, и откройте в ней ассистента.
Шаг 1 · Мир (≈2 минуты) — пишете это:
Сделай браузерную 3D-игру в одном файле index.html на three.js
(подключи через importmap с CDN, без сборщиков и npm).
Low-poly стиль: бесконечный океан, несколько зелёных островов
с песчаными берегами, небо с градиентом, low-poly облака, мягкий
свет. Камера от третьего лица за птицей: тело — шар, крылья —
плоские треугольники, крылья плавно машут. Птица летит вперёд
сама. Пока управление стрелками: влево/вправо — крен и поворот,
вверх/вниз — высота. Сверху HUD: FPS, скорость, высота.Запустите локальный сервер: npx serve . или python3 -m http.server и откройте ссылку. Стрелками проверьте, что птица летит.
Шаг 2 · Управление телом через камеру (≈3 минуты) — потом это:
Добавь управление телом через веб-камеру на MediaPipe
(@mediapipe/tasks-vision, PoseLandmarker, с CDN).
Логика:
- руки в стороны = полёт;
- наклон линии между запястьями = крен и поворот птицы;
- запястья выше плеч = набор высоты, ниже плеч = снижение;
- резкий взмах руками вниз = ускорение на 2 секунды.
Сглаживай значения, чтобы птица не дёргалась. Клавиша C —
калибровка нейтральной позы. В углу маленькое превью камеры
со скелетом. Стрелки оставь как запасной вариант.
Внизу экрана подсказка по управлению.Разрешите доступ к камере и помашите руками. Если реакция слишком резкая или вялая — просто напишите ассистенту «чувствительность крена в 2 раза меньше».
Шаг 3 · Геймплей (≈2 минуты) — дальше это:
Добавь геймплей: в воздухе висят золотые кольца и монеты.
Пролетел через кольцо — +10 и короткое ускорение, собрал
монету — +1. Счёт и рекорд (localStorage) — в плашке сверху
по центру. Столкновение с водой или островом — мягкий отскок
и минус скорость, без game over. Esc — пауза.Шаг 4 · Звук и живость (≈2 минуты) — и это:
Добавь звук только через WebAudio, без аудиофайлов:
ветер, громкость которого зависит от скорости, «дзынь»
на монетах, аккорд на кольцах, мягкая фоновая музыка.
Частицы при сборе монет. Звук стартует после первого клика
(ограничение браузеров). Проверь, что держится 60 FPS.Шаг 5 · Телефон и публикация (≈1 минута) — финал:
Адаптируй под телефон: полноэкранный режим, фронтальная
камера, крупные элементы HUD, на слабых устройствах —
меньше облаков и полигонов. Проверь, что всё работает
просто как статика, без сервера.Залейте папку на любой статический хостинг с HTTPS (Netlify, Vercel, GitHub Pages или свой). Важно: браузер даёт доступ к камере только по https:// или на localhost, поэтому по file:// и по голому http камера не заработает.
Если что-то сломалось
- Чёрный экран — откройте консоль (F12), скопируйте ошибку и вставьте ассистенту как есть: «вот ошибка, почини».
- Камера не включается — проверьте, что открыто по
localhostилиhttps, и что доступ к камере разрешён в браузере. - Тормозит — «сократи количество полигонов и облаков в 2 раза, отключи тени».
- Одна правка — один промпт. Короткие итерации быстрее одного огромного ТЗ.
Что это даёт бизнесу
Скорость меняет экономику. Раньше интерактив был роскошью — теперь это инструмент, который окупается за один запуск: вирусная промо-игра, необычный лендинг, обучающий тренажёр, презентация продукта, которую хочется потрогать. То, что вчера стоило как рекламная кампания, сегодня собирается за вечер.
Прототип за 10 минут — это старт. Доводка до продакшна — брендинг, стабильная работа на разных телефонах, аналитика, сбор заявок прямо из игры — занимает дни, а не месяцы. Мы строим такие вещи под задачу бизнеса — от идеи до работающей ссылки. Если у вас есть продукт, который хочется показать не текстом, а действием, — это ровно тот случай.
Расскажите свою идею — и мы соберём из неё живой интерактив.