HTML5 játék forráskódja: egy valódi csomag belsejébe nézünk

A HTML5 játék forráskódja háromféle dolgot jelenthet: egy azonnal feltölthető buildet, a szerkesztendő fejlesztői fájlokat, vagy egy projektet, amely csak egy bizonyos szerkesztőben nyílik meg. A piactérről származó, forráskóddal érkező HTML5 játéksablon az első kettőt együtt adja, közönséges webfájlokként, és ez az útmutató valódi csomagokat nyit ki, hogy megmutassa, hogy néz ki ez.

Mi árusítjuk ezeket a sablonokat, ezért ezt inkább a saját csomagjaink körbevezetésének tekintsd, nem a piac semleges áttekintésének. Több kiadást néztünk át, főleg a Velvet Poolt, a Puttide-ot és a Sunset Rallyt, elolvastuk a nyilvános kézikönyveiket és a bolt feltételeit, és feljegyeztük, mi van a dobozban, mire van szükség a futtatásához, és mi nincs benne. Minden kézikönyv linkelve van a termékoldaláról, így vásárlás előtt minden sort ellenőrizhetsz.

Mit jelenthet a „HTML5 játék forráskódja”

Az eladók lazán használják a forráskód szót. Három kérdés tisztázza, mi van valójában eladásra kínálva.

Build, fejlesztői forrás, vagy mindkettő?

A build a kész játék úgy, ahogy a böngésző betölti: egy index.html, szkriptek, képek és hangfájlok. Úgy hosztolhatod, ahogy van. A fejlesztői forrás a szerkesztésre készült változat, a fájlok feladatonként szétválasztva. Egy csak buildet tartalmazó csomag feltölthető, de kényelmesen nem módosítható. Egy csak forrást tartalmazó csomaghoz előfordulhat, hogy eszközök kellenek, mielőtt egyáltalán elindul. Az ebben az útmutatóban szereplő kiadások mindkettőt egy ZIP-be teszik: általában egy game/ mappát a közzétételhez és egy source/ mappát a szerkesztéshez (a Ricopopnál a game/ maga a forrás).

Olvasható vagy tömörített?

A minifikálás a szkripteket néhány sűrű sorba, rövid nevekkel préseli, ami gyorsabban töltődik le, és borzasztóan olvasható. Az obfuszkálás tovább megy, és szándékosan összekeveri a neveket. Egyik sem árt egy élő oldalnak. Mindkettő árt, ha kódot azért vettél, hogy módosítsd. Fizetés előtt nyiss meg egy szkriptet az élő demóból a böngésző fejlesztői eszközeiben, és nézd meg, követni tudnád-e.

Egyszerű fájlok vagy szerkesztőprojekt?

Néhány sablon egy adott játékszerkesztőhöz készült projektként érkezik, és csak abban a szerkesztőben nyitható meg. Mások egyszerű webfájlok, amelyeket bármilyen kódszerkesztő megnyit. Az ebben az útmutatóban szereplő kiadások a második fajtához tartoznak: HTML, CSS, JavaScript és JSON, néhányban TypeScripttel.

Böngéssz a sablonok között

Mi van egy Polar Games csomagban

Vegyük a Velvet Poolt, a mi nyolcas golyós biliárdkiadásunkat. A kézikönyve négy mappát ír le a ZIP-ben:

• game/: az azonnal feltölthető kiadás, és az egyetlen mappa, amelyet közzéteszel.
• source/: ugyanaz a játék szerkeszthető fejlesztői kiadásként, README-vel, package.json-nal és tesztekkel.
• documentation/: az illusztrált útmutató és a képei.
• THIRD-PARTY-LICENSES/: a betűtípus-licencek szövege és egy README.txt összefoglaló.

A könyvtáradban ugyanez a csomag két letöltésként érhető el: a teljes csomag (forrás és kézikönyv), vagy csak a játék, készen a hosztolásra.

A game/ és a source/ ugyanazt az elrendezést használják. A Velvet Pool kézikönyve szerint a source/ fájljait szerkeszd, és a módosított fájlokat másold ugyanazon az útvonalon a game/ mappába. Közben semmi sem fordul le.

Nézd meg a Velvet Pool kiadást

A Velvet Pool belseje: a fájltérkép

A fájltérkép a legolcsóbb módja annak, hogy vásárlás előtt megítélj egy kódbázist. Ez a Velvet Pool kézikönyvében szereplő, a source/ vagy a game/ mappához viszonyított útvonalakkal:

• src/core/physics.js: golyószimuláció, pörgetés és a szalagról való visszapattanás.
• src/core/rules.js: a nyolcas golyós szabályai és a szabálytalansági döntések.
• src/core/ai.js: hogyan választja ki a CPU az ütést.
• src/game/controls.js: célzás, erő és pörgetés bevitele.
• src/game/progress.js: eredmények, posztók, ütők és a mérkőzések pontozása.
• src/game/i18n.js: a szöveg 14 nyelven.
• src/game/localRecords.js: a helyi pontszámtörténet.
• src/game/audio.js: hangeffektek és zenelejátszás.
• css/style.css és css/fonts.css: téma, reszponzív elrendezés és betűtípus-deklarációk.
• assets/: grafika, hang és betűtípusok, egy logo/ almappával.

Figyeld meg a felosztást. A szabályok, a fizika és a CPU a src/core-ban vannak. A bevitel, a mentések, a szövegek és a hang a src/game-ben. A kézikönyv arra kér, hogy egyszerre egy funkciót változtass, és ez az elrendezés ezt reálissá teszi: egy szalagbeállítás és egy fordításjavítás különböző fájlokat érint.

A kézikönyv azt is kimondja, hogy a source/src és a game/src kódja egyszerű, formázott JavaScript, tömörített vagy csomagolt fájlok nélkül. A Velvet Pool Vanilla JavaScript WebGL2-n fut, és nem használ kódkönyvtárat, a Three.js-t sem beleértve. A változásnapló ezt alátámasztja: az 1.0.1 verzió a hang, a fordítások és a shaderek hosszú egysoros szövegeit olvasható sorokra bontotta, a viselkedés változatlanul maradt.

Puttide: ugyanaz az elrendezés, plusz könyvtárak

A Puttide, a mi 3D minigolf kiadásunk, ugyanazt a négy mappát használja, és egy dologgal bővíti: két harmadik féltől származó könyvtárral, amelyekre a játéknak szüksége van. A Three.js r186 (MIT) és a Rapier 3D 0.21.0 (Apache-2.0) a lib/three/ és a lib/rapier/ mappában van, az index.html importtérképe pedig megmondja a böngészőnek, hol találja őket. A Puttide gyakori kérdései szerint semmi sem töltődik CDN-ről, tehát a játéknak csak a saját tárhelyed kell. A kézikönyv hozzáteszi, hogy a könyvtárfájlok olvasásra formázottak, a viselkedésük módosítatlan.

A fájltérképe, ismét a source/ vagy a game/ mappához viszonyítva:

• src/course/courses.js: a pályák sorrendje és a feloldási feltételek.
• src/course/holes.js: a Ruins pálya geometriája, par-értéke és akadályai. A pier.js, az ice.js, a lava.js és a sky.js a többi négyet tartalmazza.
• src/sim/constants.js: fizikai hangolás.
• src/game/economy.js: a golyók, a nyomvonalak és az öltözetek definíciói és árai.
• src/ui/i18n.js és három másik szótárfájl: a nyelvi szöveg.
• css/style.css: felületi színek, betűtípusok és reszponzív stílusok.
• fonts/ és music/: a webes betűtípusok a licenceikkel és két zeneszám.

A kézikönyv receptje egy új pályához: duplikálj egy definíciót a megfelelő pályafájlban, adj neki egyedi azonosítót, állítsd be a par-t, a teeállás és a lyuk pozícióit, add hozzá a pályához, majd a nevét és a tippjét vedd fel a nyelvi szótárakba. Vásárlás előtt olvass el egy ilyen receptet. Ha olyan munkának tűnik, amelyet el tudsz végezni, a csomag hozzád illik.

Nézd meg a Puttide kiadást

Amikor a forrásnak build-lépésre van szüksége

A „nincs build-lépés” igaz néhány kiadásra, másokra nem, ezért a kiadást ellenőrizd, ne a boltot. Íme öt a miénk közül egymás mellett, a listaáraikkal.

• Velvet Pool, 39 dolláros listaár: sima JavaScript modulok WebGL2-n. Szerkeszd a source/-t, és másold a game/-be. Node.js 20+ csak az opcionális tesztekhez kell.
• Puttide, 39 dolláros listaár: sima JavaScript modulok Three.js-szel és Rapier-rel a lib/ mappában. Nincs build-lépés. A Node.js opcionális, csak a könyvtárverziók kezeléséhez.
• Ricopop, 39 dolláros listaár: sima HTML, CSS és JavaScript modulok, és a game/ maga a forrás. Opcionális fejlesztői eszközök (Node.js 20+): helyi szerver, pályaellenőrző és tesztek.
• Pinloop, 24 dolláros listaár: TypeScript Vite-tal. A game/ mappa olvasható JavaScriptet és CSS-t tartalmaz. A Node.js 22.12+ és az npm csak a forrás szerkesztéséhez és újraépítéséhez kell.
• Sunset Rally, 39 dolláros listaár: TypeScript Three.js r184-gyel és Vite-tal. A game/ mappa már le van fordítva, és nincs tömörítve. Node.js csak akkor kell, ha újraépíted.

