Исходный код HTML5-игры: что внутри реального пакета

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

Мы продаём эти шаблоны, так что читайте этот материал как экскурсию по нашим собственным пакетам, а не как нейтральный обзор рынка. Мы разобрали несколько редакций, главным образом Velvet Pool, Puttide и Sunset Rally, прочитали их публичные руководства и условия магазина и записали, что лежит в коробке, что нужно для запуска и чего там нет. Руководство каждой редакции доступно по ссылке со страницы товара, так что вы можете проверить каждую строку до оплаты.

Что может значить «исходный код HTML5-игры»

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

Сборка, исходники разработчика или и то и другое?

Сборка — это готовая игра в том виде, в каком её загружает браузер: index.html, скрипты, изображения и звуковые файлы. Её можно разместить как есть. Исходники разработчика — версия, сделанная для правки людьми, с файлами, разбитыми по задачам. Пакет только со сборкой можно загрузить, но неудобно менять. Пакету только с исходниками могут понадобиться инструменты, чтобы он вообще заработал. Редакции в этом руководстве кладут оба варианта в один ZIP: обычно это папка game/ для публикации и папка source/ для правки (в Ricopop сама папка game/ и есть исходный код).

Читаемый или минифицированный?

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

Обычные файлы или проект для редактора?

Некоторые шаблоны приходят как проект для конкретного игрового редактора, и открыть их можно только в нём. Другие — обычные веб-файлы, которые открывает любой редактор кода. Редакции в этом руководстве относятся ко второму виду: HTML, CSS, JavaScript и JSON, а в некоторых ещё и TypeScript.

Смотреть шаблоны

Что лежит в пакете Polar Games

Возьмём Velvet Pool, нашу редакцию бильярда («восьмёрки»). В её руководстве описаны четыре папки в ZIP:

• game/ — готовая к загрузке редакция и единственная папка, которую вы публикуете.
• source/ — та же игра как редактируемая редакция для разработчика, с README, package.json и тестами.
• documentation/ — иллюстрированное руководство и его изображения.
• THIRD-PARTY-LICENSES/ — тексты лицензий шрифтов и краткий README.txt.

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

У game/ и source/ одинаковая структура. Для Velvet Pool в руководстве сказано править файлы в source/ и копировать изменённые по тому же пути в game/. Между этими шагами ничего не компилируется.

Посмотреть редакцию Velvet Pool

Внутри Velvet Pool: карта файлов

Карта файлов — самый дешёвый способ оценить кодовую базу до покупки. Вот карта из руководства Velvet Pool, с путями относительно source/ или game/:

• src/core/physics.js: симуляция шаров, вращение и отскок от бортов.
• src/core/rules.js: правила «восьмёрки» и решения о фолах.
• src/core/ai.js: как компьютерный соперник выбирает удар.
• src/game/controls.js: ввод прицеливания, силы и вращения.
• src/game/progress.js: достижения, сукно, кии и подсчёт очков матча.
• src/game/i18n.js: тексты на 14 языках.
• src/game/localRecords.js: локальная история результатов.
• src/game/audio.js: звуковые эффекты и воспроизведение музыки.
• css/style.css и css/fonts.css: тема, адаптивная раскладка и объявления шрифтов.
• assets/: графика, звук и шрифты, с подпапкой logo/.

Обратите внимание на разделение. Правила, физика и компьютерный соперник лежат в src/core. Ввод, сохранения, тексты и звук — в src/game. Руководство просит менять по одной функции за раз, и такая структура делает это реальным: правка отскока от борта и исправление перевода затрагивают разные файлы.

В руководстве также сказано, что код в source/src и game/src — это обычный отформатированный JavaScript, без минифицированных или собранных в один файл частей. Velvet Pool написана на чистом JavaScript поверх WebGL2 и не использует ни одной библиотеки, включая Three.js. Журнал изменений подтверждает это: в версии 1.0.1 длинные однострочные строки в аудио, переводах и шейдерах разбили на читаемые строки, а поведение не изменилось.

