Zdrojový kód HTML5 hry: otevřeli jsme skutečný balíček

Zdrojový kód HTML5 hry může znamenat tři různé věci: sestavení připravené k nahrání, vývojářské soubory, které upravujete, nebo projekt, který se otevře jen v jednom konkrétním editoru. Šablona HTML5 hry se zdrojovým kódem z naší tržnice je první dvě věci dohromady, jako prosté webové soubory, a tento návod otevírá skutečné balíčky, aby ukázal, jak to vypadá.

Prodáváme tyto šablony, takže to čtěte jako prohlídku našich vlastních balíčků, ne jako neutrální přehled trhu. Prošli jsme několik edic, hlavně Velvet Pool, Puttide a Sunset Rally, přečetli jejich veřejné manuály a obchodní podmínky a zapsali si, co je v krabici, co potřebujete ke spuštění a co tam není. Každý manuál je odkazovaný ze stránky své položky, takže si každý řádek můžete ověřit, než zaplatíte.

Co může znamenat „zdrojový kód HTML5 hry“

Prodejci slovo zdrojový kód používají volně. Tři otázky rozliší, co se ve skutečnosti prodává.

Sestavení, vývojářský zdroj, nebo obojí?

Sestavení je hotová hra tak, jak ji prohlížeč načítá: index.html, skripty, obrázky a zvukové soubory. Můžete ji hostovat tak, jak je. Vývojářský zdroj je verze určená k úpravám, se soubory rozdělenými podle úkolu. Balíček jen se sestavením můžete nahrát, ale ne pohodlně měnit. Balíček jen se zdrojem může před spuštěním potřebovat nástroje. Edice v tomto návodu dávají obojí do jednoho ZIPu: obvykle složku game/ k publikování a složku source/ k úpravám (v Ricopop je samotná složka game/ zdrojem).

Čitelné, nebo minifikované?

Minifikace stlačí skripty do několika hustých řádků s krátkými názvy, což se stahuje rychleji a čte se velmi špatně. Obfuskace jde dál a názvy záměrně zamíchá. Ani jedno neublíží živému webu. Oboje ublíží, pokud jste kód koupili, abyste ho měnili. Před zaplacením otevřete v nástrojích pro vývojáře prohlížeče jeden skript z živého dema a zkuste, jestli ho dokážete sledovat.

Prosté soubory, nebo projekt pro editor?

Některé šablony přicházejí jako projekt pro konkrétní herní editor a otevřete je jen v něm. Jiné jsou prosté webové soubory, které otevře každý editor kódu. Edice v tomto návodu jsou druhého typu: HTML, CSS, JavaScript a JSON, u některých s TypeScriptem.

Prohlédněte si šablony

Co je v balíčku Polar Games

Vezměte Velvet Pool, naši edici kulečníku s osmičkou. Jeho manuál popisuje ve ZIPu čtyři složky:

• game/ je edice připravená k nahrání a jediná složka, kterou publikujete.
• source/ je stejná hra jako upravitelná vývojářská edice, s README, souborem package.json a testy.
• documentation/ obsahuje ilustrovaný průvodce a jeho obrázky.
• THIRD-PARTY-LICENSES/ obsahuje texty licencí písem a shrnutí v souboru README.txt.

Ve vaší knihovně je stejný balíček nabízen jako dva soubory ke stažení: kompletní balíček (zdroj a manuál), nebo jen hru, připravenou k hostování.

game/ a source/ mají stejné uspořádání. U Velvet Pool manuál říká, že máte upravovat soubory v source/ a změněné zkopírovat na stejnou cestu v game/. Mezi tím se nic nekompiluje.

Podívejte se na edici Velvet Pool

Uvnitř Velvet Pool: mapa souborů

Mapa souborů je nejlevnější způsob, jak posoudit kódovou základnu, než ji koupíte. Tohle je ta z manuálu Velvet Pool, s cestami relativními k source/ nebo game/:

