Вайб-кодинг: Быстрое прототипирование казуальных игр с ИИ

Введение в вайб-кодинг: выбор ИИ-ассистента и настройка среды разработки

Добро пожаловать в курс «Вайб-кодинг: Быстрое прототипирование казуальных игр с ИИ». Это первая статья, и она заложит фундамент для всего вашего дальнейшего пути. Мы не будем тратить часы на настройку сложных компиляторов или изучение синтаксиса наизусть. Мы займемся тем, что называется вайб-кодингом.

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

Термин «vibe coding» (вайб-кодинг) стал популярным в сообществе разработчиков благодаря Андрею Карпатому (бывшему директору по ИИ в Tesla). Суть этого подхода заключается в смене парадигмы: вы перестаете быть просто «писателем кода» и становитесь «менеджером кода» или архитектором.

В традиционном программировании вы тратите 80% времени на написание синтаксиса, поиск пропущенных точек с запятой и чтение документации. В вайб-кодинге вы тратите 80% времени на идею, логику и дизайн, а написание кода делегируете нейросетям.

> Vibe coding — это состояние потока, когда вы управляете ИИ, как дирижер оркестром, создавая работающие прототипы со скоростью мысли, а не со скоростью печати.

!Иллюстрация концепции вайб-кодинга: человек задает направление, а ИИ выполняет техническую работу.

Почему это идеально для казуальных игр?

Казуальные игры строятся на простых, понятных механиках. «Три в ряд», «Flappy Bird», «Doodle Jump» — все эти хиты имеют элементарную логическую структуру. ИИ великолепно справляется с генерацией таких изолированных механик. Вам не нужно строить сложную архитектуру корпоративного уровня; вам нужно, чтобы было весело и быстро.

Выбор вашего напарника: Обзор ИИ-моделей

Ваш главный инструмент — это Большая Языковая Модель (LLM). На момент написания этого курса на рынке есть несколько лидеров, но для кодинга подходят не все.

1. Claude 3.5 Sonnet (Anthropic)

2. GPT-4o (OpenAI)

3. o1-preview / o1-mini (OpenAI)

Наш выбор для курса: Мы будем ориентироваться на Claude 3.5 Sonnet как на основного генератора кода, так как он дает наиболее чистый и рабочий результат с первой попытки.

Среда разработки: IDE нового поколения

Забудьте про «Блокнот» или чистый VS Code с кучей плагинов, которые нужно настраивать полдня. Для вайб-кодинга нам нужен инструмент, в который ИИ интегрирован нативно.

Cursor — ваш новый лучший друг

Cursor — это форк (ответвление) популярного редактора VS Code. Это значит, что если вы работали в VS Code, вы уже умеете работать в Cursor. Все плагины и настройки совместимы. Но главное отличие — встроенная панель ИИ (Command+K / Ctrl+K).

Почему Cursor меняет правила игры:

Настройка рабочего окружения

Давайте подготовим все необходимое для старта. Это займет не более 10 минут.

Шаг 1: Установка Cursor

Шаг 2: Выбор стека технологий

Наш выбор — HTML5 + Canvas API + JavaScript.

* HTML5: Основа любой веб-страницы. * Canvas: «Холст», на котором мы будем рисовать игру пиксель за пикселем. * JavaScript: Язык, который оживит игру.

Этот стек позволяет запускать игру прямо в браузере за секунду. Никаких установок, никаких ожиданий.

Шаг 3: Первый проект

В Cursor создайте новую папку для вашего проекта, например vibe-game-01. Внутри создайте всего один файл: index.html.

Теперь магия вайб-кодинга. Нажмите Ctrl+K (или Cmd+K на Mac) и напишите следующий промпт:

> «Создай базовый шаблон HTML5 с элементом Canvas на весь экран. Добавь скрипт, который рисует красный квадрат по центру экрана.»

Cursor сгенерирует код. Нажмите Accept.

Немного теории: Физика в играх

Даже в вайб-кодинге важно понимать, что мы просим ИИ сделать. Казуальные игры часто строятся на движении. Чтобы объект двигался плавно, мы используем простую физическую формулу обновления позиции.

В каждом кадре игры новая позиция объекта рассчитывается так:

Где: * — новая позиция объекта (координаты X или Y). * — текущая позиция объекта. * — скорость движения (пиксели в секунду). * — (дельта времени) время, прошедшее с последнего кадра, обычно измеряется в секундах.

Почему это важно? Если мы просто напишем x = x + 5, то на мощном компьютере с частотой 144 кадра в секунду герой улетит за экран мгновенно, а на старом ноутбуке будет ползти как черепаха. Использование делает игру одинаковой на всех устройствах.

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

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

Промпт-инжиниринг для игр

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

Пример плохого промпта: > «Сделай мне игру как Марио».

Пример хорошего промпта (вайб-промпта): > «Создай прототип платформера. У нас есть герой (зеленый квадрат 32x32), который может бегать влево/вправо и прыгать. Добавь простую гравитацию и платформу внизу экрана, чтобы он не падал. Используй стрелки для управления.»

Заключение

Вы настроили среду: у вас есть Cursor и понимание, что Claude 3.5 Sonnet — ваш главный помощник. Вы выбрали легкий стек HTML5/JS, который позволит видеть результат мгновенно. Вы узнали, что даже простая физика требует правильного подхода с .

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

Генерация Core Loop: превращаем текстовое описание механики в рабочий код

В предыдущей статье мы настроили Cursor и выбрали Claude 3.5 Sonnet в качестве нашего ИИ-напарника. Мы также договорились, что не будем писать код вручную, а станем «архитекторами», управляющими процессом. Сегодня мы переходим к самому главному — сердцу любой игры.

Это сердце называется Core Loop (основной цикл).

Что такое Core Loop?

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

В вайб-кодинге нам не нужно писать цикл while(true) вручную. Нам нужно понимать его структуру, чтобы правильно ставить задачи ИИ. Игровой цикл состоит из трех фаз, которые повторяются бесконечно (обычно 60 раз в секунду):

!Визуальное представление бесконечного цикла работы игрового движка.

Практика: Создаем «Бесконечный Раннер»

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

Откройте ваш проект в Cursor. Если у вас остался код из прошлой статьи — отлично. Если нет, создайте пустой index.html.

Шаг 1: Первый вайб-промпт

Нажмите Ctrl+K (или Cmd+K) и введите следующий промпт. Обратите внимание на структуру: мы задаем роль, задачу и технические детали.

> «Ты разработчик игр. Напиши полный код для игры в одном файле index.html. Механика: бесконечный раннер. Есть герой (синий квадрат), который стоит на земле слева. Он может прыгать по нажатию Пробела. Реализуй гравитацию. Используй requestAnimationFrame для игрового цикла. Фон белый, земля — черная линия.»

Нажмите Generate (или Enter).

Шаг 2: Разбор магии (Update и Draw)

Cursor сгенерирует код. Давайте посмотрим, как ИИ реализовал цикл. Вы увидите функцию, похожую на gameLoop или update. Внутри неё происходит магия физики.

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

Математически это выглядит так:

Где: * — вертикальная скорость (пиксели в секунду). * — сила гравитации (ускорение свободного падения). * — время, прошедшее с прошлого кадра.

Затем обновляется позиция:

Где: * — новая координата по вертикали. * — текущая координата. * — текущая скорость. * — дельта времени.

Важный нюанс вайб-кодинга: Если герой падает слишком быстро или прыгает слишком низко, не пытайтесь менять формулы. Скажите ИИ: «Сделай гравитацию чуть слабее, а прыжок выше». Пусть он сам подберет коэффициенты и начальную скорость прыжка.

Шаг 3: Добавляем препятствия

У нас есть прыгающий квадрат, но нет игры. Нам нужны враги. В вайб-кодинге мы добавляем механики слоями. Не просите всё сразу.

Нажмите Ctrl+K снова (выделив весь код или просто находясь в файле) и напишите:

> «Добавь препятствия: красные прямоугольники, которые появляются справа за экраном и движутся влево. Они должны появляться с разным интервалом времени. Если герой касается препятствия — игра останавливается и выводится сообщение Game Over.»

ИИ сделает следующее:

Проверка столкновений (Collision Detection)

