Izvorna koda HTML5 igre: kaj je v pravem paketu

Izraz izvorna koda HTML5 igre lahko pomeni tri različne stvari: gradnjo, pripravljeno za nalaganje, razvijalske datoteke, ki jih urejate, ali projekt, ki se odpre samo v določenem urejevalniku. Predloga HTML5 igre z izvorno kodo z naše tržnice je prvi dve stvari hkrati, kot navadne spletne datoteke. Ta vodnik odpre prave pakete, da pokaže, kako to izgleda.

Ker te predloge prodajamo, berite to kot ogled naših lastnih paketov, ne kot nevtralen pregled trga. Pregledali smo več izdaj, predvsem Velvet Pool, Puttide in Sunset Rally, prebrali njihove javne priročnike in pogoje poslovanja ter zapisali, kaj je v paketu, kaj potrebujete za zagon in česa ni. Vsak priročnik je povezan s strani izdelka, zato lahko vsako vrstico preverite, preden plačate.

Kaj lahko pomeni »izvorna koda HTML5 igre«

Prodajalci uporabljajo besedo izvorna koda površno. Tri vprašanja razvrstijo, kaj se dejansko prodaja.

Gradnja, razvijalska izvorna koda ali obe?

Gradnja je končana igra, kot jo naloži brskalnik: index.html, skripte, slike in zvočne datoteke. Lahko jo gostite takšno, kot je. Razvijalska izvorna koda je različica, narejena za urejanje, z datotekami, razdeljenimi po nalogah. Paket samo z gradnjo lahko naložite, a ga ni udobno spreminjati. Paket samo z izvorno kodo pa morda za zagon potrebuje orodja. Izdaje v tem vodniku dajo obe stvari v en ZIP: ponavadi mapo game/ za objavo in mapo source/ za urejanje (pri Ricopop je game/ sama izvorna koda).

Berljiva ali zmanjšana koda?

Zmanjševanje stisne skripte v nekaj gostih vrstic s kratkimi imeni, kar se hitreje naloži, a je zelo težko brati. Zakrivanje gre dlje in namenoma pomeša imena. Nobeno ne škoduje živemu spletnemu mestu. Oba pa škodujeta, če ste kodo kupili za spremembe. Preden plačate, odprite eno skripto iz žive demo verzije v razvijalskih orodjih brskalnika in preverite, ali bi jo lahko sledili.

Navadne datoteke ali projekt za urejevalnik?

Nekatere predloge pridejo kot projekt za določen urejevalnik iger in jih lahko odprete samo v njem. Druge so navadne spletne datoteke, ki jih odpre vsak urejevalnik kode. Izdaje v tem vodniku so druge vrste: HTML, CSS, JavaScript in JSON, pri nekaterih tudi TypeScript.

Oglejte si predloge

Kaj je v paketu Polar Games

Vzemimo Velvet Pool, našo izdajo biljarda z 8 kroglicami. Njegov priročnik opiše štiri mape v ZIP-u:

• game/ je izdaja, pripravljena za nalaganje, in edina mapa, ki jo objavite.
• source/ je ista igra kot urejevalna razvijalska izdaja, z README, package.json in testi.
• documentation/ vsebuje ilustriran vodnik in njegove slike.
• THIRD-PARTY-LICENSES/ vsebuje besedila licenc pisav in povzetek v README.txt.

V vaši knjižnici je isti paket ponujen kot dva prenosa: celoten paket (izvorna koda in priročnik) ali samo igra, pripravljena za gostovanje.

game/ in source/ imata isto razporeditev. Za Velvet Pool priročnik pravi, naj urejate datoteke v source/ in spremenjene kopirate na isto pot v game/. Vmes ničesar ne prevajate.

Oglejte si izdajo Velvet Pool

V Velvet Pool: zemljevid datotek

Zemljevid datotek je najcenejši način, da presodite kodno bazo, preden kupite. To je tisti iz priročnika za Velvet Pool, s potmi glede na source/ ali game/:

• src/core/physics.js: simulacija kroglic, vrtenje in odboj od roba.
• src/core/rules.js: pravila 8-kroglične igre in odločitve o napakah.
• src/core/ai.js: kako računalnik izbere udarec.
• src/game/controls.js: vnos za ciljanje, moč in vrtenje.
• src/game/progress.js: dosežki, prevleke, palice in točkovanje tekem.
• src/game/i18n.js: besedilo v 14 jezikih.
• src/game/localRecords.js: lokalna zgodovina rezultatov.
• src/game/audio.js: zvočni učinki in predvajanje glasbe.
• css/style.css in css/fonts.css: tema, odzivna postavitev in deklaracije pisav.
• assets/: grafika, zvok in pisave, s podmapo logo/.

Opazite delitev. Pravila, fiziko in računalnik najdete v src/core. Vnos, shranjevanja, besedila in zvok so v src/game. Priročnik prosi, naj spreminjate eno funkcijo naenkrat, in ta razporeditev to omogoča: popravek odboja in popravek prevoda se dotikata različnih datotek.

Priročnik tudi navaja, da je koda v source/src in game/src navadni, oblikovani JavaScript, brez zmanjšanih ali združenih datotek. Velvet Pool je Vanilla JavaScript na WebGL2 in ne uporablja nobene kodne knjižnice, tudi Three.js ne. Dnevnik sprememb to potrjuje: različica 1.0.1 je dolge vrstice z nizi v zvoku, prevodih in senčilnikih razdelila v berljive vrstice, pri čemer vedenje ni bilo spremenjeno.

Puttide: enaka razporeditev, plus knjižnice

Puttide, naša 3D izdaja mini golfa, uporablja iste štiri mape in dodaja eno stvar: dve knjižnici tretjih oseb, ki ju igra potrebuje. Three.js r186 (MIT) in Rapier 3D 0.21.0 (Apache-2.0) sta v lib/three/ in lib/rapier/, uvozni zemljevid v index.html pa brskalniku pove, kje ju najde. FAQ za Puttide navaja, da se ničesar ne nalaga iz CDN-ja, zato igra potrebuje samo vaš gostitelj. Priročnik dodaja, da so datoteke knjižnic oblikovane tako, da jih je mogoče brati, vedenje pa ni spremenjeno.

Njegov zemljevid datotek, spet glede na source/ ali game/:

• src/course/courses.js: vrstni red prog in zahteve za odklepanje.
• src/course/holes.js: geometrija, par in ovire na progi Ruins. pier.js, ice.js, lava.js in sky.js hranijo ostale štiri.
• src/sim/constants.js: nastavitve fizike.
• src/game/economy.js: definicije kroglic, sledi in oblačil ter cene.
• src/ui/i18n.js in tri druge slovarske datoteke: jezikovno besedilo.
• css/style.css: barve vmesnika, pisave in odzivni slogi.
• fonts/ in music/: spletne pisave z licencami in dve glasbeni skladbi.

Recept priročnika za novo luknjo: podvojite definicijo v ustrezni datoteki proge, ji dodelite edinstven id, nastavite par ter položaja štarta in luknje, jo dodajte progi, nato pa še njeno ime in namig v jezikovne slovarje. Preberite tak recept, preden kupite. Če se zdi kot delo, ki ga zmorete, paket ustreza vam.

Oglejte si izdajo Puttide

Kdaj izvorna koda potrebuje korak gradnje

»Brez koraka gradnje« drži za nekatere izdaje, za druge pa ne, zato preverite izdajo, ne trgovine. Tukaj je pet naših izdaj drug ob drugi, s seznamskimi cenami.

• Velvet Pool, navadna cena 39 $: navadni moduli JavaScript na WebGL2. Urejate source/, kopirate v game/. Node.js 20+ samo za neobvezne teste.
• Puttide, 39 $: navadni moduli JavaScript s Three.js in Rapier v lib/. Brez koraka gradnje. Node.js je neobvezen in samo za upravljanje različic knjižnic.
• Ricopop, 39 $: navadni HTML, CSS in moduli JavaScript, game/ je sama izvorna koda. Neobvezna razvijalska orodja (Node.js 20+): lokalni strežnik, preverjanje ravni in testi.
• Pinloop, 24 $: TypeScript z Vite. Mapa game/ vsebuje berljiv JavaScript in CSS. Node.js 22.12+ in npm samo za urejanje in ponovno gradnjo izvorne kode.
• Sunset Rally, 39 $: TypeScript s Three.js r184 in Vite. Mapa game/ je že zgrajena in nezmanjšana. Node.js samo, če gradite znova.