• src/core/physics.js: simulace kuliček, spin a odraz od mantinelu.
• src/core/rules.js: pravidla osmičky a rozhodování o faulech.
• src/core/ai.js: jak CPU volí úder.
• src/game/controls.js: míření, síla a vstup spinu.
• src/game/progress.js: úspěchy, plátna, tágra a bodování zápasů.
• src/game/i18n.js: text ve 14 jazycích.
• src/game/localRecords.js: místní historie skóre.
• src/game/audio.js: zvukové efekty a přehrávání hudby.
• css/style.css a css/fonts.css: motiv, responzivní rozvržení a deklarace písem.
• assets/: grafika, zvuk a písma, s podsložkou logo/.

Všimněte si rozdělení. Pravidla, fyzika a CPU žijí v src/core. Vstup, uložení, texty a zvuk žijí v src/game. Manuál žádá měnit vždy jednu funkci a toto uspořádání to činí reálným: úprava mantinelu a oprava překladu se dotýkají jiných souborů.

Manuál také uvádí, že kód v source/src a game/src je prostý, formátovaný JavaScript, bez minifikovaných nebo sbalených souborů. Velvet Pool je Vanilla JavaScript na WebGL2 a nepoužívá žádnou knihovnu kódu, včetně Three.js. Changelog to potvrzuje: verze 1.0.1 rozdělila dlouhé jednořádkové řetězce v zvuku, překladech a shaderech na čitelné řádky, bez změny chování.

Puttide: stejné uspořádání, plus knihovny

Puttide, naše 3D edice minigolfu, používá stejné čtyři složky a přidává jednu věc: dvě knihovny třetích stran, které hra potřebuje. Three.js r186 (MIT) a Rapier 3D 0.21.0 (Apache-2.0) jsou v lib/three/ a lib/rapier/ a import map v index.html říká prohlížeči, kde je najít. FAQ Puttide uvádí, že se nic nenačítá z CDN, takže hra potřebuje jen váš vlastní hosting. Manuál dodává, že soubory knihoven jsou formátované tak, aby se daly číst, a chování je nezměněné.

Jeho mapa souborů, opět relativní k source/ nebo game/:

• src/course/courses.js: pořadí tratí a požadavky na odemykání.
• src/course/holes.js: geometrie, par a překážky tratě Ruins. pier.js, ice.js, lava.js a sky.js obsahují dalších čtyři.
• src/sim/constants.js: ladění fyziky.
• src/game/economy.js: definice a ceny míčků, stopy a oblečení.
• src/ui/i18n.js a tři další slovníkové soubory: jazykový text.
• css/style.css: barvy rozhraní, písma a responzivní styly.
• fonts/ a music/: webová písma s jejich licencemi a dvě hudební stopy.

Postup manuálu pro novou jamku: zkopírujte definici ve správném souboru tratě, dejte jí jedinečné id, nastavte par a pozice odpalovacího místa a jamky, přidejte ji do tratě a potom její název a tip do jazykových slovníků. Než koupíte, přečtěte si takový postup. Pokud vypadá jako práce, kterou zvládnete, balíček vám sedí.

Podívejte se na edici Puttide

Kdy zdroj potřebuje krok sestavení

„Bez kroku sestavení“ platí pro některé edice a pro jiné ne, takže kontrolujte edici, ne obchod. Tady je pět našich edic vedle sebe, s katalogovými cenami.

• Velvet Pool, katalogová cena 39 USD: prosté moduly JavaScriptu na WebGL2. Upravujete source/, kopírujete do game/. Node.js 20+ jen pro volitelné testy.
• Puttide, 39 USD: prosté moduly JavaScriptu s Three.js a Rapier v lib/. Bez kroku sestavení. Node.js je volitelný a jen pro správu verzí knihoven.
• Ricopop, 39 USD: prosté HTML, CSS a moduly JavaScriptu, a game/ je samotný zdroj. Volitelné vývojářské nástroje (Node.js 20+): místní server, kontrola úrovní a testy.
• Pinloop, 24 USD: TypeScript s Vite. Složka game/ obsahuje čitelný JavaScript a CSS. Node.js 22.12+ a npm jen pro úpravu a znovusestavení zdroje.
• Sunset Rally, 39 USD: TypeScript s Three.js r184 a Vite. Složka game/ je už sestavená a nezmenšená. Node.js jen pokud sestavujete znovu.

