Zdrojový kód HTML5 hry: otvárame skutočný balík

Zdrojový kód HTML5 hry môže znamenať tri rôzne veci: zostavenie pripravené na nahratie, vývojárske súbory, ktoré upravujete, alebo projekt, ktorý sa otvorí len v jednom konkrétnom editore. Šablóna HTML5 hry so zdrojovým kódom z nášho marketplace je prvé a druhé spolu, ako obyčajné webové súbory, a tento sprievodca otvára skutočné balíky, aby ukázal, ako to vyzerá.

Šablóny predávame, takže to čítajte ako prehliadku našich vlastných balíkov, nie ako nezaujatý prehľad trhu. Prešli sme niekoľko edícií, najmä Velvet Pool, Puttide a Sunset Rally, prečítali ich verejné návody a obchodné podmienky a zapísali sme si, čo je v krabici, čo potrebujete na spustenie a čo tam nie je. Každý návod je odkazovaný zo stránky položky, takže si každý riadok môžete overiť pred platbou.

Čo môže znamenať „zdrojový kód HTML5 hry“

Predajcovia používajú pojem zdrojový kód voľne. Tri otázky vysvetlia, čo sa vlastne predáva.

Zostavenie, vývojársky zdroj, alebo oboje?

Zostavenie je hotová hra tak, ako ju prehliadač načíta: index.html, skripty, obrázky a zvukové súbory. Môžete ju nasadiť, ako je. Vývojársky zdroj je verzia určená na úpravy, so súbormi rozdelenými podľa úloh. Balík len so zostavením sa dá nahrať, ale nepohodlne sa mení. Balík len so zdrojom môže pred spustením potrebovať nástroje. Edície v tomto sprievodcovi dávajú obe veci do jedného ZIP-u: zvyčajne priečinok game/ na zverejnenie a priečinok source/ na úpravy (v Ricopop je game/ sám zdrojom).

Čitateľný, alebo minifikovaný kód?

Minifikácia stlačí skripty do pár hustých riadkov s krátkymi názvami, čo sa síce sťahuje rýchlejšie, ale číta sa to veľmi zle. Obfuskácia ide ďalej a názvy zámerne zamieša. Ani jedno nevadí živému webu. Obe veci vadia, ak ste kód kúpili, aby ste ho menili. Pred platbou otvorte jeden skript z živého dema vo vývojárskych nástrojoch prehliadača a zistite, či by ste ho vedeli sledovať.

Obyčajné súbory, alebo projekt pre editor?

Niektoré šablóny prichádzajú ako projekt pre konkrétny herný editor a otvoríte ich len v ňom. Iné sú obyčajné webové súbory, ktoré otvorí ľubovoľný editor kódu. Edície v tomto sprievodcovi sú druhého typu: HTML, CSS, JavaScript a JSON, v niektorých s TypeScriptom.

Prezrite si šablóny

Čo je v balíku Polar Games

Vezmime Velvet Pool, našu edíciu bilardu s ôsmimi guľami. Jej návod opisuje v ZIP-e štyri priečinky:

• game/ je edícia pripravená na nahratie a jediný priečinok, ktorý zverejňujete.
• source/ je tá istá hra ako upraviteľná vývojárska edícia, s README, package.json a testami.
• documentation/ obsahuje ilustrovaný sprievodca a jeho obrázky.
• THIRD-PARTY-LICENSES/ obsahuje texty licencií písiem a súhrn v README.txt.

Vo vašej knižnici je ten istý balík ponúkaný ako dva súbory na stiahnutie: kompletný balík (zdroj a návod) alebo samotná hra pripravená na nasadenie.

game/ a source/ majú rovnaké rozloženie. Pri Velvet Pool návod hovorí, aby ste súbory upravovali v source/ a zmenené kopírovali na tú istú cestu v game/. Medzi tým sa nič nekompiluje.

Pozrite si edíciu Velvet Pool

Vnútri Velvet Pool: mapa súborov

Mapa súborov je najlacnejší spôsob, ako posúdiť kódovú základňu pred kúpou. Toto je mapa z návodu Velvet Pool, cesty sú relatívne voči source/ alebo game/:

• src/core/physics.js: simulácia guľôčok, rotácia a odraz od mantinelu.
• src/core/rules.js: pravidlá ôsmičky a rozhodnutia o faule.
• src/core/ai.js: ako CPU vyberá úder.
• src/game/controls.js: mierenie, sila a vstup rotácie.
• src/game/progress.js: úspechy, povrchy stolov, tágy a bodovanie zápasu.
• src/game/i18n.js: text v 14 jazykoch.
• src/game/localRecords.js: história lokálnych skóre.
• src/game/audio.js: zvukové efekty a prehrávanie hudby.
• css/style.css a css/fonts.css: téma, responzívne rozloženie a deklarácie písiem.
• assets/: grafika, zvuk a písma, s podpriečinkom logo/.

Všimnite si rozdelenie. Pravidlá, fyzika a CPU sú v src/core. Vstup, uloženia, texty a zvuk sú v src/game. Návod žiada meniť jednu funkciu naraz a toto rozloženie to robí reálnym: úprava mantinelu a oprava prekladu sa dotknú rôznych súborov.

Návod tiež uvádza, že kód v source/src a game/src je obyčajný, formátovaný JavaScript, bez minifikovaných alebo zabalených súborov. Velvet Pool je Vanilla JavaScript na WebGL2 a nepoužíva žiadnu knižnicu kódu, vrátane Three.js. Zoznam zmien to potvrdzuje: verzia 1.0.1 rozdelila dlhé jednoriadkové reťazce v zvuku, preklade a shaderoch na čitateľné riadky, so zachovaným správaním.

Puttide: rovnaké rozloženie, plus knižnice

Puttide, naša 3D edícia minigolfu, používa rovnaké štyri priečinky a pridáva jednu vec: dve knižnice tretích strán, ktoré hra potrebuje. Three.js r186 (MIT) a Rapier 3D 0.21.0 (Apache-2.0) sú v lib/three/ a lib/rapier/ a import map v index.html hovorí prehliadaču, kde ich nájsť. FAQ Puttide uvádza, že nič sa nenačítava z CDN, takže hra potrebuje len váš vlastný server. Návod pridáva, že súbory knižníc sú formátované tak, aby sa dali čítať, bez zmeny správania.

Jej mapa súborov, opäť relatívne voči source/ alebo game/:

• src/course/courses.js: poradie dráh a podmienky odomykania.
• src/course/holes.js: geometria, par a prekážky dráhy Ruins. pier.js, ice.js, lava.js a sky.js obsahujú ďalšie štyri.
• src/sim/constants.js: ladenie fyziky.
• src/game/economy.js: definície a ceny loptičiek, stôp a výbavy.
• src/ui/i18n.js a ďalšie tri slovníkové súbory: jazykový text.
• css/style.css: farby rozhrania, písma a responzívne štýly.
• fonts/ a music/: webové písma s licenciami a dve hudobné stopy.

Návodový recept na novú dráhu: skopírujte definíciu v správnom súbore dráhy, dajte jej jedinečné id, nastavte par, pozície odpalu a jamky, pridajte ju do dráhy a potom doplňte jej názov a tip do jazykových slovníkov. Takýto recept si prečítajte ešte pred kúpou. Ak to vyzerá ako práca, ktorú zvládnete, balík vám sedí.

Pozrite si edíciu Puttide

Keď zdroj potrebuje krok zostavenia

„Bez kroku zostavenia“ platí pre niektoré edície a pre iné nie, takže overte edíciu, nie obchod. Tu je päť našich edícií vedľa seba s katalógovými cenami.

• Velvet Pool, 39 USD: obyčajné JavaScript moduly na WebGL2. Upravte source/, skopírujte do game/. Node.js 20+ len pre voliteľné testy.
• Puttide, 39 USD: obyčajné JavaScript moduly s Three.js a Rapier v lib/. Bez kroku zostavenia. Node.js je voliteľný, len na správu verzií knižníc.
• Ricopop, 39 USD: obyčajné HTML, CSS a JavaScript moduly, pričom game/ je sám zdrojom. Voliteľné nástroje pre vývojárov (Node.js 20+): lokálny server, kontrola levelov a testy.
• Pinloop, 24 USD: TypeScript s Vite. Priečinok game/ obsahuje čitateľný JavaScript a CSS. Node.js 22.12+ a npm len na úpravu a znovu zostavenie zdroja.
• Sunset Rally, 39 USD: TypeScript s Three.js r184 a Vite. Priečinok game/ je už zostavený a nezminifikovaný. Node.js len ak zostavujete znova.