Za Sunset Rally priročnik priporoča Node.js 24 LTS. V source/ zaženete npm ci, npm run typecheck in npm run build, nato objavite samo vsebino mape dist/. Prosi tudi, naj pri ponovni gradnji ostaneta izklopljeni minify in cssMinify, saj je dostavljeni izvajalni del oblikovan za branje. Naložite rezultat, nikoli node_modules/.

Oglejte si izdajo Sunset Rally

Gostovanje: kaj »statično« pomeni v praksi

Statično gostovanje pomeni, da gostitelj samo streže datoteke. Priročnika za Velvet Pool in Puttide opisujeta celotno namestitev v treh korakih:

1. Razpakirajte ZIP.
2. Naložite vse iz game/ v mapo na vašem spletnem mestu, na primer public_html/velvet-pool/, prek FTP-ja ali upravitelja datotek vašega gostitelja, ohranite podmape.
3. Odprite ta naslov v brskalniku.

Nič od tega ne vključuje npm, terminala, koraka gradnje, PHP-ja, podatkovne baze ali računa. Kaj ljudi po istih priročnikih najpogosteje zmede:

• Ne dvakrat klikajte na index.html. Brskalniki blokirajo module igre na file://. Za lokalni preizkus v mapi game/ zaženite python -m http.server 8765 in odprite http://localhost:8765/.
• Vaš strežnik mora datoteke .js pošiljati z JavaScript MIME tipom, .wasm pa kot application/wasm. Napačen MIME tip se pokaže kot sporočilo, da je modul zavrnjen.
• Za javno gostovanje uporabite HTTPS.
• Shranjevanja pripadajo izvoru brskalnika (protokolu, gostitelju in vratom). Če igro premaknete na drugo domeno, igralci začnejo na nič.
• Ob vsakem novem nalaganju strani še vedno potrebujete gostitelja, zato to ni nameščiva aplikacija za delo brez povezave.

Kje so logotip, barve, pravila in prevodi

Vsak priročnik ima razdelek o prilagajanju, a to, kar pokriva, se od izdaje do izdaje razlikuje. Tukaj je, kaj pravi vsak.

Velvet Pool

• Logotip in blagovna znamka: zamenjajte datoteke v assets/logo/ in prilagodite ustrezne mere v CSS-ju.
• Slogi prevlek in palic: njihove definicije so v progress.js. Ohranjajte stabilne id-je predmetov, da shranjeni kozmetični predmeti delujejo naprej.
• Vedenje računalnika v ai.js, fizika v physics.js. Po spremembi pravil ali fizike zaženite teste za 8 kroglic.
• Prevodi: src/game/i18n.js, s seznamom jezikov v LANGS.

Puttide

• Barve in pisave: css/style.css.
• Fizika: src/sim/constants.js. Cene kozmetike: src/game/economy.js, pri čemer ohranite obstoječe id-je.
• Glasba: kopirajte licencirano datoteko v music/ in posodobite preslikavo skladb v src/audio/audio.js.
• Luknje, par in odklepanja: datoteke proge, opisane zgoraj.

Gridspark in Sunset Rally

Pri Gridspark, po njegovem vprašanjih o izdelku, je besedilo vmesnika v src/locales.js, konstante pravil in palete v src/config.js, pravila uganke pa v game.js, board.js, generator.js in shapes.js. Pri Sunset Rally so pogoji kampanje in zvezdic v Campaign.ts, lokacije v Places.ts, fizika v physics.ts in točkovanje v match.ts. Angleški in portugalski nizi so v src/i18n.ts, ostalih 12 jezikov pa v src/locales/.

Opazite, kaj priročniki izpuščajo. Priročnik za Puttide pokriva barve, fiziko, luknje, cene in glasbo, vendar nima koraka za zamenjavo logotipa, priročnik za Sunset Rally pa nima posebnega razdelka o blagovni znamki. Če je blagovna znamka prva stvar, ki jo boste spremenili, vprašajte, preden kupite.