U Sunset Rally manuál doporučuje Node.js 24 LTS. Uvnitř source/ spustíte npm ci, npm run typecheck a npm run build a potom publikujete jen obsah složky dist/. Také žádá, abyste při sestavení nechali vypnuté minify a cssMinify, protože dodávaný běh je formátovaný pro čtení. Nahrajte výsledek, nikdy node_modules/.

Podívejte se na edici Sunset Rally

Hostování: co v praxi znamená „statické“

Statický hosting znamená, že váš server jen podává soubory. Manuály Velvet Pool a Puttide popisují celou instalaci ve třech krocích:

1. Rozbalte ZIP.
2. Nahrajte vše uvnitř game/ do složky na svém webu, například public_html/velvet-pool/, přes FTP nebo správce souborů vašeho hostingu, a podsložky zachovejte.
3. Otevřete tuto adresu v prohlížeči.

Nejde o npm, terminál, krok sestavení, PHP, databázi ani účet. Podle stejných manuálů lidi zaskočí toto:

• Neklikejte dvakrát na index.html. Prohlížeče blokují herní moduly na file://. Pro místní test spusťte uvnitř game/ příkaz python -m http.server 8765 a otevřete http://localhost:8765/.
• Váš server musí posílat soubory .js s typem JavaScriptu a .wasm jako application/wasm. Špatný typ MIME se projeví jako chyba odmítnutého modulu.
• Pro veřejný hosting použijte HTTPS.
• Uložené hry patří k původu v prohlížeči (protokol, hostitel a port). Přesunete-li hru na jinou doménu, hráči začínají od nuly.
• Při každém novém načtení stránky stále potřebujete hosting, takže nejde o aplikaci instalovatelnou pro práci offline.

Kde jsou logo, barvy, pravidla a překlady

Každý manuál má oddíl o úpravách a to, co pokrývá, se u jednotlivých edic liší. Tohle říká každý z nich.

Velvet Pool

• Logo a značka: nahraďte soubory v assets/logo/ a upravte odpovídající rozměry v CSS.
• Styly plátna a tágra: jejich definice jsou v progress.js. Udržujte stabilní id položek, aby uložená kosmetika dál fungovala.
• Chování CPU v ai.js, fyzika v physics.js. Po změně pravidel nebo fyziky spusťte testy osmičky.
• Překlady: src/game/i18n.js, se seznamem jazyků v LANGS.

Puttide

• Barvy a písma: css/style.css.
• Fyzika: src/sim/constants.js. Ceny kosmetiky: src/game/economy.js, se zachovanými id.
• Hudba: zkopírujte licencovaný soubor do music/ a upravte mapování stop v src/audio/audio.js.
• Jamky, par a odemykání: soubory tratí popsané výše.

Gridspark a Sunset Rally

V Gridspark podle jeho FAQ položky text rozhraní žije v src/locales.js, pravidla a paleta v src/config.js a pravidla hádanky v game.js, board.js, generator.js a shapes.js. V Sunset Rally jsou shody kampaně a podmínky hvězd v Campaign.ts, lokace v Places.ts, fyzika v physics.ts a bodování v match.ts. Anglické a portugalské řetězce jsou v src/i18n.ts, ostatních 12 jazyků v src/locales/.

Všimněte si, co manuály vynechávají. Manuál Puttide pokrývá barvy, fyziku, jamky, ceny a hudbu, ale nemá krok pro výměnu loga, a manuál Sunset Rally nemá samostatný oddíl o značce. Pokud je značka první věc, kterou budete měnit, zeptejte se před koupí.

