Izvorni kod HTML5 igre: otvorili smo pravi paket da vidiš što je unutra

„Izvorni kod HTML5 igre“ može značiti tri različite stvari: izgradnju spremnu za učitavanje, razvojne datoteke koje uređuješ ili projekt koji se otvara samo u jednom određenom uređivaču. Predložak HTML5 igre s izvornim kodom s naše tržnice prve dvije stvari spojene zajedno, kao obične web datoteke, a ovaj vodič otvara prave pakete da pokaže kako to izgleda.

Prodajemo ove predloške, pa ovo čitaj kao obilazak vlastitih paketa, a ne kao neutralan pregled tržišta. Prošli smo kroz više izdanja, uglavnom Velvet Pool, Puttide i Sunset Rally, pročitali njihove javne priručnike i uvjete trgovine te zapisali što je u paketu, što ti treba za pokretanje i što tu nije. Svaki priručnik povezan je sa stranice stavke, pa možeš provjeriti svaki redak prije plaćanja.

Što može značiti „izvorni kod HTML5 igre“

Prodavatelji riječ izvorni kod koriste olako. Tri pitanja razvrstavaju što se zapravo prodaje.

Izgradnja, izvor za programere ili oboje?

Izgradnja je gotova igra onakva kakvu je preglednik učitava: index.html, skripte, slike i zvučne datoteke. Možeš je postaviti onakvu kakva jest. Izvor za programere je verzija napravljena da ljudi uređuju, s datotekama podijeljenima po zadatku. Paket samo s izgradnjom možeš učitati, ali ga nije ugodno mijenjati. Paket samo s izvorom možda treba alate prije nego se uopće pokrene. Izdanja u ovom vodiču stavljaju oboje u jedan ZIP: obično mapu game/ za objavu i mapu source/ za uređivanje (u Ricopopu je game/ sam izvor).

Čitljiv ili minificiran kod?

Minificiranje stlači skripte u nekoliko gustih redaka s kratkim nazivima, što se brže preuzima i užasno čita. Obfuskacija ide dalje i namjerno miješa nazive. Ni jedno ne šteti uživo postavljenoj stranici. Oba štete ako si kupio kod da ga mijenjaš. Prije plaćanja otvori jednu skriptu uživo demo igre u alatima za razvojne programere svog preglednika i provjeri bi li je mogao pratiti.

Obične datoteke ili projekt u uređivaču?

Neki predlošci dolaze kao projekt za određeni uređivač igara i otvaraju se samo u njemu. Drugi su obične web datoteke koje otvara bilo koji uređivač koda. Izdanja u ovom vodiču su druga vrsta: HTML, CSS, JavaScript i JSON, a u nekima i TypeScript.

Pregledaj predloške

Što je u paketu Polar Games

Uzmimo Velvet Pool, naše izdanje biljara s 8 kugli. Njegov priručnik opisuje četiri mape u ZIP-u:

• game/ je izdanje spremno za učitavanje i jedina mapa koju objavljuješ.
• source/ je ista igra kao uređivo izdanje za programere, s README-jem, package.json-om i testovima.
• documentation/ sadrži ilustrirani vodič i njegove slike.
• THIRD-PARTY-LICENSES/ sadrži tekstove licenci za fontove i README.txt sa sažetkom.

U tvojoj biblioteci isti paket nudi se kao dva preuzimanja: kompletan paket (izvor i priručnik) ili samo igra, spremna za postavljanje.

game/ i source/ dijele isti raspored. Za Velvet Pool priručnik kaže da datoteke uređuješ u source/ i promijenjene kopiraš na istu putanju u game/. Između ničega se ne prevodi.

Pogledaj izdanje Velvet Pool

Unutar Velvet Poola: karta datoteka

Karta datoteka najjeftiniji je način da procijeniš bazu koda prije kupnje. Ovo je ona iz priručnika za Velvet Pool, s putanjama relativnim prema source/ ili game/:

• src/core/physics.js: simulacija kugli, rotacija i odgovor na odbojnik.
• src/core/rules.js: pravila 8 kugli i odluke o prekršajima.
• src/core/ai.js: kako CPU bira udarac.
• src/game/controls.js: ulaz za nišanjenje, snagu i rotaciju.
• src/game/progress.js: postignuća, podloge, štapovi i bodovanje mečeva.
• src/game/i18n.js: tekst na 14 jezika.
• src/game/localRecords.js: lokalna povijest rezultata.
• src/game/audio.js: efekti i reprodukcija glazbe.
• css/style.css i css/fonts.css: tema, responzivni raspored i deklaracije fontova.
• assets/: grafika, zvuk i fontovi, s podmapom logo/.

Primijeti podjelu. Pravila, fizika i CPU žive u src/core. Ulaz, spremanja, tekstovi i zvuk žive u src/game. Priručnik traži da mijenjaš jednu značajku po jednu, a ovaj raspored to čini realnim: podešavanje odbojnika i ispravak prijevoda diraju različite datoteke.

Priručnik također navodi da je kod u source/src i game/src običan, formatiran JavaScript, bez minificiranih ili spojenih datoteka. Velvet Pool je Vanilla JavaScript na WebGL2 i ne koristi nijednu biblioteku s koda, uključujući Three.js. Changelog to potvrđuje: verzija 1.0.1 razdijelila je duge jednoredne nizove u zvuku, prijevodima i shaderima na čitljive retke, uz nepromijenjeno ponašanje.

Puttide: isti raspored, plus biblioteke

Puttide, naše 3D izdanje mini golfa, koristi iste četiri mape i dodaje jednu stvar: dvije biblioteke trećih strana koje igra treba. Three.js r186 (MIT) i Rapier 3D 0.21.0 (Apache-2.0) nalaze se u lib/three/ i lib/rapier/, a import map u index.html govori pregledniku gdje ih naći. FAQ za Puttide navodi da se ništa ne učitava s CDN-a, pa igri treba samo tvoj vlastiti hosting. Priručnik dodaje da su datoteke biblioteka formatirane tako da se mogu čitati, bez izmjena ponašanja.

Njegova karta datoteka, opet relativno prema source/ ili game/:

• src/course/courses.js: redoslijed staza i uvjeti za otključavanje.
• src/course/holes.js: geometrija, par i prepreke staze Ruins. pier.js, ice.js, lava.js i sky.js drže ostalih četiri.
• src/sim/constants.js: podešavanje fizike.
• src/game/economy.js: definicije i cijene kuglica, tragova i odjeće.
• src/ui/i18n.js i još tri rječničke datoteke: tekst na jezicima.
• css/style.css: boje sučelja, fontovi i responzivni stilovi.
• fonts/ i music/: web fontovi s licencama i dvije glazbene teme.

Recept priručnika za novu rupu: dupliciraj definiciju u odgovarajućoj datoteci staze, daj joj jedinstveni id, postavi par, pozicije starta i jažice, dodaj je u stazu, pa zatim u jezične rječnike dodaj njezin naziv i savjet. Pročitaj takav recept prije kupnje. Ako ti izgleda kao posao koji možeš obaviti, paket ti odgovara.

Pogledaj izdanje Puttide

Kad izvor treba korak izgradnje

„Nema koraka izgradnje“ vrijedi za neka izdanja, a za druga ne, pa provjeri izdanje, a ne trgovinu. Evo pet naših izdanja jedno pored drugog, s redovnim cijenama.

• Velvet Pool, 39 $: običan JavaScript moduli na WebGL2. Uređuj source/, kopiraj u game/. Node.js 20+ samo za opcijske testove.
• Puttide, 39 $: običan JavaScript moduli s Three.js i Rapierom u lib/. Bez koraka izgradnje. Node.js je opcijski i samo za upravljanje verzijama biblioteka.
• Ricopop, 39 $: običan HTML, CSS i JavaScript moduli, a game/ je sam izvor. Opcijski alati za programere (Node.js 20+): lokalni server, provjera razina i testovi.
• Pinloop, 24 $: TypeScript s Vite. Mapa game/ ima čitljiv JavaScript i CSS. Node.js 22.12+ i npm samo za uređivanje i ponovnu izgradnju izvora.
• Sunset Rally, 39 $: TypeScript s Three.js r184 i Vite. Mapa game/ već je izgrađena i nije minificirana. Node.js samo ako ponovno gradiš.