A Sunset Rally kézikönyve a Node.js 24 LTS-t ajánlja. A source/ mappában futtasd az npm ci, npm run typecheck és npm run build parancsokat, majd csak a dist/ tartalmát tedd közzé. Azt is kéri, hogy újraépítéskor tartsd kikapcsolva a minify és a cssMinify beállítást, mert a kiszállított futásidejű kód olvasásra formázott. Töltsd fel az eredményt, a node_modules/-t soha.

Nézd meg a Sunset Rally kiadást

Hosztolás: mit jelent a „statikus” a gyakorlatban

A statikus hosztolás azt jelenti, hogy a tárhelyed csak fájlokat szolgál ki. A Velvet Pool és a Puttide kézikönyve a teljes telepítést három lépésben adja meg:

1. Csomagold ki a ZIP-et.
2. Töltsd fel a game/ mappa teljes tartalmát a webhelyed egy mappájába, például public_html/velvet-pool/, FTP-vel vagy a tárhely fájlkezelőjével, az almappákat megtartva.
3. Nyisd meg ezt a címet a böngészőben.

Nincs szükség npm-re, terminálra, build-lépésre, PHP-re, adatbázisra vagy fiókra. Ugyanezen kézikönyvek szerint ezeken szoktak elbotlani az emberek:

• Ne kattints duplán az index.html-re. A böngészők blokkolják a játékmodulokat a file:// címen. Helyi teszthez futtasd a python -m http.server 8765 parancsot a game/ mappában, és nyisd meg a http://localhost:8765/ címet.
• A szervernek a .js fájlokat JavaScript MIME-típussal, a .wasm fájlokat application/wasm típussal kell küldenie. A rossz MIME-típus „module refused” típusú hibaként jelentkezik.
• Nyilvános hosztoláshoz használj HTTPS-t.
• A mentések a böngésző origin-jéhez (protokoll, gazdagép és port) tartoznak. Ha a játékot másik domainre költözteted, a játékosok nulláról indulnak.
• Az oldal friss betöltéséhez továbbra is kell a tárhelyed, ezért ez nem telepíthető offline alkalmazás.

Hol élnek a logó, a színek, a szabályok és a fordítások

Minden kézikönyvnek van testreszabási része, és hogy mit fed, az kiadásonként eltér. Ezt mondja mindegyik.

Velvet Pool

• Logó és márkaelemek: cseréld le az assets/logo/ fájljait, és igazítsd a CSS megfelelő méreteit.
• Posztó- és ütőstílusok: definíciójuk a progress.js-ben van. Tartsd stabilan az elemek azonosítóit, hogy a mentett kozmetikumok továbbra is működjenek.
• CPU-viselkedés az ai.js-ben, fizika a physics.js-ben. Szabályok vagy fizika változtatása után futtasd a nyolcas golyós teszteket.
• Fordítások: src/game/i18n.js, a nyelvlistával a LANGS-ban.

Puttide

• Színek és betűtípusok: css/style.css.
• Fizika: src/sim/constants.js. Kozmetikai árak: src/game/economy.js, a meglévő azonosítók megtartásával.
• Zene: másolj egy licencelt fájlt a music/ mappába, és frissítsd a számleképezést a src/audio/audio.js-ben.
• Pályák, par-értékek és feloldások: a fent leírt pályafájlok.

Gridspark és Sunset Rally

A Gridspark termékoldalának gyakori kérdései szerint a felületi szöveg a src/locales.js-ben van, a szabályállandók és a paletta a src/config.js-ben, a rejtvény szabályai pedig a game.js, board.js, generator.js és shapes.js fájlokban. A Sunset Rally-ban a kampánymeccsek és a csillagfeltételek a Campaign.ts-ben, a helyszínek a Places.ts-ben, a fizika a physics.ts-ben, a pontozás a match.ts-ben van. Az angol és a portugál szövegek a src/i18n.ts-ben, a másik 12 nyelv a src/locales/ mappában van.

Figyeld meg, mit hagynak ki a kézikönyvek. A Puttide kézikönyve a színeket, a fizikát, a pályákat, az árakat és a zenét fedi, de nincs benne lépés a logó cseréjére, a Sunset Rally kézikönyvének pedig nincs külön márkajelzési része. Ha a márkajelzés lesz az első dolog, amit változtatnál, kérdezz, mielőtt vásárolsz.