Для казуальных игр чаще всего используется простая проверка пересечения прямоугольников. ИИ напишет условие, которое проверяет, не налезли ли координаты героя на координаты врага.

Формула условия пересечения двух прямоугольников и выглядит так:

Где: * — координаты верхнего левого угла объекта A. * — ширина и высота объекта A. * — параметры объекта B. * — логическая операция И (AND).

Если все эти условия истинны одновременно, значит, объекты пересеклись.

!Иллюстрация принципа работы детекции столкновений через сравнение координат границ объектов.

Отладка «Вайба» (Game Feel)

Вы запустили код. Квадрат прыгает, враги едут. Но играть... неприятно. Это нормально. Первый прототип всегда «деревянный». Теперь начинается настоящий вайб-кодинг — настройка ощущений.

Вместо того чтобы искать в коде переменную jumpForce, вы пишете ИИ:

Работа с ошибками

Иногда ИИ ломает код. Например, препятствия перестали появляться. В Cursor есть кнопка «Fix» или вы можете просто написать в чат:

> «Препятствия перестали спавниться. Проверь функцию генерации врагов и исправь логику таймера».

Claude 3.5 Sonnet отлично умеет читать свой же код и находить логические дыры.

Итог: Ваш первый прототип готов

К концу этой статьи у вас должен быть файл index.html, который можно открыть в браузере и сыграть в примитивный, но работающий раннер.

Мы прошли путь:

В этом и суть метода: вы не тратите время на написание бойлерплейта (шаблонного кода), вы сразу занимаетесь геймплеем.

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

Визуал и UI за минуты: интеграция графики и интерфейсов через промпты

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

В традиционной разработке на этом этапе вы бы пошли искать художника или часами рисовали бы пиксель-арт в редакторе. В вайб-кодинге мы поступаем иначе. Мы попросим ИИ стать нашим художником и UI-дизайнером.

Сегодня мы превратим «геометрический тест» в красивую игру, добавим анимацию и удобный интерфейс, не выходя из редактора кода.

От примитивов к спрайтам

В компьютерной графике 2D-изображение персонажа или объекта называется спрайтом (sprite). Вместо того чтобы рисовать ctx.fillRect (залитый прямоугольник), мы хотим рисовать картинку.

Как получить графику без художника?

У нас есть два пути вайб-кодинга для вставки графики в наш единственный файл index.html:

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

Промпт для создания героя

Откройте ваш проект в Cursor. Выделите функцию, где рисуется герой (обычно это drawHero или часть функции draw), нажмите Ctrl+K и введите:

> «Замени синий квадрат на процедурную отрисовку пиксель-арт робота. Используй набор маленьких прямоугольников (fillRect), чтобы нарисовать тело, голову, ноги и глаза. Цвет робота — серый с неоновыми вставками. Он должен вписываться в размеры 32x32.»

ИИ заменит одну строку fillRect на 10-15 строк кода, которые рисуют детализированного робота.

!Трансформация примитива в сложный рисунок с помощью кода.

Оживляем игру: Анимация

Статичная картинка, скользящая по экрану, выглядит неестественно. Нам нужна анимация бега. Анимация — это просто быстрая смена кадров (спрайтов).

Чтобы реализовать это, нам нужно ввести переменную времени или счетчик кадров.

Математика анимации

Чтобы понять, какой кадр показывать в данный момент, мы используем операцию деления с остатком (модуль).

Формула выбора текущего кадра:

Где: * — индекс текущего кадра (начинается с 0). * — глобальное время игры или счетчик кадров (frame count). * — длительность одного кадра (как долго показывать одну картинку). * — округление вниз до целого числа. * — общее количество кадров в анимации. * — оператор взятия остатка от деления на . Это зацикливает анимацию (0, 1, 2, 0, 1, 2...).

Промпт для анимации

Не пишите формулу сами. Попросите ИИ:

> «Добавь анимацию бега герою. Сделай два состояния: ноги вместе и ноги врозь. Меняй их каждые 10 игровых кадров, используя глобальный счетчик кадров. Обнови функцию отрисовки, чтобы она учитывала текущее состояние.»

Теперь ваш робот будет перебирать ножками, пока бежит.