Podívejte se na edici Gridspark

Automatické testy: co kontrolují a co ne

Složka source/ edice Velvet Pool obsahuje sadu testů. S Node.js 20 nebo novějším otevřete terminál uvnitř source/ a spusťte npm test, což je totéž jako node tests/run.js. Instalace závislostí není potřeba. Podle manuálu sada kontroluje fyziku, pravidla osmičky, zápasy s CPU a shodu klíčů překladů, a nenahrazuje testování v prohlížečích a na skutečných zařízeních.

Kontrola klíčů překladů je přesně ten druh testu, jaký hra se 14 jazyky potřebuje: přidáte klíč v jednom jazyce, zapomenete na jiný, a člověk si toho může všimnout až za týdny.

Ne každá edice má testy. Manuál Puttide žádné nepopisuje, jen ruční kontroly. Pinloop a Beep Out uvádějí npm test mezi vývojářskými příkazy a vývojářské nástroje Ricopop zahrnují kontrolu úrovní.

Licence, oznámení třetích stran a changelog

Podle obchodních podmínek každý nákup dává trvalou, nevýhradní licenci k použití edice v jednom konečném produktu, vašem nebo jednoho klienta. Uvnitř ho smíte měnit kód, grafiku a zvuk a hráči ho mohou používat zdarma, nebo prostřednictvím reklam. Šablonu, její zdroj ani její assety nesmíte dál prodávat, sdílet ani redistribuovat samostatně, jako šablonu, sadu nebo balíček assetů, ani uvnitř jiného produktu určeného pro vývojáře. Licence nevyprší, když skončí podpora.

Části třetích stran si ponechávají vlastní licence a vy s nimi ponecháváte jejich oznámení u svého produktu. U Velvet Pool to znamená dvě písma, Manrope a Fraunces, pod licencí SIL Open Font License 1.1, s texty v THIRD-PARTY-LICENSES/ a vedle písem. U Puttide seznam přidává Three.js (MIT), Rapier (Apache-2.0) a písma Rubik a Fredoka (OFL 1.1).

Changelog ukazuje, jak se o balíček pečuje. Velvet Pool 1.0.1 (18. října 2026) rozdělila dlouhé řetězce na čitelné řádky a soustředila oznámení licencí do jedné ploché složky. Verze 1.1.0 (22. října 2026) přinesla rozhraní ve 14 jazycích. Ty záznamy jsou na stránce položky. Podmínky říkají, že aktualizace téže edice se objeví ve vaší knihovně, až budou zveřejněny, bez slibu aktualizací na pevně stanovenou dobu.

Jak přečíst kód hry, kterou jste koupili, za hodinu

Toto je navrhovaný plán, ne slíbený čas. Vychází z uspořádání Velvet Pool a používá jen to, co balíček dává.

1. 0 až 10 minut: rozbalte ZIP, přelétněte README v source/ a mapu souborů z manuálu. Otevřete index.html a podívejte se, které skripty a styly načítá.
2. 10 až 20 minut: spusťte npm test uvnitř source/ (Node.js 20+), abyste získali zelený výchozí stav.
3. 20 až 35 minut: čtěte src/core dřív než src/game. Začněte rules.js, potom ai.js, potom physics.js. To je samotná hra. Ovládání, postup, texty a zvuk jsou kolem ní instalatérství.
4. 35 až 40 minut: všimněte si, že id položek a klíče uložení musí zůstat stabilní, jinak hráči přijdou o uloženou kosmetiku.
5. 40 až 55 minut: udělejte jednu malou změnu, například definici plátna v progress.js. Zkopírujte soubor na stejnou cestu v game/, spusťte game/ přes python -m http.server 8765 a podívejte se na výsledek. Nikdy ji neotevírejte přes file://.
6. 55 až 60 minut: spusťte testy znovu.

Moduly ES pojmenovávají, co potřebují, ve svých řádcích importu, takže můžete sledovat řetěz od prvního skriptu, který stránka načte. Proto se edice v prostých souborech dá číst takovým tempem.