Nézd meg a Gridspark kiadást

Automatizált tesztek: mit ellenőriznek, és mit nem

A Velvet Pool source/ mappája tartalmaz egy tesztcsomagot. Node.js 20-as vagy újabb verzióval nyiss terminált a source/ mappában, és futtasd az npm test parancsot, ami ugyanaz, mint a node tests/run.js. Nincs szükség függőségek telepítésére. A kézikönyv szerint a csomag a fizikát, a nyolcas golyós szabályokat, a CPU-meccseket és a fordítási kulcsok következetességét ellenőrzi, és nem helyettesíti a tesztelést böngészőkben és valódi eszközökön.

A fordítási kulcs-ellenőrzés az a fajta teszt, amelyre 14 nyelvű játéknak szüksége van: adsz egy kulcsot az egyik nyelven, elfelejtesz egy másikat, és az ember hetekig nem veszi észre.

Nem minden kiadásnak van tesztje. A Puttide kézikönyve egyet sem ír le, csak kézi ellenőrzéseket. A Pinloop és a Beep Out az npm test parancsot a fejlesztői parancsai között sorolja fel, a Ricopop fejlesztői eszközei pedig pályaellenőrzőt tartalmaznak.

Licenc, harmadik féltől származó értesítések és a változásnapló

A bolt feltételei szerint minden vásárlás egy örökös, nem kizárólagos licencet ad a kiadás használatára egy végtermékben, a sajátodban vagy egy ügyfeledében. Módosíthatod a kódot, a grafikát és a hangot benne, a játékosok pedig ingyen vagy hirdetésekkel használhatják. A sablont, a forrását vagy az eszközeit önmagukban, sablonként, eszközcsomagként vagy fejlesztőknek szánt másik termékben nem adhatod el, nem oszthatod meg és nem terjesztheted tovább. A licenc nem jár le, amikor a támogatás véget ér.

A harmadik féltől származó részek megtartják saját licencüket, és az értesítéseiket a termékeddel együtt kell megőrizned. A Velvet Poolban ez két betűtípust jelent, a Manrope-ot és a Fraunces-t, a SIL Open Font License 1.1 alatt, a szövegekkel a THIRD-PARTY-LICENSES/ mappában és a betűtípusok mellett. A Puttide listája ehhez hozzáadja a Three.js-t (MIT), a Rapier-t (Apache-2.0), valamint a Rubik és a Fredoka betűtípusokat (OFL 1.1).

A változásnapló megmutatja, hogyan gondozzák a csomagot. A Velvet Pool 1.0.1 (2026. október 18.) olvasható sorokra bontotta a hosszú szövegeket, és az összes licencértesítést egy lapos mappába gyűjtötte. Az 1.1.0 (2026. október 22.) hozta a felületet 14 nyelvre. Ezek a bejegyzések a termékoldalon vannak. A feltételek szerint az ugyanazon kiadás frissítései közzétételkor megjelennek a könyvtáradban, rögzített időszakra szóló frissítési ígérettel azonban nem.

Hogyan olvass el egy megvásárolt játék kódját egy óra alatt

Ez egy javasolt terv, nem ígért időzítés. A Velvet Pool felépítését követi, és csak azt használja, amit a csomag ad.

1. 0–10 perc: csomagold ki a ZIP-et, fusd át a source/ README-jét és a kézikönyv fájltérképét. Nyisd meg az index.html-t, és nézd meg, mely szkriptet és stíluslapot tölti be.
2. 10–20 perc: futtasd az npm test parancsot a source/ mappában (Node.js 20+), hogy legyen egy zöld kiindulópont.
3. 20–35 perc: előbb a src/core-t olvasd, mint a src/game-et. Kezdd a rules.js-szel, aztán az ai.js, majd a physics.js. Ez maga a játék. A vezérlés, a haladás, a szövegek és a hang a körülötte lévő vezetékezés.
4. 35–40 perc: jegyezd meg, hogy az elemazonosítóknak és a mentéskulcsoknak stabilaknak kell maradniuk, különben a játékosok elveszítik a mentett kozmetikumaikat.
5. 40–55 perc: végezz egy kis változtatást, például egy posztódefiníciót a progress.js-ben. Másold a fájlt ugyanarra az útvonalra a game/ mappában, szolgáld ki a game/-et a python -m http.server 8765 paranccsal, és nézd meg az eredményt. Soha ne nyisd meg file://-on keresztül.
6. 55–60 perc: futtasd újra a teszteket.