Создание глубины: Параллакс-эффект

Ничто так не добавляет «вайба» 2D-игре, как параллакс (parallax scrolling). Это эффект, когда фон движется медленнее, чем передний план, создавая иллюзию глубины.

Нам нужно разделить фон на слои:

Попросите ИИ:

> «Добавь красивый фон в стиле киберпанк. Реализуй эффект параллакса: дальние небоскребы должны двигаться со скоростью 0.2 от скорости игрока, а ближние строения — со скоростью 0.5. Используй процедурную генерацию для зданий (случайная высота).»

UI: Интерфейс поверх Canvas

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

В веб-играх лучший способ сделать UI — это использовать обычные HTML-элементы поверх Canvas.

Структура слоев

Представьте вашу игру как слоеный пирог:

Мы используем CSS Absolute Positioning, чтобы наложить интерфейс поверх игры.

!Структура наложения HTML-интерфейса поверх игрового Canvas.

Промпт для Game Over экрана

Давайте заменим скучный alert('Game Over') на стильное окно.

> «Создай экран Game Over с помощью HTML и CSS. Он должен быть скрыт по умолчанию (display: none). Он должен быть по центру экрана, иметь полупрозрачный черный фон, крупный текст "GAME OVER" неоновым шрифтом и кнопку "Restart". Когда герой сталкивается с препятствием, покажи этот экран вместо alert. При нажатии на Restart перезапусти игру.»

ИИ сгенерирует:

Полировка визуального стиля

Теперь, когда у нас есть структура, можно заняться «украшательством» через уточняющие промпты. В вайб-кодинге мы часто используем прилагательные настроения.

Примеры промптов для улучшения визуала:

«Добавь эффект свечения (shadowBlur) для всех неоновых элементов».* «Сделай так, чтобы при прыжке за героем оставался шлейф из частиц (particles)».* «Добавь легкую тряску камеры (screen shake) при столкновении».*

Частицы (Particles)

Система частиц — это секретный ингредиент сочности игр. Это просто массив маленьких квадратиков, которые разлетаются в разные стороны и исчезают.

Попробуйте такой промпт:

> «Реализуй простую систему частиц. Когда герой приземляется на землю, создавай 5-10 маленьких белых частиц под ногами, которые разлетаются вверх и исчезают (уменьшается opacity).»

Итог

Мы превратили прототип в игру. Мы узнали, что:

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

Game Feel и полировка: добавление эффектов и сочности через итеративное общение с ИИ

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

Когда робот прыгает, это просто смена координат. Когда он врезается, игра просто останавливается. Нет веса, нет удара, нет жизни.

Сегодня мы займемся тем, что геймдизайнеры называют Game Feel (ощущение игры) или Juice (сочность). Мы научимся просить ИИ добавлять эффекты, тряску экрана, частицы и даже генерировать звук кодом, чтобы превратить прототип в продукт.

Что такое «Сочность» (Juice)?

Представьте, что вы кусаете яблоко. Вы слышите хруст, чувствуете сопротивление кожуры, брызги сока. Это обратная связь (feedback). В играх «сочность» — это аудиовизуальная обратная связь на действия игрока.

> Game Feel — это невидимое искусство, которое заставляет игрока чувствовать вес виртуальных объектов и удовлетворение от взаимодействия с ними.

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

Эффект 1: Тряска экрана (Screen Shake)

Ничто так не передает силу удара, как тряска камеры. В нашем случае, так как мы используем Canvas, мы будем трясти весь мир.

Логика реализации

Тряска экрана — это временное смещение координат отрисовки всего контекста Canvas на случайную величину.

Математически позиция камеры в момент тряски описывается так:

Где: * — итоговая координата отрисовки (X или Y). * — исходная координата объекта в мире. * — случайное число в диапазоне от -1 до 1. * — интенсивность тряски (амплитуда), которая должна затухать со временем.

!Схема работы эффекта Screen Shake: случайное смещение координат отрисовки

Промпт для ИИ

Не пишите код смещения сами. Попросите ИИ внедрить «Менеджер тряски».