Puttide: та же структура, плюс библиотеки

Puttide, наша редакция 3D-мини-гольфа, использует те же четыре папки и добавляет одно: две сторонние библиотеки, которые нужны игре. Three.js r186 (MIT) и Rapier 3D 0.21.0 (Apache-2.0) лежат в lib/three/ и lib/rapier/, а карта импорта в index.html подсказывает браузеру, где их искать. В FAQ Puttide сказано, что ничего не загружается из CDN, поэтому игре нужен только ваш хостинг. В руководстве добавлено, что файлы библиотек отформатированы так, чтобы их можно было читать, а поведение не изменено.

Её карта файлов, снова относительно source/ или game/:

• src/course/courses.js: порядок трасс и условия их открытия.
• src/course/holes.js: геометрия, пар и препятствия трассы Ruins. В pier.js, ice.js, lava.js и sky.js описаны четыре остальные.
• src/sim/constants.js: настройка физики.
• src/game/economy.js: определения и цены шаров, следов и нарядов.
• src/ui/i18n.js и ещё три файла словарей: тексты на разных языках.
• css/style.css: цвета интерфейса, шрифты и адаптивные стили.
• fonts/ и music/: веб-шрифты с их лицензиями и два музыкальных трека.

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

Посмотреть редакцию Puttide

Когда исходникам нужен этап сборки

«Без этапа сборки» верно для одних редакций и неверно для других, поэтому проверяйте редакцию, а не магазин. Вот пять наших редакций рядом, с прейскурантными ценами. Наш магазин сейчас показывает скидку 10 % от прейскурантной цены — предложение напрямую от студии на странице каждого товара: например, Velvet Pool показывает $35,10 вместо $39.

• Velvet Pool, прейскурантная цена $39: обычные модули JavaScript на WebGL2. Правите source/, копируете в game/. Node.js 20+ нужен только для необязательных тестов.
• Puttide, $39: обычные модули JavaScript с Three.js и Rapier в lib/. Без этапа сборки. Node.js необязателен и нужен только для управления версиями библиотек.
• Ricopop, $39: обычные модули HTML, CSS и JavaScript, а сама папка game/ — это исходный код. Необязательные инструменты разработчика (Node.js 20+): локальный сервер, проверка уровней и тесты.
• Pinloop, $24: TypeScript с Vite. В папке game/ читаемые JavaScript и CSS. Node.js 22.12+ и npm нужны только для правки и пересборки исходников.
• Sunset Rally, $39: TypeScript с Three.js r184 и Vite. Папка game/ уже собрана и не минифицирована. Node.js нужен, только если вы пересобираете.

Для Sunset Rally в руководстве рекомендуется Node.js 24 LTS. Внутри source/ вы запускаете npm ci, npm run typecheck и npm run build, а затем публикуете только содержимое dist/. Там же просят при пересборке держать minify и cssMinify выключенными, потому что поставляемый код отформатирован для чтения. Загружайте результат, но никогда не node_modules/.

Посмотреть редакцию Sunset Rally

Размещение: что на практике значит «статический»

Статический хостинг означает, что ваш хостинг только отдаёт файлы. В руководствах Velvet Pool и Puttide вся установка описана в трёх шагах:

1. Распакуйте ZIP.
2. Загрузите всё, что внутри game/, в папку на вашем сайте, например public_html/velvet-pool/, по FTP или через файловый менеджер хостинга, сохранив вложенные папки.
3. Откройте этот адрес в браузере.

Ни npm, ни терминала, ни этапа сборки, ни PHP, ни базы данных, ни аккаунта. А вот что, согласно тем же руководствам, подводит людей:

• Не открывайте index.html двойным щелчком. Браузеры блокируют игровые модули на file://. Для локальной проверки выполните python -m http.server 8765 внутри game/ и откройте http://localhost:8765/.
• Ваш сервер должен отдавать файлы .js с типом MIME JavaScript, а .wasm как application/wasm. Неверный тип MIME проявляется как ошибка «модуль отклонён».
• Для публичного размещения используйте HTTPS.
• Сохранения привязаны к источнику браузера (протокол, хост и порт). Перенесите игру на другой домен, и игроки начнут с нуля.
• Для новой загрузки страницы по-прежнему нужен ваш хостинг, так что это не устанавливаемое офлайн-приложение.

