Вайбкодинг ігор: від задуму до власної гри з ChatGPT, Claude та Gemini

Який ШІ обрати для створення гри

Спочатку розділимо три речі. Модель генерує відповіді; агент або середовище дає їй можливість читати файли, змінювати проєкт і запускати перевірки; ігровий рушій чи бібліотека малює сцену та обробляє гру. Тому порівнювати Cursor і Gemini як два однакові «рушії» некоректно. Вибираємо робочий процес.

Можливості нижче звірено з офіційною документацією 20 жовтня 2026 року. Рекомендації — редакційний вибір сценарію, а не результат змагання моделей на однаковому тесті. Доступні функції й ліміти залежать від акаунта та тарифу.

Першоджерела: OpenAI: браузерні ігри, Claude Code, Claude Artifacts, Google AI Studio Build, Cursor Agent.

Три робочі комбінації

• Перший проєкт: один доступний чат, один HTML-файл, прості фігури замість графічного пакета. Проси повний файл і перевіряй кожну версію.
• Проєкт із розвитком: Codex, Claude Code або Cursor у папці з Git. Один агент вносить зміни, ти приймаєш роботу за конкретними критеріями.
• Є кілька ШІ: основний інструмент реалізує, інший шукає слабкі місця у правилах і перевірках. Другій моделі передавай актуальні файли й бриф. Збіг двох відповідей не є доказом правильності.

Не перемикай інструмент після кожного невдалого запиту. Спершу уточни проблему й передай потрібний контекст. Новий чат без актуального коду часто «виправляє» версію, якої вже немає.

1. Ідея: одна дія, одна перешкода, одна причина повторити

Для наскрізного прикладу візьмемо «Нічний кур’єр»: гравець переміщується між трьома доріжками, збирає світлячки й оминає калюжі протягом 60 секунд. Це навчальний задум редакції, не готова конкурсна робота. Початкові числа нижче — гіпотези для тестування, а не «ідеальний баланс».

Основна дія — вчасно змінити доріжку. Рішення — ризикнути заради світлячка чи залишитися в безпеці. Повторна спроба — шанс перевершити свій рахунок. Такий короткий цикл легше довести до завершення, ніж відкритий світ із торгівлею, сюжетом і мультиплеєром.

Допоможи спроєктувати маленьку браузерну 2D-гру «Нічний кур’єр».
Гравець змінює одну з трьох доріжок, збирає світлячки, уникає калюж. Раунд — 60 секунд, три помилки завершують спробу.
Спочатку НЕ пиши код. Опиши мету, керування, рахунок, початок і кінець раунду. Запропонуй одну цікаву дилему та три ризики нудного або несправедливого геймплею.
Скороти задум до найменшої версії, у яку можна зіграти. Без акаунтів, мережі, магазину й зовнішніх API.
Дай п’ять перевірюваних критеріїв готовності.

Що має залишитися після кроку: короткий бриф із правилами та межами. Якщо ти не можеш пояснити гру одним реченням, ще зарано просити ШІ писати сотні рядків.

2. Маршрут новачка: перша гра в одному HTML

Проси звичайний HTML із вбудованими CSS і JavaScript. Для цієї маленької гри достатньо Canvas — поверхні, на якій браузер малює сцену. Це наш вибір для простого старту: менше файлів і залежностей, які можуть загубитися. Він не означає, що будь-яку велику гру варто складати в один файл.