Za Sunset Rally priručnik preporučuje Node.js 24 LTS. Unutar source/ pokrećeš npm ci, npm run typecheck i npm run build, pa objavljuješ samo sadržaj mape dist/. Također traži da pri ponovnoj izgradnji ostaviš minify i cssMinify isključenima, jer je isporučeno izvođenje formatirano za čitanje. Učitaj rezultat, nikad node_modules/.

Pogledaj izdanje Sunset Rally

Postavljanje: što „statično“ znači u praksi

Statični hosting znači da tvoj host samo poslužuje datoteke. Priručnici za Velvet Pool i Puttide daju cijelu instalaciju u tri koraka:

1. Raspakiraj ZIP.
2. Učitaj sve iz game/ u mapu na svojoj stranici, na primjer public_html/velvet-pool/, putem FTP-a ili upravitelja datoteka hostinga, zadržavajući podmape.
3. Otvori tu adresu u pregledniku.

Nisu uključeni npm, terminal, korak izgradnje, PHP, baza podataka ni račun. Što ljude zna zbuniti, prema istim priručnicima:

• Nemoj dvaput kliknuti index.html. Preglednici blokiraju module igre na file://. Za lokalni test pokreni python -m http.server 8765 unutar game/ i otvori http://localhost:8765/.
• Tvoj server mora slati .js datoteke s JavaScript MIME tipom, a .wasm kao application/wasm. Pogrešan MIME tip pojavljuje se kao poruka o odbijenom modulu.
• Za javni hosting koristi HTTPS.
• Spremanja pripadaju izvoru preglednika (protokol, domena i port). Premjestiš li igru na drugu domenu, igrači kreću od nule.
• Svako ponovno učitavanje stranice i dalje treba tvoj host, pa ovo nije aplikacija koja se može instalirati i raditi bez mreže.

Gdje žive logotip, boje, pravila i prijevodi

Svaki priručnik ima odjeljak o prilagodbi, a što pokriva razlikuje se od izdanja do izdanja. Evo što svaki kaže.

Velvet Pool

• Logotip i brend: zamijeni datoteke u assets/logo/ i prilagodi odgovarajuće dimenzije u CSS-u.
• Stilovi stolne podloge i štapova: njihove definicije su u progress.js. Zadrži stabilne ID-ove predmeta da spremljena kozmetika i dalje radi.
• Ponašanje CPU-a u ai.js, fizika u physics.js. Nakon promjene pravila ili fizike pokreni testove za 8 kugli.
• Prijevodi: src/game/i18n.js, s popisom jezika u LANGS.

Puttide

• Boje i fontovi: css/style.css.
• Fizika: src/sim/constants.js. Cijene kozmetike: src/game/economy.js, uz zadržavanje postojećih ID-ova.
• Glazba: kopiraj licenciranu datoteku u music/ i ažuriraj mapiranje staza u src/audio/audio.js.
• Rupe, par i otključavanja: datoteke staze opisane gore.

Gridspark i Sunset Rally

U Gridsparku, prema njegovom FAQ-u za stavke, tekst sučelja je u src/locales.js, konstante pravila i paleta u src/config.js, a pravila zagonetke u game.js, board.js, generator.js i shapes.js. U Sunset Rallyju uvjeti kampanje i zvjezdica nalaze se u Campaign.ts, lokacije u Places.ts, fizika u physics.ts, a bodovanje u match.ts. Njegovi engleski i portugalski nizovi su u src/i18n.ts, ostalih 12 jezika u src/locales/.

Primijeti što priručnici izostavljaju. Priručnik za Puttide pokriva boje, fiziku, rupe, cijene i glazbu, ali nema korak za zamjenu logotipa, a priručnik za Sunset Rally nema zasebni odjeljak o brendiranju. Ako će ti brendiranje biti prva stvar koju mijenjaš, pitaj prije kupnje.