Pre Sunset Rally návod odporúča Node.js 24 LTS. V source/ spustíte npm ci, npm run typecheck a npm run build, potom zverejníte len obsah dist/. Žiada tiež, aby ste pri znovu zostavení nechali vypnuté minify a cssMinify, lebo dodaný beh je formátovaný na čítanie. Nahrajte výsledok, nikdy nie node_modules/.

Pozrite si edíciu Sunset Rally

Nasadenie: čo v praxi znamená „statický“

Statické hostovanie znamená, že váš server len podáva súbory. Návody Velvet Pool a Puttide dávajú celú inštaláciu v troch krokoch:

1. Rozbaľte ZIP.
2. Nahrajte všetko vnútri game/ do priečinka na svojom webe, napríklad public_html/velvet-pool/, cez FTP alebo správcu súborov hostingu, s ponechaním podpriečinkov.
3. Otvorte túto adresu v prehliadači.

Nezúčastňuje sa tu npm, terminál, krok zostavenia, PHP, databáza ani účet. Podľa tých istých návodov ľudia zvyknú klopýtať o tieto veci:

• Neklikajte dvakrát na index.html. Prehliadače blokujú herné moduly na file://. Na lokálny test spustite v game/ príkaz python -m http.server 8765 a otvorte http://localhost:8765/.
• Váš server musí posielať súbory .js s JavaScriptovým MIME typom a .wasm ako application/wasm. Zlý MIME typ sa prejaví chybou module refused.
• Pri verejnom hostovaní používajte HTTPS.
• Uloženia patria pôvodu prehliadača (protokol, server a port). Ak presuniete hru na inú doménu, hráči začnú od nuly.
• Pri každom novom načítaní stránky stále potrebujete svoj hosting, takže nejde o inštalovateľnú offline aplikáciu.

Kde sú logo, farby, pravidlá a preklady

Každý návod má časť o prispôsobení a jej rozsah sa medzi edíciami líši. Toto hovorí každý z nich.

Velvet Pool

• Logo a značka: vymeňte súbory v assets/logo/ a upravte zodpovedajúce rozmery v CSS.
• Štýly stola a tágov: ich definície sú v progress.js. Zachovajte stabilné id položiek, aby uložená kozmetika ďalej fungovala.
• Správanie CPU v ai.js, fyzika v physics.js. Po zmene pravidiel alebo fyziky spustite testy ôsmičky.
• Preklady: src/game/i18n.js, so zoznamom jazykov v LANGS.

Puttide

• Farby a písma: css/style.css.
• Fyzika: src/sim/constants.js. Ceny kozmetiky: src/game/economy.js, so zachovaním existujúcich id.
• Hudba: skopírujte licencovaný súbor do music/ a aktualizujte mapovanie stôp v src/audio/audio.js.
• Dráhy, par a odomykanie: súbory dráh opísané vyššie.

Gridspark a Sunset Rally

V Gridspark podľa jeho FAQ položky žije text rozhrania v src/locales.js, konštanty pravidiel a paleta v src/config.js a pravidlá hádanky v game.js, board.js, generator.js a shapes.js. V Sunset Rally sú podmienky hviezd a zápasov kampane v Campaign.ts, miesta v Places.ts, fyzika v physics.ts a bodovanie v match.ts. Jej anglické a portugalské reťazce sú v src/i18n.ts, ostatných 12 jazykov v src/locales/.

Všimnite si, čo návody vynechávajú. Návod Puttide pokrýva farby, fyziku, dráhy, ceny a hudbu, ale nemá krok na výmenu loga a návod Sunset Rally nemá samostatnú časť o značke. Ak je značka prvá vec, ktorú budete meniť, opýtajte sa skôr, než kúpite.