Реалізуй узгоджений «Нічний кур’єр» одним файлом index.html: HTML, CSS, JavaScript і Canvas без бібліотек та зовнішніх ресурсів.
Три доріжки. Керування: стрілки або A/D, на телефоні — великі екранні кнопки. Один натиск змінює рівно одну доріжку. Персонаж не виходить за межі.
Світлячок дає 1 бал і зникає; калюжа забирає 1 життя лише один раз. Початково 3 життя. Раунд закінчується через 60 секунд або після втрати життів. Не створюй одночасно непрохідну стіну перешкод.
Додай старт із поясненням, паузу, результат і кнопку «Ще раз». Перезапуск скидає всі об’єкти, рахунок, час та натиснуті клавіші. При втраті фокуса гра стає на паузу.
Спочатку лише прості фігури, без музики й декору. Усі написи українською.
Гра має працювати автономно в sandbox iframe без allow-same-origin: без localStorage, cookies, fetch, CDN, workers, API-ключів і сервера.
Видай повний файл для завантаження. Якщо можеш запустити його — перевір старт, програш, завершення за часом і три перезапуски. Чітко відділи виконані перевірки від рекомендованих.

Завантаж файл. Якщо сервіс показує лише код, попроси сформувати файл; запасний шлях — скопіювати повний згенерований текст у звичайний текстовий редактор і зберегти як index.html у UTF-8. Переконайся, що назва не закінчується на .html.txt. Відкрий у браузері. Для цього самодостатнього варіанта локальний сервер не потрібен.

Пройди весь раунд і навмисно програй. Якщо працює лише красиве меню, крок не завершено. Збережи справну копію, наприклад game-v01.html. Лише тоді додавай наступну можливість.

3. Маршрут розробника: агент, репозиторій і контроль змін

Якщо вже працюєш із проєктами, починай із репозиторію. Для кількох сцен, спрайтів і зіткнень можна використати Phaser — бібліотеку для браузерних 2D-ігор. Її навчальний приклад показує завантаження ресурсів, сцену та взаємодії. Зафіксуй конкретну версію: приклад із документації іншої версії може не відповідати твоєму API.

Розділи правила гри, керування та малювання. Для «Кур’єра» стан містить доріжку, життя, рахунок, об’єкти й залишок часу. Зміна оформлення не повинна змінювати підрахунок балів. Перехід menu → playing → paused → finished має бути явним; перезапуск створює чистий стан.

Прочитай поточний проєкт і бриф «Нічного кур’єра». Спочатку запропонуй план, межі модулів і команди запуску та збірки. Зафіксуй узгоджені правила у файлі інструкцій проєкту.
Працюй малими завершеними змінами. Не додавай пакети без пояснення потреби. Розділи стан, введення й відображення. Швидкість не повинна залежати від частоти кадрів; після повернення з фонової вкладки не допускай стрибка симуляції.
Перевір інваріанти: зібраний предмет дає бал один раз; завершений раунд не змінює рахунок; перезапуск не дублює слухачі чи ігровий цикл.
Кожну зміну заверши звітом: що змінив, як перевірив, що не перевірено. Підготуй статичну вебзбірку з локальними ресурсами й відносними шляхами для нашого sandbox iframe. Без зовнішніх API та сервера під час гри.

Корисні перевірки тут — правила рахунку, одноразове зіткнення, скидання стану. Візуальний тест потрібен окремо: автоматична перевірка числа не покаже, що кнопка перекриває гравця. Перед великою зміною збережи робочу версію в Git, після — переглянь різницю й зіграй той самий сценарій.

Для Вайб-джему є особлива умова: весь власний код пише й виправляє ШІ. Досвідчений учасник може планувати, перевіряти, давати точні завдання й запускати збірку, але ручні правки коду не відповідають формату конкурсу. Це правило нашої події, а не загальне визначення розробки зі ШІ.

4. Від «працює» до «хочу ще раз»

Попроси знайому людину зіграти без твоїх пояснень. Подивися, чи вона розуміє мету, помічає зіткнення і знаходить повторний запуск. Запитання «було нормально?» мало допомагає. Краще: «У який момент стало незрозуміло?» або «Чому ти програв?»

У «Кур’єрі» спершу змінюй одну річ: відстань між перешкодами, швидкість чи ціну помилки. Якщо одночасно додати прискорення, нових ворогів і бонуси, буде складно зрозуміти, що покращило відчуття гри.