Промпт: > «Добавь эффект тряски экрана (Screen Shake). Создай переменную shakeIntensity. В игровом цикле, перед отрисовкой всего, сдвигай контекст canvas (ctx.translate) на случайную величину, зависящую от shakeIntensity, а после отрисовки возвращай обратно. Уменьшай shakeIntensity на 10% в каждом кадре, пока она не станет нулем. Вызывай тряску силой 20 пикселей при столкновении с препятствием.»

Теперь, когда робот врезается, экран дернется, создавая физическое ощущение удара.

Эффект 2: Продвинутые частицы (Particles)

В прошлой статье мы сделали простые частицы при беге. Теперь давайте добавим взрывы. В вайб-кодинге важно не перегрузить код сложными системами, поэтому мы используем простую модель «выстрелил и забыл».

Жизненный цикл частицы

Каждая частица — это объект, который живет по формуле:

Где: * — новая прозрачность частицы (opacity). * — текущая прозрачность. * — скорость затухания (decay rate). * — время кадра.

Когда становится меньше 0, частица удаляется из массива.

Промпт для взрыва

Промпт: > «Улучши систему частиц. Создай функцию createExplosion(x, y), которая спавнит 30 частиц оранжевого и желтого цвета. Они должны разлетаться во все стороны (случайный угол) с разной скоростью. Добавь им гравитацию, чтобы они падали дугой. Используй это при Game Over.»

ИИ сам напишет тригонометрию для разлета частиц по кругу ( и ). Вам нужно лишь наслаждаться фейерверком.

Эффект 3: Звук без ассетов (Web Audio API)

Это самый интересный трюк вайб-кодинга. Обычно для звуков нужно искать mp3-файлы, загружать их, следить за авторскими правами. Но браузеры имеют встроенный синтезатор — Web Audio API.

Мы можем попросить ИИ написать код, который генерирует звуки на лету. Это идеально для ретро-игр и прототипов: один файл, никаких внешних зависимостей.

Как это работает?

Звук — это волна. Мы создаем осциллятор (генератор волны), задаем ему частоту (высоту тона) и тип волны (синусоида, квадрат, пила).

Промпт для синтезатора

Промпт: > «Создай простой звуковой менеджер на Web Audio API. Мне не нужны внешние файлы. Реализуй функцию playJumpSound(), которая генерирует короткий звук

Финальная сборка: отладка ошибок и запуск прототипа на мобильном устройстве

Поздравляю! Вы прошли огромный путь. Мы начали с пустой папки и идеи, настроили Cursor и Claude 3.5 Sonnet, создали игровой цикл, добавили графику, анимацию и сочные эффекты. У вас есть игра. Но пока она живет только на вашем компьютере.

Казуальные игры — это территория смартфонов. Никто не будет играть в «Flappy Bird» или бесконечный раннер, сидя за столом с клавиатурой. Эти игры созданы для очередей, метро и диванов.

В этой финальной статье курса мы превратим ваш ПК-прототип в полноценную мобильную веб-игру, которую можно скинуть другу ссылкой в мессенджере.

Проблема управления: От клавиатуры к тачу

Сейчас ваш герой прыгает по нажатию Space (Пробел). На телефоне нет пробела. Если вы откроете игру на смартфоне прямо сейчас, вы увидите красивую картинку, но не сможете ничего сделать.

Нам нужно добавить обработку касаний (Touch Events). В браузере события мыши (click) и события касания (touchstart) — это разные вещи. Для вайб-кодинга нам не нужно изучать их глубокую структуру, нам нужно просто объяснить задачу ИИ.

Промпт для адаптации управления

Откройте ваш проект и напишите ИИ следующий запрос:

> «Адаптируй управление для мобильных устройств. Сейчас прыжок работает по нажатию Space. Сделай так, чтобы герой прыгал при касании в любой точке экрана (событие touchstart). Сохрани управление с клавиатуры для тестов на ПК. Также добавь preventDefault, чтобы касание не вызывало прокрутку страницы или зум.»

ИИ добавит слушатель событий, который выглядит примерно так: window.addEventListener('touchstart', jump).

Важный момент: preventDefault() — это команда, которая запрещает браузеру выполнять стандартное действие. Без нее при частых тапах по экрану (как это бывает в играх) браузер может подумать, что вы хотите увеличить масштаб страницы (double-tap zoom).