Pozrite si edíciu Gridspark

Automatizované testy: čo kontrolujú a čo nie

Priečinok source/ v Velvet Pool obsahuje sadu testov. S Node.js 20 alebo novším otvorte terminál v source/ a spustite npm test, čo je to isté ako node tests/run.js. Nie je potrebná inštalácia závislostí. Podľa návodu sada kontroluje fyziku, pravidlá ôsmičky, zápasy s CPU a konzistenciu kľúčov prekladu, a nenahrádza testovanie v prehliadačoch a na skutočných zariadeniach.

Kontrola kľúčov prekladu je presne ten druh testu, ktorý hra s 14 jazykmi potrebuje: pridáte kľúč v jednom jazyku, zabudnete na iný a človek si to môže všimnúť až po týždňoch.

Nie každá edícia má testy. Návod Puttide žiadne neuvádza, len manuálne kontroly. Pinloop a Beep Out uvádzajú npm test medzi vývojárskymi príkazmi a nástroje pre vývojárov Ricopop obsahujú kontrolu levelov.

Licencia, oznámenia tretích strán a zoznam zmien

Podľa obchodných podmienok každý nákup dáva trvalú, nevýhradnú licenciu na použitie edície v jednom koncovom produkte, vašom alebo jedného klienta. Kód, grafiku a zvuk v ňom môžete meniť a hráči ho môžu používať zadarmo alebo cez reklamu. Nesmiete šablónu, jej zdroj ani assety samostatne preprodávať, zdieľať ani redistribuovať, ani ako šablónu, sadu či balík assetov, ani v rámci iného produktu určeného pre vývojárov. Licencia nevyprší, keď skončí podpora.

Časti tretích strán si ponechávajú vlastné licencie a oznámenia si ponechávate so svojím produktom. Vo Velvet Pool ide o dve písma, Manrope a Fraunces, pod SIL Open Font License 1.1, s textami v THIRD-PARTY-LICENSES/ a vedľa písem. V Puttide zoznam pridáva Three.js (MIT), Rapier (Apache-2.0) a písma Rubik a Fredoka (OFL 1.1).

Zoznam zmien ukazuje, ako sa balík udržiava. Velvet Pool 1.0.1 (18. októbra 2026) rozdelil dlhé reťazce na čitateľné riadky a zhromaždil oznámenia o licenciách do jedného plochého priečinka. Verzia 1.1.0 (22. októbra 2026) priniesla rozhranie v 14 jazykoch. Tieto záznamy sú na stránke položky. Podmienky hovoria, že aktualizácie tej istej edície sa po zverejnení objavia vo vašej knižnici, bez sľubu aktualizácií na pevne stanovené obdobie.

Ako za hodinu prečítať kód hry, ktorú ste kúpili

Toto je navrhnutý plán, nie sľúbený čas. Vychádza z rozloženia Velvet Pool a používa len to, čo balík dáva.

1. Minúty 0 až 10: rozbaľte ZIP, prelistujte README v source/ a mapu súborov z návodu. Otvorte index.html a pozrite, aké skripty a štýly načítava.
2. Minúty 10 až 20: spustite npm test v source/ (Node.js 20+), aby ste mali zelený východiskový stav.
3. Minúty 20 až 35: čítajte src/core skôr než src/game. Začnite s rules.js, potom ai.js, potom physics.js. To je samotná hra. Ovládanie, postup, texty a zvuk sú okolo nej len technické zázemie.
4. Minúty 35 až 40: všimnite si, že id položiek a kľúče uložení musia zostať stabilné, inak hráči prídu o uloženú kozmetiku.
5. Minúty 40 až 55: urobte jednu malú zmenu, napríklad definíciu stola v progress.js. Skopírujte súbor na rovnakú cestu v game/, spustite game/ cez python -m http.server 8765 a pozrite výsledok. Nikdy ho neotvárajte cez file://.
6. Minúty 55 až 60: spustite testy znova.

ES moduly v importe uvádzajú, čo potrebujú, takže reťazec môžete sledovať od prvého skriptu, ktorý stránka načíta. Preto sa edícia s obyčajnými súbormi dá čítať týmto tempom.