• Дія має відповідь: короткий спалах або звук при зборі, видима втрата життя при зіткненні.
• Поразка має причину: перешкода читається заздалегідь; випадкова генерація залишає шанс уникнути удару.
• Керування передбачуване: кнопка спрацьовує один раз, палець не закриває небезпечну зону, сторінка не прокручується замість гри.
• Повтор починається швидко: після завершення видно рахунок і одну зрозумілу кнопку.

Формулюй правки спостереженнями: «Після натискання праворуч герой іноді перескакує дві доріжки; потрібно одну» корисніше за «зроби керування приємнішим». Складність, довжину раунду й відстані підбирай грою, а не авторитетним тоном відповіді ШІ.

5. Графіка й звук: де генератори справді допомагають

Генератор зображень зручний для фону, обкладинки, портрета чи початкового варіанта спрайта. Але гарна ілюстрація ще не є готовою анімацією: кадри можуть відрізнятися розміром, позою або центром опори. Для першої гри прості геометричні об’єкти часто надійніші.

Спочатку визнач арт-напрям: камера зверху, темно-синій фон, бурштинові корисні предмети, блакитний герой, однакова товщина контуру. Зроби один контрольний ресурс, встав у гру й перевір читабельність у реальному розмірі. Тільки потім замовляй решту набору.

Створи один 2D-спрайт світлячка для гри з камерою зверху. Бурштинове світіння, темний чіткий контур, проста впізнавана форма, центр об’єкта в центрі кадру. Прозоре тло, без тексту, рамки, тіні на землі й сторонніх предметів. У грі ресурс показуватиметься приблизно 32×32 пікселі, тому він має читатися без дрібних деталей. Це один нерухомий спрайт, не аркуш анімації.

Перевір реальну прозорість, обрізку й розмір файлу. Зменшення картинки на екрані не зменшує обсяг завантаження. Проси агента оптимізувати ресурси й покласти їх у папку збірки, а не підставляти тимчасові посилання з чату.

Звук додавай після механіки: короткий сигнал збору й сигнал завершення, окрема кнопка вимкнення. Проси починати аудіо після дії гравця й перевіряй це у цільовому браузері. Для згенерованих або завантажених ресурсів збережи джерело та умови використання. Не підставляй чужих відомих персонажів і музику лише тому, що сервіс дозволив їх згенерувати.

6. Як виправляти гру зі ШІ, коли «все зламалося»

Не проси переписати всю гру після кожного збою. Повернися до останньої справної версії або локалізуй проблему. Передай актуальний файл, порядок дій, очікуваний і фактичний результат. Якщо є помилка в консолі, скопіюй її дослівно разом із назвою браузера.

У прикріпленій актуальній версії є помилка.
Кроки: почати раунд → втратити всі життя → натиснути «Ще раз» → рухатися праворуч.
Очікування: новий раунд із трьома життями та початковою швидкістю.
Фактично: після кожного перезапуску гра прискорюється.
Знайди причину в цьому файлі. Перевір дублювання ігрового циклу, таймерів і слухачів. Внеси найменше виправлення, не змінюй оформлення й правила. Повтори три перезапуски та поясни, які перевірки реально виконав. Якщо запуск недоступний, дай точний ручний сценарій перевірки.

Для складнішого проєкту корисне окреме рев’ю коду, створеного агентом. Проси перелік відтворюваних дефектів із наслідками, а не загальне схвалення. Остаточна перевірка — поведінка гри.

7. Готова збірка й участь у Вайб-джемі

У нашому конкурсі браузерних ігор зі ШІ можна показати результат і пограти в роботи інших. Участь безкоштовна, оголошений приз — 500 грн. Точні терміни, поточний етап і повні правила дивись у хабі: після завершення набору цей мінікурс залишиться навчальним маршрутом.