Oglejte si izdajo Gridspark

Avtomatizirani testi: kaj preverjajo in česa ne

Mapa source/ izdaje Velvet Pool vsebuje paket testov. Z Node.js 20 ali novejšim odprite terminal v source/ in zaženite npm test, kar je isto kot node tests/run.js. Namestitev odvisnosti ni potrebna. Po priročniku paket preverja fiziko, pravila za 8 kroglic, tekme z računalnikom in skladnost ključev prevodov, ne nadomešča pa preizkušanja v brskalnikih in na pravih napravah.

Preverjanje ključev prevodov je vrsta testa, ki ga igra s 14 jeziki potrebuje: dodate ključ v enem jeziku, pozabite na drugega, človek pa tega morda ne opazi tednih.

Ne vsaka izdaja ima teste. Priročnik za Puttide jih ne opisuje, samo ročna preverjanja. Pinloop in Beep Out med razvijalskimi ukazi navajata npm test, razvijalska orodja za Ricopop pa vključujejo preverjanje ravni.

Licenca, obvestila tretjih oseb in dnevnik sprememb

Po pogojih poslovanja vsak nakup da trajno, neekskluzivno licenco za uporabo izdaje v enem končnem izdelku, vašem ali enega naročnika. Znotraj nje smete spreminjati kodo, grafiko in zvok, igralci pa jo smejo uporabljati brezplačno ali z oglasi. Predloge, njene izvorne kode ali sredstev samostojno ne smete prodajati, deliti ali ponovno distribuirati, kot predloge, kompleta ali paketa sredstev ali znotraj drugega izdelka, namenjenega razvijalcem. Licenca ne poteče, ko se konča podpora.

Komponente tretjih oseb ohranijo svoje licence, vi pa obvestila ohranite skupaj z izdelkom. Pri Velvet Pool to pomeni dve pisavi, Manrope in Fraunces, pod licenco SIL Open Font License 1.1, z besedili v THIRD-PARTY-LICENSES/ in ob pisavah. Pri Puttide seznam dodaja še Three.js (MIT), Rapier (Apache-2.0) ter pisavi Rubik in Fredoka (OFL 1.1).

Dnevnik sprememb pokaže, kako se paket vzdržuje. Velvet Pool 1.0.1 (18. oktober 2026) je dolge nize razdelil v berljive vrstice in zbral obvestila o licencah v eno ravno mapo. Različica 1.1.0 (22. oktober 2026) je vmesnik prinesla v 14 jezikov. Ti vnosi so na strani izdelka. Pogoji pravijo, da se posodobitve iste izdaje ob objavi pojavijo v vaši knjižnici, brez obljube posodobitev za določeno obdobje.

Kako v eni uri prebrati kodo igre, ki ste jo kupili

To je predlagan načrt, ne obljubljen čas. Sledi razporeditvi Velvet Pool in uporablja samo tisto, kar vam paket da.

1. Od 0. do 10. minute: razpakirajte ZIP, na hitro preletite README v source/ in zemljevid datotek v priročniku. Odprite index.html in poglejte, katere skripte in sloge naloži.
2. Od 10. do 20. minute: v source/ zaženite npm test (Node.js 20+), da dobite zelen začetni rezultat.
3. Od 20. do 35. minute: najprej preberite src/core, nato src/game. Začnite z rules.js, nato ai.js, nato physics.js. To je sama igra. Kontrole, napredek, besedila in zvok so vodovod okoli nje.
4. Od 35. do 40. minute: opazite, da morajo id-ji predmetov in ključi shranjevanj ostati stabilni, sicer igralci izgubijo shranjene kozmetične predmete.
5. Od 40. do 55. minute: naredite eno majhno spremembo, na primer definicijo prevleke v progress.js. Datoteko kopirajte na isto pot v game/, game/ postrezite z python -m http.server 8765 in si poglejte rezultat. Nikoli je ne odprite prek file://.
6. Od 55. do 60. minute: ponovno zaženite teste.

Moduli ES v vrsticah uvoza navedejo, kar potrebujejo, zato lahko sledite verigi od prve skripte, ki jo stran naloži. Zato je izdajo z navadnimi datotekami mogoče prebrati s tako hitrostjo.