Где лежат логотип, цвета, правила и переводы

В каждом руководстве есть раздел о настройке, и его содержание различается от редакции к редакции. Вот что говорит каждое.

Velvet Pool

• Логотип и брендинг: замените файлы в assets/logo/ и подправьте соответствующие размеры в CSS.
• Стили сукна и кия: их определения в progress.js. Сохраняйте идентификаторы предметов неизменными, чтобы сохранённые косметические предметы продолжали работать.
• Поведение компьютерного соперника в ai.js, физика в physics.js. После изменения правил или физики запустите тесты «восьмёрки».
• Переводы: src/game/i18n.js, список языков в LANGS.

Puttide

• Цвета и шрифты: css/style.css.
• Физика: src/sim/constants.js. Цены косметических предметов: src/game/economy.js, с сохранением существующих идентификаторов.
• Музыка: скопируйте лицензированный файл в music/ и обновите сопоставление треков в src/audio/audio.js.
• Лунки, пар и открытие: файлы трасс, описанные выше.

Gridspark и Sunset Rally

В Gridspark, по FAQ на странице товара, текст интерфейса лежит в src/locales.js, константы правил и палитра — в src/config.js, а правила головоломки — в game.js, board.js, generator.js и shapes.js. В Sunset Rally матчи кампании и условия получения звёзд находятся в Campaign.ts, локации — в Places.ts, физика — в physics.ts, подсчёт очков — в match.ts. Строки на английском и португальском лежат в src/i18n.ts, остальные 12 языков — в src/locales/.

Обратите внимание на то, о чём руководства умалчивают. В руководстве Puttide описаны цвета, физика, лунки, цены и музыка, но нет шага о замене логотипа, а в руководстве Sunset Rally нет отдельного раздела о брендинге. Если брендинг — первое, что вы будете менять, спросите до покупки.

Посмотреть редакцию Gridspark

Автоматические тесты: что они проверяют, а что нет

В папку source/ игры Velvet Pool входит набор тестов. С Node.js 20 или новее откройте терминал внутри source/ и запустите npm test, что равно node tests/run.js. Установка зависимостей не нужна. По руководству, набор проверяет физику, правила «восьмёрки», партии с компьютерным соперником и согласованность ключей перевода и не заменяет проверку в браузерах и на настоящих устройствах.

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

Тесты есть не в каждой редакции. В руководстве Puttide их нет, только ручные проверки. Pinloop и Beep Out указывают npm test среди своих команд для разработчика, а в инструменты разработчика Ricopop входит проверка уровней.

Лицензия, сторонние уведомления и журнал изменений

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

Сторонние части сохраняют собственные лицензии, и вы храните их уведомления вместе со своим продуктом. В Velvet Pool это два шрифта, Manrope и Fraunces, под лицензией SIL Open Font License 1.1, с текстами в THIRD-PARTY-LICENSES/ и рядом со шрифтами. В Puttide к списку добавляются Three.js (MIT), Rapier (Apache-2.0) и шрифты Rubik и Fredoka (OFL 1.1).

Журнал изменений показывает, как ухаживают за пакетом. В Velvet Pool 1.0.1 (18 октября 2026 года) длинные строки разбили на читаемые строки, а уведомления о лицензиях собрали в одной плоской папке. Версия 1.1.0 (22 октября 2026 года) довела интерфейс до 14 языков. Эти записи есть на странице товара. В условиях сказано, что обновления той же редакции появляются в вашей библиотеке по мере выхода, а на определённый срок обновления не обещаются.

Как за час прочитать код купленной игры

Это предлагаемый план, а не обещанные сроки. Он следует структуре Velvet Pool и использует только то, что даёт пакет.

