Готовим игру к выпуску: файлы, ресурсы и чистый запуск

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

Возьми свою проверенную игру

Возьми игру после плейтеста: ты уже проверил правила и внёс обоснованную правку. Сохрани рабочую версию в Git. Если ещё не получается объяснить своё правило или воспроизвести найденную ошибку, вернись к этим задачам до публикации.

Дальше действия относятся к твоему проекту. Папка start в комплекте содержит демонстрационный проект из прошлого урока. Он помогает сравнить состав файлов после самостоятельной попытки. Выпуск копии примера не заменяет собственное игровое решение.

Отдели релиз от рабочего проекта

Релиз — выбранная версия, которую ты отдаёшь игроку. Для нашей статической игры не нужен отдельный сборщик: браузер читает HTML, CSS и JS. Создай рядом с рабочей папкой новую release. Копируй в неё файлы, сохраняя рабочую папку и тесты на месте.

Начни с index.html. Найди в нём подключения CSS и JS, затем открой JS и пройди по import. Добавь все используемые изображения, звуки и шрифты с теми же подпапками. Не копируй всё подряд: каждый файл должен иметь понятное назначение.

release/
  index.html
  style.css
  game.js
  rules.js
  README.md
  RESOURCES.md

Так выглядит комплект карточного примера: четыре файла нужны игре, два описывают запуск и происхождение ресурсов. У твоей игры состав может отличаться. rules.js обязателен, если game.js импортирует из него правило. tests.html и tests.js остаются в рабочем проекте: они проверяют код, но игроку не нужны. Не включай .git, записи о людях, черновики, токены, пароли и архивы других версий. В публичную папку попадёт всё, что ты туда положишь.

Проверка этапа: для каждого файла в release назови, кто его загружает или зачем он включён. Затем сравни HTML, CSS, JS и ресурсы игры с их копиями. При переносе мы не меняем механику.

Проверь пути к файлам

В release/index.html подключения должны вести к файлам внутри release. Относительный путь начинается от документа, а путь импорта — от импортирующего JS-файла. В CSS адрес url(...) считается от CSS-файла. Путь к твоему диску и соседней рабочей папке не переносится вместе с архивом.

<link rel="stylesheet" href="./style.css">
<script type="module" src="./game.js"></script>

import { getOutcome } from './rules.js';

Сохрани точное написание: rules.js и Rules.js — разные имена на сервере с учётом регистра. Начальный / означает корень сайта: /game.js потеряет папку проекта при публикации по адресу вида /my-game/. Для этого проекта оставь ./game.js. Вспомнить поиск 404 можно в уроке о локальном сервере.

Запиши, откуда взялись ресурсы

Создай release/RESOURCES.md. Перечисли графику, звуки, шрифты и заимствованный код. Для внешнего файла нужны автор, исходная страница, точное разрешение на выбранное использование и требуемая подпись. «Нашёл в поиске» не отвечает на эти вопросы. Открой условия у источника и сохрани ссылку; если разрешение не установлено, отложи этот файл и замени своим до выпуска.

Не назначай всему чужому проекту лицензию от своего имени. Если у источника нет LICENSE или понятных условий, это нельзя исправить догадкой «значит, бесплатно». В карточном примере нет внешних картинок, звуков и загружаемых шрифтов; числовые карточки оформлены HTML/CSS. В RESOURCES.md примера перечислены его файлы и указано, что внешние изображения, звуки и шрифты не используются.

Напиши понятную инструкцию запуска

В release/README.md укажи название и версию, цель, управление, запуск и ограничения. Например: «Выбери ровно три разные карты на сумму 10. Кликни или выбери кнопку клавишей Tab и нажми Enter. Новая попытка — кнопка “Сначала”». Названия кнопок сверяй со своей игрой.

Укажи, какие устройства планируешь поддерживать и что действительно проверил. «Chrome на компьютере, мышь и клавиатура» точнее, чем «все браузеры». Узкое окно и эмуляция полезны, но сами по себе не подтверждают работу пальцами на телефоне. Если заявляешь телефон, открой игру на таком устройстве и пройди сценарии; запиши модель/браузер без чужих личных данных.

Наш пример использует ES-модули, поэтому запускается через HTTP, как в уроке 19. Двойной клик с адресом file:// не является проверкой такого проекта: браузер может блокировать импорт модулей. Это требование описано в руководстве MDN по модулям.

Упакуй и открой чистую копию

1. Сверь тесты правил в рабочем проекте и свою таблицу сценариев. Сохрани Git-коммит с этой версией.
2. Сделай ZIP из содержимого release. Открой архив: index.html и соседние файлы должны быть на одном ожидаемом уровне. Не добавляй внутрь весь учебный комплект.
3. Распакуй ZIP в другую новую папку, например release-check. Не запускай файлы прямо внутри окна архива.
4. Останови прежний локальный сервер сочетанием Ctrl+C. Открой терминал в release-check — рядом с распакованным index.html.
5. Запусти сервер той же командой, что использовал раньше. Открой http://127.0.0.1:8000/, затем Network и Console.

# Windows с установленным Python Install Manager
py -3.14 -m http.server 8000 --bind 127.0.0.1

# macOS / Linux, если установлен python3
python3 -m http.server 8000 --bind 127.0.0.1

Выбери команду для своей среды, не запускай обе. Если сервер сообщает, что порт занят, останови свой прежний процесс или выбери другой свободный порт и такой же номер в адресе. Убедись по списку файлов в терминале, что проверяется распакованная папка. В Network у CSS, game.js и rules.js должны быть успешные ответы, в Console — никаких ошибок загрузки.

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

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

Собери релиз своей игры и заполни templates/release-check.md за пределами публичной папки. Попроси другого человека открыть распакованную копию по README без твоих устных подсказок. Запиши конкретное затруднение и исправь инструкцию или состав файлов. Если человека нет, выполни чистый запуск сам и пометь именно самопроверку: чужой запуск остаётся отдельной задачей.

Небольшая проверка переноса: в копии для эксперимента перенеси CSS в styles/style.css, исправь подключение и, если внутри CSS есть ресурсы, их пути. Перед запуском предскажи запрос браузера. Такая перестановка проверяет понимание путей, а не цвет кнопок. После проверки выбери для выпуска одну структуру и обнови реестр файлов.

Когда можно публиковать

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