Otázky před koupí zdrojového kódu

• Můžu si přečíst manuál a vyzkoušet demo před zaplacením? U našich edic obojí odkazuje stránka položky.
• Existuje sestavení připravené k hostování a samostatný vývojářský zdroj?
• Je kód čitelný, nebo minifikovaný? Otevřete jeden skript a podívejte se.
• Potřebuji Node.js, npm, PHP nebo databázi, a které verze?
• Načítá hra cokoli z CDN nebo z jiného webu?
• Které knihovny třetích stran jsou uvnitř a pod jakými licencemi?
• V kolika projektech ji smím použít a smím ji dál šířit?
• Jak dlouho trvá podpora a co pokrývá? Naše trvá 6 měsíců, nebo 12 s prodloužením zvoleným při pokladně, a pokrývá otázky k instalaci a používání souborů a reprodukovatelné chyby.
• Co je vynechané?
• Existuje changelog a nedávné vydání?
• Jaké je pravidlo pro vrácení peněz? Naše: šablony jsou digitální produkty, takže vracíme jen tehdy, pokud jste šablonu ještě nestáhli, nebo pokud obsahuje chybu, kterou nemůžeme opravit. Žádáte napsáním studiu s číslem své licence.

Co tyto edice nezahrnují

Některé edice přidávají volitelné doplňky. Ricopop a Zabum obsahují jednosouborový žebříček v PHP, který je ve výchozím stavu vypnutý. Je to neformální sdílená tabulka skóre, která ukládá skóre do souboru, ne žebříček odolný proti podvodům, a není to živý multiplayer.

Podpora pokrývá otázky k instalaci a používání dodaných souborů a opravu reprodukovatelných chyb v dodané hře. To je hranice a je lepší ji znát od prvního dne.

Často kladené otázky

Jaký je rozdíl mezi složkou game a složkou source?

game/ je sestavení, které nahrajete na svůj hosting. source/ je upravitelná vývojářská edice téže hry. U Velvet Pool a Puttide mají stejné uspořádání, takže soubor, který upravíte v source/, se zkopíruje na stejnou cestu v game/. U edic v TypeScriptu, jako je Sunset Rally, je source/ projekt, který znovu sestavujete, a publikujete nový výstup.

Potřebuji npm nebo Node.js, abych hru používal?

Ne k jejímu hostování. Node.js se objeví jen u volitelných testů Velvet Pool (20 nebo novější) nebo při opětovném sestavení edic v TypeScriptu, jako je Sunset Rally (doporučeno 24 LTS) a Pinloop (22.12 nebo novější).

Je zdrojový kód minifikovaný?

V edicích zde popsaných ne. Velvet Pool a Puttide jsou prostý, formátovaný JavaScript a verze 1.0.1 obou rozdělila dlouhé jednořádkové řetězce na čitelné řádky. Běh Sunset Rally se dodává formátovaný, s vypnutou minifikací.

Mohu jeden nákup použít pro více projektů nebo klientů?

Licence pokrývá jeden konečný produkt, váš nebo jednoho klienta. Druhý produkt je mimo ni.

Mohu zdrojový kód dál prodávat nebo sdílet?

Ne: ani samostatně, ani jako šablonu, sadu nebo balíček assetů, ani uvnitř jiného produktu určeného pro vývojáře. Uvnitř svého vlastního konečného produktu smíte měnit kód, grafiku a zvuk.

Mohu si přečíst manuál před nákupem?

Ano. Každá stránka položky odkazuje na svůj manuál a na hratelné demo téže edice.

Otevřete balíček, než jeden koupíte

Vyberte edici, otevřete její manuál ze stránky položky, vyzkoušejte demo a porovnejte mapu souborů s výše uvedenými otázkami. Pokud manuál na ně odpoví, měl by na ně odpovědět i balíček. Pokud ne, napište studiu, než zaplatíte.

Prohlédněte si všechny šablony