Майданчик приймає автономний HTML до 2 MiB або ZIP до 20 MiB. Для ZIP потрібен index.html у корені, до 200 файлів і до 40 MiB після розпакування. Файли мають бути готовими для браузера. Архів репозиторію з вихідними файлами та інструкцією «запустіть npm» не замінює вебзбірку.

У проєкті з інструментом збірки попроси агента виконати узгоджену команду й запакувати вміст готової папки зі всіма ресурсами. Фінальний запуск відбувається у захищеному вікні: без бекенду, зовнішніх CDN, API-ключів і мережевих сервісів. Якщо ти додавав ШІ-персонажа, який щоразу звертається до API, таку механіку треба переробити на автономну для цього конкурсу.

Контроль перед поданням

• З першого екрана зрозуміло, що робити та як керувати.
• Старт, виграш або завершення, програш, пауза й три перезапуски працюють.
• Рахунок не змінюється після кінця раунду; немає подвійного нарахування.
• Перевірено саме пристрої, які вказуєш у заявці; для телефона — реальний сенсорний екран.
• Фінальний файл запускається у прев’ю конкурсу, усі картинки й звуки на місці.
• Назва, короткий опис і керування відповідають реальній грі.
• Обкладинка показує гру: автоматичний кадр або власний скриншот, якщо захоплення не вдалося.

На вкладці «Додати гру» увійди через email із кодом підтвердження або через ChatGPT, перетягни HTML або ZIP у вікно чи вибери файл. Перевір гру, заповни дані та подай на модерацію. Один учасник може додати кілька різних ігор через «Мої ігри» → «Додати ще гру». Кожна проходить перевірку й бере участь окремо.

Після відкриття голосування діє один голос на акаунт у раунді, незалежно від кількості власних робіт. За жодну свою гру голосувати не можна. Показ статистики контролює організатор. Подробиці й поточний стан завжди перевіряй у правилах хабу.

Часті запитання про створення ігор зі ШІ

Чи можна зробити гру без знання програмування?

Можна почати з невеликої гри й просити ШІ генерувати весь код. Водночас доведеться навчитися зберігати файли, описувати дефекти й перевіряти результат. Чим більший проєкт, тим цінніше розуміння стану, подій і структури коду.

Який ШІ найкраще пише ігри?

Універсального переможця цей матеріал не встановлює. Вибери доступний інструмент і дай йому один чіткий бриф. Оцінюй повний цикл: чи можна отримати файли, знайти помилку, виправити її та зібрати робочу гру. Привабливість першого скриншота — лише одна частина.

Чи потрібна платна підписка?

Для старту перевір можливості свого поточного акаунта. Безкоштовні рівні можуть мати обмеження, а довга робота — впертися в квоту. Купівля кількох підписок не є умовою конкурсу. Порівнюй вартість після власного маленького тесту, а не до нього.

Чи має готова гра використовувати ШІ під час гри?

Ні. ШІ може допомогти створити код і ресурси, а результат працюватиме звичайним JavaScript. Для нашого конкурсу це корисне розділення: розробляєш із ШІ, граєш автономно без запитів до моделі.

Чи можна просто подати посилання на artifact або AI Studio?

Для цього Вайб-джему потрібен готовий HTML або ZIP, що проходить перевірку в хабі. Саме посилання на прототип стороннього сервісу не замінює файл.

Джерела та межі матеріалу

Можливості продуктів перевірено за офіційними сторінками, наведеними під таблицею; технічний приклад бібліотеки — за документацією Phaser. Умови конкурсу звірено з чинною реалізацією та правилами Вайб-джему. Дата перевірки — 20.10.2026.

«Нічний кур’єр», промпти, порядок роботи й контрольні сценарії — авторські навчальні матеріали редакції. Ми не видаємо їх за виконаний порівняльний тест усіх сервісів або готову перевірену гру. Результат генерації залежить від моделі, доступних інструментів, контексту та твоїх перевірок.