Otázky, ktoré položte pred kúpou zdrojového kódu

• Môžem si pred platbou prečítať návod a zahrať demo? Pri našich edíciách sú obe veci odkázané zo stránky položky.
• Je tu zostavenie pripravené na hostovanie a samostatný vývojársky zdroj?
• Je kód čitateľný, alebo minifikovaný? Otvorte jeden skript a pozrite sa.
• Potrebujem Node.js, npm, PHP alebo databázu, a ktoré verzie?
• Načítava hra niečo z CDN alebo z inej stránky?
• Ktoré knižnice tretích strán sú vnútri a pod akými licenciami?
• V koľkých projektoch ju môžem použiť a môžem ju ďalej rozdávať?
• Ako dlho trvá podpora a čo pokrýva? Naša je 6 mesiacov, alebo 12 s predĺžením zvoleným pri pokladni, a pokrýva otázky o inštalácii a používaní súborov a reprodukovateľné chyby.
• Čo je vynechané?
• Existuje zoznam zmien a nedávne vydanie?
• Aké je pravidlo vrátenia peňazí? Naše: šablóny sú digitálne produkty, takže peniaze vrátime len vtedy, ak šablónu ešte nestiahnete alebo má chybu, ktorú nevieme opraviť. Žiadosť podáte napísaním štúdiu s číslom licencie.

Čo tieto edície nezahŕňajú

Niektoré edície pridávajú voliteľné doplnky. Ricopop a Zabum obsahujú jednosúborový PHP rebríček, ktorý je predvolene vypnutý. Je to neformálna spoločná tabuľa skóre, ktorá ukladá skóre do súboru. Nie je to rebríček odolný voči podvodom a nie je to živý multiplayer.

Podpora pokrýva otázky o inštalácii a používaní dodaných súborov a opravu reprodukovateľných chýb v dodanej hre. To je hranica a lepšie je ju poznať hneď prvý deň.

Často kladené otázky

Aký je rozdiel medzi priečinkom hry a priečinkom zdroja?

game/ je zostavenie, ktoré nahrávate na hosting. source/ je upraviteľná vývojárska edícia tej istej hry. Vo Velvet Pool a Puttide majú rovnaké rozloženie, takže súbor upravený v source/ sa skopíruje na tú istú cestu v game/. V TypeScript edíciách ako Sunset Rally je source/ projekt, ktorý znovu zostavujete, a zverejníte nový výstup.

Potrebujem npm alebo Node.js na používanie hry?

Na hostovanie nie. Node.js sa objaví len pri voliteľných testoch Velvet Pool (20 alebo novší) alebo pri znovu zostavení TypeScript edícií ako Sunset Rally (odporúčaný 24 LTS) a Pinloop (22.12 alebo novší).

Je zdrojový kód minifikovaný?

V edíciách, ktoré tu rozoberáme, nie. Velvet Pool a Puttide sú obyčajný, formátovaný JavaScript a verzia 1.0.1 oboch rozdelila dlhé jednoriadkové reťazce na čitateľné riadky. Beh Sunset Rally je dodaný formátovaný, s vypnutou minifikáciou.

Môžem jeden nákup použiť pre viac projektov alebo klientov?

Licencia pokrýva jeden koncový produkt, vašu alebo jedného klienta. Druhý produkt je mimo nej.

Môžem šablónu preprodať alebo zdieľať jej zdrojový kód?

Nie: ani samostatne, ani ako šablónu, sadu či balík assetov, ani v rámci iného produktu určeného pre vývojárov. Kód, grafiku a zvuk môžete meniť v rámci svojho vlastného koncového produktu.

Môžem si návod prečítať pred kúpou?

Áno. Každá stránka položky odkazuje na jej návod a na hrateľné demo tej istej edície.

Otvorte balík, skôr než kúpite

Vyberte edíciu, otvorte jej návod zo stránky položky, zahrajte demo a porovnajte mapu súborov s otázkami vyššie. Ak návod na ne odpovedá, mal by na ne odpovedať aj balík. Ak nie, napíšte štúdiu, skôr než zaplatíte.

Prezrite si všetky šablóny