Вихідний код 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: як комп'ютерний суперник (CPU) вибирає удар.
• 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/.

Зверніть увагу на поділ. Правила, фізика і CPU живуть у 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

Коли вихідникам потрібен етап збірки

«Без етапу збірки» правда для одних видань і неправда для інших, тож перевіряйте видання, а не магазин. Ось п'ять наших видань поруч із цінами в каталозі.

• 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, бо поставлений runtime відформатовано для читання. Завантажуйте результат, а 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-тип проявляється як помилка «module refused».
• Для публічного хостингу використовуйте HTTPS.
• Збереження належать походженню браузера (протокол, хост і порт). Перенесіть гру на інший домен — і гравці почнуть з нуля.
• Кожне нове завантаження сторінки все одно потребує вашого хостингу, тож це не офлайн-застосунок, який можна встановити.

Де живуть логотип, кольори, правила та переклади

Кожна інструкція має розділ про кастомізацію, і те, що він охоплює, відрізняється від видання до видання. Ось що каже кожна.

Velvet Pool

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

Puttide

• Кольори та шрифти: css/style.css.
• Фізика: src/sim/constants.js. Ціни косметики: src/game/economy.js, зі збереженням чинних id.
• Музика: скопіюйте ліцензований файл у 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. Встановлювати залежності не потрібно. За інструкцією, набір перевіряє фізику, правила «вісімки», матчі з CPU і узгодженість ключів перекладу, але не замінює тестування в браузерах і на реальних пристроях.

Перевірка ключів перекладу — саме такий тест потрібен грі з 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: зверніть увагу, що id предметів і ключі збережень мають лишатися стабільними, інакше гравці втратять збережену косметику.
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/ — це редагована версія для розробника тієї самої гри. У 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 обох розбила довгі однорядкові рядки на читабельні. Runtime Sunset Rally поставляється відформатованим, з вимкненою мініфікацією.

Чи можна використати одну покупку для кількох проєктів або клієнтів?

Ліцензія покриває один кінцевий продукт, вашого або одного клієнта. Другий продукт поза її межами.

Чи можна перепродавати або ділитися вихідним кодом?

Ні: ні окремо, ні як шаблон, набір чи пакет ресурсів, ні всередині іншого продукту для розробників. Усередині вашого кінцевого продукту можна змінювати код, графіку й звук.

Чи можна прочитати інструкцію перед покупкою?

Так. Кожна сторінка товару посилається на його інструкцію і на демо, яке можна зіграти, того самого видання.

Відкрийте пакет перед покупкою

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

Переглянути всі шаблони