Az ES modulok a szükséges dolgokat az importsoraikban nevezik meg, így a lánc az oldal első betöltött szkriptjétől követhető. Ezért olvasható egy sima fájlos kiadás ebben a tempóban.

Kérdések, amelyeket vásárlás előtt érdemes feltenni a forráskódról

• Elolvashatom a kézikönyvet, és játszhatok egy demót vásárlás előtt? A mi kiadásainknál mindkettő a termékoldalról van linkelve.
• Van kész, feltölthető build és külön fejlesztői forrás?
• Olvasható a kód, vagy tömörített? Nyiss meg egy szkriptet, és nézd meg.
• Kell Node.js, npm, PHP vagy adatbázis, és milyen verziók?
• Tölt be a játék bármit CDN-ről vagy másik oldalról?
• Mely harmadik féltől származó könyvtárak vannak benne, és milyen licencek alatt?
• Hány projektben használhatom, és továbbadhatom?
• Meddig tart a támogatás, és mit fed? A miénk 6 hónap, vagy 12 a fizetésnél választott meghosszabbítással, a mellékelt fájlok telepítésével és használatával kapcsolatos kérdésekre, valamint a megismételhető hibákra.
• Mi van kihagyva?
• Van változásnapló és friss kiadás?
• Mi a visszatérítési szabály? A miénk: a sablonok digitális termékek, ezért csak akkor térítünk vissza, ha még nem töltötted le a sablont, vagy ha van olyan hiba, amelyet nem tudunk javítani. A kérést a stúdiónak írt levélben, a licencszámoddal küldheted.

Mit nem tartalmaznak ezek a kiadások

Néhány kiadás opcionális extrákat is ad. A Ricopop és a Zabum egy egyfájlos PHP-ranglistát tartalmaz, amely alapértelmezetten ki van kapcsolva. Ez egy alkalmi, közös eredménytábla, amely a pontszámokat egy fájlban tárolja, nem csalásbiztos rangsor, és nem élő többjátékos mód.

A támogatás a mellékelt fájlok telepítésével és használatával kapcsolatos kérdésekre, valamint a mellékelt játékban talált megismételhető hibák javítására terjed ki. Ez egy határ, és jobb, ha az első napon tudod.

Gyakran ismételt kérdések

Mi a különbség a játék mappa és a forrásmappa között?

A game/ az a build, amelyet feltöltesz a tárhelyedre. A source/ ugyanannak a játéknak a szerkeszthető fejlesztői kiadása. A Velvet Poolban és a Puttide-ban ugyanaz az elrendezésük, így a source/-ban szerkesztett fájl ugyanarra az útvonalra kerül a game/-be. A Sunset Rallyhoz hasonló TypeScript-kiadásokban a source/ egy projekt, amelyet újraépítesz, és az új kimenetet teszed közzé.

Kell npm vagy Node.js a játék használatához?

A hosztoláshoz nem. A Node.js csak a Velvet Pool opcionális tesztjeihez (20-as vagy újabb) jelenik meg, vagy a TypeScript-kiadások, mint a Sunset Rally (ajánlott a 24 LTS) és a Pinloop (22.12 vagy újabb) újraépítéséhez.

Tömörített a forráskód?

Az itt tárgyalt kiadásoknál nem. A Velvet Pool és a Puttide formázott, sima JavaScript, és mindkettő 1.0.1 verziója a hosszú, egysoros szövegeket olvasható sorokra bontotta. A Sunset Rally futásidejű kódja formázva érkezik, a minifikálás kikapcsolva.

Használhatok egy vásárlást több projekthez vagy ügyfélhez?

A licenc egy végterméket fed, a tiedet vagy egy ügyfeledet. Egy második termék már kívül esik rajta.

Eladhatom vagy megoszthatom a forráskódot?

Nem: önmagában nem, sablonként, készletként vagy eszközcsomagként nem, és nem egy fejlesztőknek szánt másik termékben sem. A kódot, a grafikát és a hangot módosíthatod a saját végtermékeden belül.

Elolvashatom a kézikönyvet vásárlás előtt?

Igen. Minden termékoldal linkeli a kézikönyvét, és ugyanazon kiadás játszható demóját.

Nyiss ki egy csomagot vásárlás előtt

Válassz egy kiadást, nyisd meg a kézikönyvét a termékoldalról, játszd le a demót, és vesd össze a fájltérképet a fenti kérdésekkel. Ha a kézikönyv megválaszolja őket, a csomagnak is meg kell tennie. Ha nem, írj a stúdiónak, mielőtt fizetsz.

Nézd meg az összes sablont