Как создать браузерную игру

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

Разберём этот путь на редакционном примере «Лови огоньки». Игрок двигает корзину по нижней части поля, ловит падающие жетоны и старается набрать десять очков. После трёх пропусков партия заканчивается. Эти числа нужны только для понятного задания; они не описывают ограничения какого-либо сервиса.

Начните с правил и одного рабочего экрана

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

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

Попросите нейросеть сначала перечислить файлы и объяснить их назначение. Затем запросите код без внешних библиотек, с простыми геометрическими фигурами вместо сложной графики. Такой черновик легче проверить: исчезнувшую корзину не придётся одновременно искать в картинке, пути к файлу и игровых координатах.

За образцами коротких правил можно обратиться к каталогу Игры ГПТ. «Змейка», «Арканоид» и «Крестики-нолики» полезны как примеры понятной цели. Наличие игры в каталоге само по себе не говорит, каким инструментом она создана.

Разделите страницу, оформление и логику

HTML задаёт структуру: заголовок, игровое поле и кнопки. CSS отвечает за размеры, цвета, расположение и внешний вид. JavaScript хранит состояние партии, реагирует на управление и меняет происходящее на экране. Важно понимать эти роли, даже если весь код написал помощник.

Для небольшого опыта допустим один index.html, внутри которого находятся стили и сценарий. Его удобно переносить и показывать. Когда текста становится много, практичнее отделить style.css и game.js: тогда изменение цвета кнопки не заставляет искать нужное место среди расчётов движения.

Редакционный пример структуры папки выглядит так:

ogonki/
  index.html
  style.css
  game.js
  assets/
    basket.webp
    spark.webp

В этой структуре страница подключает оформление и сценарий относительными путями. Для картинки из вложенной папки используется путь assets/spark.webp. Если файл переместили, ссылка в коде тоже должна измениться. Само название папки не определяет поведение игры.

Попросите помощника возвращать каждый файл отдельным блоком с точным именем. Сохраняйте содержимое как текст в редакторе кода. Документ из офисной программы и файл с незаметным окончанием .txt не заменяют HTML. После сохранения проверьте настоящие расширения файлов в своей системе.

Подключите ресурсы без потерянных картинок

Сначала добейтесь рабочей партии с прямоугольниками и кругами. Потом заменяйте по одному элементу: корзину, огонёк, фон. После каждой замены снова запускайте игру. Так видно, какое действие привело к пустому полю или неожиданно огромной картинке.

Имена в коде и на диске должны совпадать, включая регистр. Spark.webp и spark.webp могут восприниматься сервером как разные файлы. Для первой сборки удобно использовать короткие имена латиницей без пробелов. Это редакционная договорённость для порядка, а не обязательное правило браузера.

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

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

Запустите игру и прочитайте первую ошибку

Откройте index.html в браузере. Простейшая автономная страница может работать прямо с диска. Если проект использует загрузку данных через запросы или модули, режим открытия файла накладывает ограничения. Для модулей необходимость запуска через сервер объясняется в официальном руководстве MDN. В таком случае запускайте папку через локальный веб-сервер и открывайте выданный им адрес.

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

Если поле пустое, откройте средства разработчика браузера. На вкладке Console найдите первую ошибку, а на вкладке Network — неудачные загрузки файлов. Красная строка с отсутствующим game.js требует проверки пути; ошибка внутри сценария требует проверки соответствующей строки кода.

Передавайте помощнику точный текст ошибки и короткую последовательность действий: «Открыл страницу, нажал “Начать”, корзины нет». Добавьте ожидаемое поведение. Формулировка «ничего не работает» не даёт отделить проблему запуска от ошибки правил. После исправления перезагрузите страницу и повторите тот же сценарий.

Например, при загрузке корзины появился запрос к assets/Basket.webp, а в папке находится basket.webp. Исправьте одно написание, обновите страницу и проверьте повторный запрос. Если вместо картинки загрузилась страница ошибки, смена её размеров в CSS не поможет. Двигайтесь от конкретного отсутствующего файла к следующей проверке, а не просите помощника полностью переписать игру. Отдельно сохраните рабочую копию перед изменением: так можно сравнить два варианта и не потерять уже исправленное управление.

Проверьте поле и управление на телефоне

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

Для «Лови огоньки» заранее выберите мобильное управление. Один вариант — перетаскивать корзину пальцем внутри поля, другой — разместить две экранные кнопки. Не оставляйте выбор случайным: клавиши на ноутбуке не превращаются в удобное управление на телефоне сами собой.

Проверьте начало и конец касания. Корзина не должна продолжать ехать после того, как палец отпущен или ушёл за кнопку. При уходе со страницы удерживаемое направление также стоит сбрасывать. Отдельно посмотрите, не прокручивается ли документ во время движения по полю и не закрывает ли палец счёт.

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

Соберите ZIP и проверьте переносимость

Перед упаковкой пройдите одну победную и одну проигранную партию. После каждой нажмите «Ещё раз». Счёт должен сброситься, огоньки не должны появляться в удвоенном количестве, а корзина — оставаться в случайном положении от предыдущей попытки. Исправление запуска ещё не означает исправления всей игры.

В ZIP положите страницу и все нужные ресурсы с сохранением вложенных папок. Требования принимающей площадки к расположению стартового файла проверяйте отдельно. Для понятной передачи удобно, чтобы index.html находился на верхнем уровне архива, без лишней внешней папки с названием компьютера или даты.

Распакуйте архив в новую папку и запустите оттуда. Этот простой шаг обнаруживает зависимости от старых файлов, которые случайно остались рядом с рабочей версией. Удалять исходную папку ради проверки не требуется. Если передаёте игру другому человеку, приложите короткую инструкцию: чем управлять и как начать заново.

В Игры ГПТ путь с внешней нейросетью описан на странице «Сделай свою игру»: описание, код, ресурсы с совпадающими именами и подготовка HTML или ZIP. Встроенный редактор — отдельный путь; его возможности публикации зависят от активного тарифа, а отправка в каталог проходит модерацию.

Сделайте собственный прототип с одной механикой и доведите его до переносимой сборки. Главный результат первого прохода — игра, которую вы сами открыли из новой папки и смогли закончить по записанным правилам. После этого у расширения проекта появится надёжная отправная точка.

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

Можно ли оставить всю игру в одном HTML?

Да, для небольшого автономного прототипа это удобно. Внутри страницы могут находиться стили и логика. Если появляются отдельные картинки, звуки или данные, их нужно передавать вместе с HTML либо осознанно встраивать в него.

Почему игра работает на компьютере, но теряет картинки на сайте?

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

Нужно ли сразу выбирать игровой движок?

Для маленькой игры с одной механикой можно начать с HTML, CSS и JavaScript без дополнительных библиотек. Выбор движка имеет смысл связывать с задачами проекта: редактором уровней, физикой, сложной анимацией и будущим объёмом работы.