Как создать первую браузерную игру с ChatGPT: один экран, правила и рабочая ссылка
Для первой игры не нужны Unity, сервер и магазин ассетов. Достаточно одного HTML-файла: игрок нажимает «Старт», ловит движущуюся цель двадцать секунд и видит счет. Такой масштаб позволяет проверить главное: умеете ли вы сформулировать правила, протестировать крайние случаи и опубликовать результат.
Ограничьте игру до одного экрана
Не начинайте с инвентаря, уровней и регистрации. Зафиксируйте пять правил:
1. На экране есть кнопка запуска, игровое поле, таймер и счет.
2. После старта цель меняет положение при каждом попадании.
3. Раунд длится двадцать секунд.
4. После конца раунда нажатия не увеличивают счет.
5. Кнопка «Сыграть еще» полностью сбрасывает состояние.
Этого достаточно, чтобы получить законченную механику и несколько мест для проверки.
Откройте Canvas в ChatGPT
Canvas предназначен для работы с текстом и кодом в отдельной области. Его можно вызвать просьбой открыть Canvas или начать задачу словами «используй Canvas». Доступ и расположение кнопок зависят от текущего интерфейса и учетной записи.
Дайте ChatGPT конкретный запрос:
Создай браузерную игру в одном файле index.html. На экране должны быть заголовок, кнопка «Старт», квадратное игровое поле, круглая цель, счет и таймер на 20 секунд. Цель перемещается в случайное место после клика. После окончания времени клики не засчитываются, появляется результат и кнопка «Сыграть еще». Используй только HTML, CSS и JavaScript без библиотек. Сначала коротко опиши состояния игры, затем напиши код.
Просьба сначала назвать состояния снижает риск путаницы между ожиданием, активным раундом и завершением.
Проверьте игру по сценарию, а не по внешнему виду
Запустите HTML-превью в Canvas, если оно доступно, или сохраните код как index.html и откройте файл в браузере. Затем пройдите проверку:
• до старта цель не приносит очки;
• повторное нажатие «Старт» не запускает второй таймер;
• цель остается внутри поля даже у краев;
• на двадцатой секунде счет перестает меняться;
• новая игра начинается с нуля;
• на узком экране поле не выходит за границы.
Если найден дефект, не просите «починить игру». Назовите наблюдаемое поведение: «после двойного нажатия таймер идет вдвое быстрее; оставь только один активный интервал».
Не добавляйте функции, пока не работает раунд
Модель легко предложит уровни сложности, таблицу рекордов и звуки. Отложите это. Сначала добейтесь стабильного цикла «старт, игра, конец, повтор».
После этого можно добавить только одно улучшение. Например, уменьшать цель каждые пять попаданий. Сразу допишите критерий: размер не должен становиться меньше 24 пикселей. Так функция остается проверяемой.
Сохраните версию в GitHub
Создайте новый публичный репозиторий, загрузите index.html и откройте настройки Pages. В качестве источника публикации выберите ветку с файлом и корневую папку. GitHub создаст адрес формата «имя.github.io/репозиторий».
Публикация может занять несколько минут. Откройте ссылку в приватном окне и на телефоне. Локально работающий файл еще не гарантирует, что имя файла, путь и регистр символов корректны на сервере.
Не помещайте в HTML API-ключи. Вся страница публичного сайта доступна посетителю, включая JavaScript.
Как улучшать игру без хаоса
Для следующей версии заведите короткий список гипотез: звук попадания, лучший счет в localStorage, управление с клавиатуры. Вносите по одной и сохраняйте отдельным коммитом. Тогда неудачную механику можно удалить без переписывания всей игры.
Такая маленькая игра показывает полный цикл разработки: требования, код, ручные проверки, Git и публикацию. На курсе "Вайб-кодинг на максималках" «Вайбкодинг на максималках» тот же цикл применяется к собственному проекту, а дальше к нему добавляются база данных, сервер и безопасность. Для этой игры курс не нужен; он полезен, когда хочется перейти от одного файла к приложению из нескольких частей.
Рабочий результат этой задачи состоит из трех вещей: файла index.html, списка пройденных проверок и публичной ссылки, которая открывается не только на вашем компьютере.