1. Минуты 0–10: распакуйте ZIP, пробегите README в source/ и карту файлов из руководства. Откройте index.html и посмотрите, какие скрипты и таблицы стилей он загружает.
2. Минуты 10–20: запустите npm test внутри source/ (Node.js 20+), чтобы получить зелёную точку отсчёта.
3. Минуты 20–35: читайте src/core раньше src/game. Начните с rules.js, затем ai.js, затем physics.js. Это и есть сама игра. Управление, прогресс, тексты и звук — обвязка вокруг неё.
4. Минуты 35–40: запомните, что идентификаторы предметов и ключи сохранений должны оставаться неизменными, иначе игроки потеряют сохранённые косметические предметы.
5. Минуты 40–55: внесите одну небольшую правку, например в определение сукна в progress.js. Скопируйте файл по тому же пути в game/, запустите game/ через python -m http.server 8765 и посмотрите результат. Никогда не открывайте через file://.
6. Минуты 55–60: снова запустите тесты.

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

Вопросы, которые стоит задать перед покупкой исходного кода

• Могу ли я прочитать руководство и сыграть в демо до оплаты? Для наших редакций оба доступны по ссылке со страницы товара.
• Есть ли готовая к размещению сборка и отдельные исходники разработчика?
• Код читаемый или минифицированный? Откройте один скрипт и посмотрите.
• Нужны ли мне Node.js, npm, PHP или база данных и какие версии?
• Загружает ли игра что-нибудь из CDN или с другого сайта?
• Какие сторонние библиотеки внутри и под какими лицензиями?
• Сколько проектов я могу с ним сделать и можно ли его распространять?
• Как долго действует поддержка и что она покрывает? У нас 6 месяцев или 12 с продлением, выбранным при оформлении заказа; она покрывает вопросы по установке и использованию файлов и воспроизводимые дефекты.
• Что оставлено за скобками?
• Есть ли журнал изменений и недавний релиз?
• Каково правило возврата? У нас: шаблоны — цифровые товары, поэтому мы возвращаем деньги, только если вы ещё не скачали шаблон или если в нём есть дефект, который мы не можем исправить. Запрос подаётся письмом в студию с указанием номера лицензии.

Что в этих редакциях не входит

В некоторых редакциях есть необязательные дополнения. Ricopop и Zabum включают таблицу лидеров на PHP в один файл, выключенную по умолчанию. Это простая общая таблица результатов, которая хранит очки в файле, а не защищённый от накруток рейтинг и не мультиплеер в реальном времени.

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

Вопросы и ответы

Чем папка game отличается от папки source?

game/ — сборка, которую вы загружаете на хостинг. source/ — редактируемая редакция той же игры для разработчика. В Velvet Pool и Puttide у них одинаковая структура, так что файл, который вы правите в source/, копируется по тому же пути в game/. В редакциях на TypeScript, таких как Sunset Rally, source/ — проект, который вы пересобираете, и публикуете новый результат.

Нужны ли npm или Node.js, чтобы пользоваться игрой?

Для размещения нет. Node.js появляется только для необязательных тестов в Velvet Pool (20 или новее) или для пересборки редакций на TypeScript, таких как Sunset Rally (рекомендуется 24 LTS) и Pinloop (22.12 или новее).

Минифицирован ли исходный код?

В рассмотренных здесь редакциях нет. Velvet Pool и Puttide — обычный отформатированный JavaScript, и в версии 1.0.1 обеих длинные однострочные строки разбили на читаемые строки. Код Sunset Rally поставляется отформатированным, с выключенной минификацией.

Можно ли использовать одну покупку для нескольких проектов или клиентов?

Лицензия покрывает один конечный продукт — ваш или одного клиента. Второй продукт выходит за её рамки.

Можно ли перепродавать исходный код или делиться им?

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

Можно ли прочитать руководство до покупки?

Да. На странице каждого товара есть ссылка на его руководство и на играбельное демо той же редакции.

Откройте пакет, прежде чем покупать

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

Смотреть все шаблоны