Изходен код за 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, нашето издание за билярд с 8 топки. Ръководството му описва четири папки в 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: правилата на 8-топковия билярд и решенията за фаул.
• 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 е Vanilla 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/, а import map в index.html казва на браузъра къде да ги намери. FAQ на Puttide заявява, че нищо не се зарежда от CDN, така че играта се нуждае само от вашия хостинг. Ръководството добавя, че файловете на библиотеките са форматирани, за да се четат, с непроменено поведение.

Картата му на файловете, отново спрямо source/ или game/:

• src/course/courses.js: ред на терените и изисквания за отключване.
• src/course/holes.js: геометрията, par-а и препятствията на терена 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/: уеб шрифтовете с лицензите им и две музикални песни.

Рецептата на ръководството за нова дупка: копирайте една дефиниция в правилния файл за терен, дайте ѝ уникален идентификатор, задайте par, позициите на старта и на кошчето, добавете я към терена, после добавете името и съвета ѝ в речниците на езиците. Прочетете такава рецепта, преди да купите. Ако изглежда като работа, която можете да свършите, пакетът ви подхожда.

Вижте изданието 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 изключени, когато компилирате отново, защото доставеното време на изпълнение е форматирано за четене. Качвате резултата, никога 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 файлове с JavaScript MIME тип, а .wasm като application/wasm. Грешен MIME тип се показва като грешка, че модулът е отказан.
• Използвайте HTTPS за публичен хостинг.
• Записите принадлежат на браузърния произход (протокол, хост и порт). Преместите ли играта на друг домейн, играчите започват от нулата.
• Всяко ново зареждане на страницата все още се нуждае от хостинга ви, затова това не е инсталируемо офлайн приложение.

Къде са логото, цветовете, правилата и преводите

Всяко ръководство има раздел за персонализиране, а обхватът му се различава от издание на издание. Ето какво казва всяко.

Velvet Pool

• Лого и брандиране: сменете файловете в assets/logo/ и коригирайте съответните размери в CSS.
• Стилове за покривката и щеките: дефинициите им са в progress.js. Пазете идентификаторите на предметите стабилни, за да продължат да работят запазените козметични елементи.
• Поведението на CPU в ai.js, физиката в physics.js. След промяна на правилата или физиката пускайте тестовете за 8-топков билярд.
• Преводи: src/game/i18n.js, със списъка с езици в LANGS.

Puttide

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

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. Не е нужна инсталация на зависимости. Според ръководството пакетът проверява физиката, правилата на 8-топковия билярд, мачовете срещу 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: отбележете, че идентификаторите на предметите и ключовете за запис трябва да останат стабилни, иначе играчите губят запазените си козметични елементи.
5. Минути 40 до 55: направете една малка промяна, например дефиниция на покривка в progress.js. Копирайте файла в същия път в game/, пуснете game/ със python -m http.server 8765 и вижте резултата. Никога не го отваряйте през file://.
6. Минути 55 до 60: пуснете тестовете отново.

ES модулите назовават какво им трябва в редовете си с import, така че можете да проследите веригата от първия скрипт, който страницата зарежда. Затова издание с обикновени файлове може да се чете с такова темпо.

Въпроси, които да зададете, преди да купите изходен код

• Мога ли да прочета ръководството и да пробвам демо, преди да платя? За нашите издания и двете са свързани от страницата на продукта.
• Има ли готов за хостинг билд и отделен изходен код за разработчици?
• Кодът четим ли е или минифициран? Отворете един скрипт и вижте.
• Трябват ли ми 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 на двете раздели дългите едноредови низове на четими редове. Времето на изпълнение на Sunset Rally е доставено форматирано, с изключена минификация.

Мога ли да използвам една покупка за няколко проекта или клиента?

Лицензът покрива един краен продукт, ваш или на един клиент. Втори продукт е извън него.

Мога ли да препродавам или споделям изходния код?

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

Мога ли да прочета ръководството, преди да купя?

Да. Всяка страница на продукт свързва ръководството и демо, което можете да играете, на същото издание.

Отворете пакета, преди да купите

Изберете издание, отворете ръководството му от страницата на продукта, пробвайте демото и сравнете картата на файловете с въпросите по-горе. Ако ръководството отговаря на тях, пакетът трябва да отговаря. Ако не, пишете на студиото, преди да платите.

Разгледайте всички шаблони