Pogledaj izdanje Gridspark

Automatizirani testovi: što provjeravaju, a što ne

Mapa source/ Velvet Pooila uključuje paket testova. S Node.js 20 ili novijim, otvori terminal unutar source/ i pokreni npm test, što je isto kao node tests/run.js. Instalacija ovisnosti nije potrebna. Prema priručniku, paket provjerava fiziku, pravila 8 kugli, CPU mečeve i dosljednost ključeva prijevoda, a ne zamjenjuje testiranje u preglednicima i na pravim uređajima.

Provjera ključeva prijevoda vrsta je testa kakvu igra s 14 jezika treba: dodaj ključ u jednom jeziku, zaboravi drugi, a čovjek to možda neće primijetiti tjednima.

Nemaju svi izdanja testove. Priručnik za Puttide ne opisuje nijedan, samo ručne provjere. Pinloop i Beep Out navode npm test među naredbama za programere, a alati za programere Ricoppa uključuju provjeru razina.

Licenca, obavijesti trećih strana i changelog

Prema uvjetima trgovine, svaka kupnja daje trajnu, nekskluzivnu licencu za korištenje izdanja u jednom krajnjem proizvodu, tvom ili jednog klijenta. Smiješ mijenjati kod, grafiku i zvuk unutar njega, a igrači ga smiju koristiti besplatno ili uz oglase. Ne smiješ preprodavati, dijeliti ni ponovno distribuirati predložak, njegov izvor ili njegove resurse samostalno, kao predložak, komplet ili paket resursa, ni unutar drugog proizvoda namijenjenog programerima. Licenca ne ističe kad istekne podrška.

Dijelovi trećih strana zadržavaju vlastite licence, a obavijesti zadržavaš uz svoj proizvod. U Velvet Poolu to su dva fonta, Manrope i Fraunces, pod SIL Open Font License 1.1, s tekstovima u THIRD-PARTY-LICENSES/ i uz same fontove. U Puttideu popis dodaje Three.js (MIT), Rapier (Apache-2.0) i fontove Rubik i Fredoka (OFL 1.1).

Changelog pokazuje kako se paket održava. Velvet Pool 1.0.1 (18. listopada 2026.) razdijelio je duge nizove na čitljive retke i skupio obavijesti o licencama u jednu ravnu mapu. Verzija 1.1.0 (22. listopada 2026.) donijela je sučelje na 14 jezika. Ti su unosi na stranici stavke. Uvjeti kažu da se ažuriranja istog izdanja pojavljuju u tvojoj biblioteci kad se objave, bez obećanja ažuriranja u fiksnom razdoblju.

Kako pročitati kod igre koju si kupio za sat vremena

Ovo je predloženi plan, a ne obećano vrijeme. Slijedi raspored Velvet Poola i koristi samo ono što paket daje.

1. Minute 0 do 10: raspakiraj ZIP, prelistaj README u source/ i kartu datoteka iz priručnika. Otvori index.html i vidi koje skripte i stilske datoteke učitava.
2. Minute 10 do 20: pokreni npm test unutar source/ (Node.js 20+) da dobiješ zeleni početak.
3. Minute 20 do 35: čitaj src/core prije src/game. Počni s rules.js, zatim ai.js, pa physics.js. To je sama igra. Kontrole, napredak, tekstovi i zvuk su instalacija oko nje.
4. Minute 35 do 40: primijeti da ID-ovi predmeta i ključevi spremanja moraju ostati stabilni, inače igrači gube spremljenu kozmetiku.
5. Minute 40 do 55: napravi jednu malu promjenu, na primjer definiciju podloge u progress.js. Kopiraj datoteku na istu putanju u game/, posluži game/ s python -m http.server 8765 i pogledaj rezultat. Nikad ne otvaraj preko file://.
6. Minute 55 do 60: pokreni testove ponovno.