Адаптивный экран: Размер имеет значение

Скорее всего, в вашем коде сейчас жестко прописаны размеры Canvas, например width=800 и height=600. На телефоне это будет выглядеть либо слишком мелко, либо не поместится в экран.

Нам нужно сделать игру резиновой (responsive).

Математика масштабирования

Чтобы игра выглядела одинаково хорошо на iPhone и на широком мониторе, нам нужно правильно рассчитать соотношение сторон (Aspect Ratio).

Соотношение сторон рассчитывается по формуле:

Где: * — соотношение сторон (Aspect Ratio). * — ширина экрана в пикселях. * — высота экрана в пикселях.

Если экран телефона узкий и высокий (портретный режим), будет меньше 1 (например, 0.5). Если мы перевернем телефон (ландшафтный режим), станет больше 1 (например, 2.0).

!Адаптация игрового поля под ориентацию устройства

Промпт для ресайза

Попросите ИИ:

> «Сделай Canvas адаптивным. Он должен занимать 100% ширины и 100% высоты окна браузера. При изменении размера окна (событие resize) обновляй размеры Canvas. Убедись, что при изменении размера игра не перезапускается, а просто подстраивает масштаб отрисовки.»

Теперь, если вы сожмете окно браузера на компьютере, игра должна подстроиться под новые рамки.

Мета-теги: Запрещаем браузеру умничать

Мобильные браузеры любят помогать пользователю: они увеличивают текст, позволяют зумить щипком и подсвечивают нажатые элементы синим цветом. Для игры это смерть.

Нам нужно добавить специальный HTML-тег <meta name="viewport"> в секцию <head>.

Не пишите его руками. Скажите ИИ:

> «Добавь необходимые мета-теги для мобильных устройств в head. Запрети масштабирование (user-scalable=no), скрой интерфейс браузера, если возможно, и установи ширину viewport равной ширине устройства.»

Это превратит веб-страницу в подобие нативного приложения.

Отладка без телефона: Chrome DevTools

Вам не нужно каждый раз заливать игру на сервер, чтобы проверить, как она выглядит на iPhone 14. В браузере Google Chrome есть встроенный эмулятор.

Теперь вы можете кликать мышкой, и браузер будет эмулировать касания пальцем (touch events).

!Использование режима Device Toolbar в браузере Chrome

Типичные ошибки мобильной верстки

В режиме эмуляции проверьте:

Если игра тормозит, используйте такой промпт: > «Оптимизируй производительность. Если устройство мобильное (проверь userAgent), уменьши количество частиц в 2 раза и отключи сложные эффекты теней (shadowBlur).»

Публикация: Netlify Drop

Мы подошли к самому приятному моменту. Как показать игру миру? Нам не нужны сложные сервера, FTP или командная строка git. Мы воспользуемся сервисом Netlify Drop.

Это идеальный инструмент для вайб-кодинга: вы просто перетаскиваете папку, и она становится сайтом.

Пошаговая инструкция

Всё! Ваша игра в интернете. Скопируйте ссылку и отправьте её себе в Telegram или WhatsApp, чтобы открыть на телефоне.

Финальная полировка: Иконка и название

Когда вы скинете ссылку другу, мессенджер попытается подгрузить картинку-превью. Если её нет, ссылка будет выглядеть скучно. А на вкладке браузера будет просто имя файла.

Давайте добавим последние штрихи.

Промпт: > «Добавь Open Graph мета-теги. Название: "Cyber Runner AI". Описание: "Моя первая игра, созданная с помощью нейросетей". Картинку-превью пока не добавляй, оставь заглушку.»

Заключение курса

Поздравляю! Вы только что прошли путь от «я не умею программировать» до «у меня есть своя мобильная игра в интернете».

Давайте вспомним, чему мы научились:

Теперь вы обладаете суперсилой. Любая идея, которая придет вам в голову — будь то открытка для девушки, калькулятор расходов или очередная вариация «2048» — может быть реализована за вечер.

Не останавливайтесь. Экспериментируйте с промптами. Ломайте код и просите ИИ починить его. И главное — ловите вайб создания.

Удачи в ваших проектах!