Vprašanja, ki jih postavite pred nakupom izvorne kode

• Ali lahko preberem priročnik in igram demo, preden plačam? Pri naših izdajah sta oba povezana na strani izdelka.
• Ali obstaja gradnja, pripravljena za gostovanje, in ločena razvijalska izvorna koda?
• Je koda berljiva ali zmanjšana? Odprite eno skripto in poglejte.
• Ali potrebujem Node.js, npm, PHP ali podatkovno bazo in katere različice?
• Ali igra kaj nalaga iz CDN-ja ali druge strani?
• Katere knjižnice tretjih oseb so v njej in pod katerimi licencami?
• V koliko projektih ga smem uporabiti in ga smem ponovno distribuirati?
• Kako dolgo traja podpora in kaj pokriva? Naša je 6 mesecev ali 12 z razširitvijo, izbrano ob plačilu, pokriva pa vprašanja o namestitvi in uporabi datotek ter ponovljive napake.
• Kaj je izpuščeno?
• Ali obstaja dnevnik sprememb in nedavna izdaja?
• Kakšno je pravilo za vračilo? Naše: predloge so digitalni izdelki, zato vam vrnemo samo, če predloge še niste prenesli ali če ima napako, ki je ne moremo odpraviti. Zahtevate tako, da studiu pišete s številko licence.

Kaj te izdaje ne vključujejo

Nekatere izdaje dodajo neobvezne dodatke. Ricopop in Zabum vključujeta lestvico v PHP v eni datoteki, ki je privzeto izklopljena. Gre za preprosto skupno lestvico, ki shranjuje rezultate v datoteko, ni pa to varna lestvica proti goljufanju in ni večigralski način v živo.

Podpora pokriva vprašanja o namestitvi in uporabi priloženih datotek ter popravljanje ponovljivih napak v priloženi igri. To je meja, in bolje je, da jo poznate že prvi dan.

Pogosta vprašanja

Kakšna je razlika med mapo igre in mapo izvorne kode?

game/ je gradnja, ki jo naložite na gostitelja. source/ je urejevalna razvijalska izdaja iste igre. Pri Velvet Pool in Puttide imata isto razporeditev, zato se datoteka, ki jo uredite v source/, kopira na isto pot v game/. Pri izdajah v TypeScriptu, kot je Sunset Rally, je source/ projekt, ki ga znova gradite, in objavite novi izhod.

Ali za uporabo igre potrebujem npm ali Node.js?

Za gostovanje ne. Node.js se pojavi samo za neobvezne teste pri Velvet Pool (20 ali novejši) ali za ponovno gradnjo izdaj v TypeScriptu, kot sta Sunset Rally (priporočena 24 LTS) in Pinloop (22.12 ali novejši).

Ali je izvorna koda zmanjšana?

Pri izdajah, obravnavanih tukaj, ne. Velvet Pool in Puttide sta navaden, oblikovan JavaScript, različica 1.0.1 obeh pa je dolge vrstice razdelila v berljive. Izvajalni del Sunset Rally je dostavljen oblikovan, zmanjševanje je izklopljeno.

Ali lahko en nakup uporabim za več projektov ali naročnikov?

Licenca pokrije en končni izdelek, vaš ali enega naročnika. Drugi izdelek je zunaj nje.

Ali lahko izvorno kodo preprodam ali delim?

Ne: ne samostojno, ne kot predlogo, komplet ali paket sredstev in ne znotraj drugega izdelka, namenjenega razvijalcem. Znotraj svojega končnega izdelka smete spreminjati kodo, grafiko in zvok.

Ali lahko preberem priročnik, preden kupim?

Da. Vsaka stran izdelka povezuje s svojim priročnikom in z igralnim demom iste izdaje.

Odprite paket, preden kupite enega

Izberite izdajo, odprite njen priročnik s strani izdelka, zaženite demo in preberite zemljevid datotek ob zgornjih vprašanjih. Če priročnik nanje odgovori, bi moral paket odgovoriti tudi. Če ne, pišite studiu, preden plačate.

Oglejte si vse predloge