ES moduli u redcima uvoza imenuju što trebaju, pa možeš pratiti lanac od prve skripte koju stranica učitava. Zato se izdanje s običnim datotekama može čitati tim tempom.

Pitanja koja postaviti prije kupnje izvornog koda

• Mogu li pročitati priručnik i isprobati demo prije plaćanja? Za naša izdanja oboje je povezano sa stranice stavke.
• Postoji li izgradnja spremna za postavljanje i zaseban izvor za programere?
• Je li kod čitljiv ili minificiran? Otvori jednu skriptu i pogledaj.
• Trebam li Node.js, npm, PHP ili bazu podataka i koje verzije?
• Učitava li igra išta s CDN-a ili s druge stranice?
• Koje su biblioteke trećih strana unutra i pod kojim licencama?
• U koliko projekata smijem to koristiti i smijem li to ponovno distribuirati?
• Koliko traje podrška i što pokriva? Naša traje 6 mjeseci, ili 12 uz produženje odabrano pri plaćanju, a pokriva pitanja o instalaciji i korištenju datoteka te ponovljive greške.
• Što je izostavljeno?
• Postoji li changelog i nedavno izdanje?
• Kakvo je pravilo za povrat? Naše: predlošci su digitalni proizvodi, pa vraćamo novac samo ako nisi još preuzeo predložak ili ako ima grešku koju ne možemo ispraviti. Zahtjev šalješ dopisom studiju s brojem licence.

Što ova izdanja ne uključuju

Neka izdanja dodaju opcijske dodatke. Ricopop i Zabum uključuju jednodatotečnu PHP ljestvicu koja je isključena prema zadanim postavkama. To je neobična zajednička ljestvica koja rezultate sprema u datoteku, a ne rang-lista otporna na varanje, i nije živa višekorisnička igra.

Podrška pokriva pitanja o instalaciji i korištenju isporučenih datoteka te ispravak ponovljivih grešaka u isporučenoj igri. To je granica, i bolje je znati je prvog dana.

Često postavljana pitanja

Koja je razlika između mape igre i mape izvora?

game/ je izgradnja koju učitavaš na svoj host. source/ je uređivo izdanje za programere iste igre. U Velvet Poolu i Puttideu dijele isti raspored, pa se datoteka uređena u source/ kopira na istu putanju u game/. U TypeScript izdanjima poput Sunset Rallyja source/ je projekt koji ponovno gradiš, a objavljuješ novi izlaz.

Trebam li npm ili Node.js za korištenje igre?

Ne za postavljanje. Node.js se pojavljuje samo za opcijske testove u Velvet Poolu (20 ili noviji) ili za ponovnu izgradnju TypeScript izdanja poput Sunset Rallyja (preporučeno 24 LTS) i Pinloopa (22.12 ili noviji).

Je li izvorni kod minificiran?

Ne u izdanjima obrađenima ovdje. Velvet Pool i Puttide su običan, formatirani JavaScript, a verzija 1.0.1 oboje je razdijelila duge jednoredne nizove na čitljive retke. Izvođenje Sunset Rallyja isporučuje se formatirano, uz isključenu minifikaciju.

Mogu li jednu kupnju koristiti za nekoliko projekata ili klijenata?

Licenca pokriva jedan krajnji proizvod, tvoj ili jednog klijenta. Drugi proizvod je izvan nje.

Mogu li preprodavati ili dijeliti izvorni kod?

Ne: ne samostalno, ne kao predložak, komplet ili paket resursa i ne unutar drugog proizvoda namijenjenog programerima. Unutar svog krajnjeg proizvoda smiješ mijenjati kod, grafiku i zvuk.

Mogu li pročitati priručnik prije kupnje?

Da. Svaka stranica stavke povezuje svoj priručnik i demo za igranje istog izdanja.

Otvori paket prije kupnje

Odaberi izdanje, otvori njegov priručnik sa stranice stavke, odigraj demo i usporedi kartu datoteka s pitanjima iznad. Ako priručnik na njih odgovara, trebao bi i paket. Ako ne odgovara, piši studiju prije plaćanja.

Pregledaj sve predloške