Minigolf játék forráskód: pályák, fizika és 3D pályatérkép

A minigolf játék forráskód egyetlen feladaton áll vagy bukik: a lyuk hozzáadásán. Aki márkázott pályát, szezonális szintet vagy ügyfele logóját szeretné a zöldön, először a szintfájlokat nyitja meg, és ha egy lyuk motorkódba van temetve, a projekt megakad. A Puttide, a 3D minigolf sablonunkban minden pálya saját lyuk-fájllal rendelkezik, sima JavaScriptben, a kézikönyv pedig végigvezet egy hozzáadásán.

Ez az útmutató úgy követi a csomagot, ahogy egy fejlesztő találkozik vele: a mappák, a könyvtárak, a pályafájlok, a módosítások sorrendje, a tárhelyezés és a licenc. A fájlnevek a játékkal szállított vásárlói útmutatóból származnak.

A türelmetlenek rövid válasza: a Puttide formázott JavaScript, a rajzoláshoz Three.js, a labda fizikájához Rapier, mindkettő a csomagban. Nincs build lépés, nincs CDN és nincs szerveroldali kód.

Mit tartalmaz a minigolf játék forráskód

A Puttide kész játék 30 lyukkal, öt szigetpályán: Sunlit Ruins (Napfényes romok), Lantern Pier (Lámpás móló), Frost Peaks (Fagyos csúcsok), Cloud Garden (Felhőkert) és Volcano Forge (Vulkáni kohó), pályánként hat lyukkal. Rámpák, portálok, ütközők és szélmalmok kis rejtvényekké teszik a lyukakat. Minden lyuk három csillagot ad (befejezés, par vagy jobb, rejtett érme), a bronz, ezüst és arany érmék pedig a legjobb köröket jutalmazzák.

A pályák mellett van napi kihívás egy csavarral (szeles, jeges zöld, nehéz labda, pattogó falak, érmerohanás vagy birdie-vadászat), egy Locker (szekrény), ahol érmékért labdákat, nyomokat és egyéb kozmetikumokat vehetnek, valamint két-négy játékos körei egy eszközön. A felület 14 nyelven érhető el.

• game/: a kész, feltölthető build, az egyetlen mappa, amelyet közzéteszel.
• source/: ugyanaz a játék fejlesztői kiadásban, README-vel és package.json fájllal.
• documentation/: egy illusztrált útmutató angolul és portugálul.
• THIRD-PARTY-LICENSES/: a könyvtárak és betűkészletek licencszövegei.
• 1.1.0-s verzió, 2026. október 22-én frissítve.

Nyisd meg a Puttide oldalát: demó, kézikönyv és ár

Three.js, Rapier és a többi a veremben

A labdát a Rapier 3D 0.21.0 szimulálja, amely WebAssembly-ként fut, a jelenetet pedig a Three.js r186 rajzolja. Mindkettő a lib/three/ és a lib/rapier/ mappában van a licencfájljaival, az index.html pedig egy import map-et tartalmaz, amely ezekre mutat. A kézikönyv megjegyzi, hogy a könyvtárfájlok viselkedése nem változott, csak olvashatóbbá lettek formázva.

Ennek két oka van. Először: semmi nem töltődik CDN-ről, így egy portálnak vagy egy szigorú biztonsági szabályzatú ügyfélnek csak a tárhelyre van szüksége. Másodszor: egy könyvtár frissítése kézi, tudatos lépés. A source/package.json rögzíti a pontos verziókat, az új modulfájlokat pedig a megfelelő lib/ mappába másolod, az import map útvonalait pedig megtartod.

• Three.js r186: MIT licenc.
• Rapier 3D compat 0.21.0, beágyazott WebAssembly: Apache-2.0 licenc.
• Rubik és Fredoka webes betűkészletek: SIL Open Font License 1.1.
• Két zeneszám: music/menu.mp3 és music/play-1.mp3.

Hol vannak a lyukak, az érmék és a szövegek

Az útvonalak a source/ és a game/ mappában megegyeznek. A pályaadatok sziget szerint vannak felosztva, így minden fájl elég rövid ahhoz, hogy egy ülésben elolvasd.

• src/course/courses.js: a pályák sorrendje és a feloldási feltételek.
• src/course/holes.js: a Sunlit Ruins lyukai, geometriával, parral és akadályokkal.
• src/course/pier.js, ice.js, lava.js és sky.js: a másik négy pálya lyukai.
• src/sim/constants.js: a fizika hangolása.
• src/game/economy.js: labdák, nyomok és öltözékek az áraikkal együtt.
• src/ui/i18n.js és a kísérőfájljai: a 14 nyelvi szótár, benne a lyukak neveivel és tippjeivel.
• src/game/localRecords.js: a pályarekordok, a böngészőben tárolva.
• src/audio/audio.js: effektek és a zenei megfeleltetés a probeTracks-ben.
• css/style.css: a felület színei, betűkészletei és reszponzív stílusai.

Lyuk hozzáadása lépésről lépésre

Ezt a módosítást végzik a legtöbben, és a kézikönyv néhány sorban írja le. Mi kibővítettük azzal a sorrenddel, amelyet magunk követnénk.

1. Válaszd ki azt a pályafájlt, amelyhez az új lyuk tartozik, például a lava.js-t a Volcano Forge-hoz.
2. Másolj egy meglévő lyuk-definíciót, amely közel áll ahhoz, amit szeretnél.
3. Adj neki egyedi azonosítót. Az azonosító újrahasználata összekeveri a mentett haladást.
4. Állítsd be a parat, a tee pozícióját és a kupa pozícióját, majd mozgasd vagy cseréld ki az akadályokat.
5. Add hozzá a lyukat a pályájához a courses.js fájlban.
6. Add hozzá a megjelenített nevét és tippjét a nyelvi szótárakhoz, minden szállított nyelven.
7. Játszd le: teszteld az ütközéseket, a pályán kívüli visszaállítást és mind a három csillagot, a rejtett érmével együtt.

Szerkeszd a source/ mappában, másold a módosított fájlokat a game/ mappa azonos útvonalaira, és teszteléshez HTTP-n szolgáld ki a mappát. A package.json-ban van serve parancs, vagy futtathatod a python -m http.server 8765 parancsot. A Node.js opcionális, csak akkor kell, ha az npm-mel akarod kezelni a könyvtárverziókat.

A többi módosítás, értelmes sorrendben

1. Márka és színek: logó, színek és betűkészletek a css/style.css fájlban. A white label megengedett, így a márkád helyettesítheti a miénket.
2. Árak a Lockerben: economy.js. Az olcsóbb kozmetikumok barátságosabbá teszik az alkalmi oldalt; a drágábbak egy hosszú kampányt nyújtanak.
3. Szövegek: megfogalmazások és tippek az i18n fájlokban.
4. Zene: a két mellékelt szám cserélhető olyan felvételekre, amelyekre van licenced. Másold a fájlt, és frissítsd a kifejezett megfeleltetést az audio.js fájlban (probeTracks); a jelenet zenéje visszaesik a játékmenet számára.
5. Fizika: a constants.js, utoljára, és kis lépésekben, mert minden lyuk a jelenlegi értékekre lett hangolva.

Egy kapcsolódó projektnél, amely ugyanazt a sima JavaScript-megközelítést használja és egyáltalán nem használ 3D-könyvtárat, a pool-sablonunk ugyanígy épül fel.

Velvet Pool: 8-ball sima JavaScriptben és WebGL2-ben

Sunset Rally: 3D asztalitenisz kilencmeccses kampánnyal

Tárhelyezés, MIME-típusok és appkeretek

Töltsd fel a game/ mappa teljes tartalmát például a public_html/puttide/ mappába, tartsd meg az almappákat, és HTTPS-en nyisd meg a címet. A szerveren nincs szükség npm-re, PHP-re, adatbázisra vagy fiókra. Az index.html lemezről való megnyitása nem működik, mert a böngészők a file:// címen blokkolják a modulokat.

A Puttide-nak van egy tárhelyezési részlete, amely egy 2D játéknál nincs: a fizika WebAssembly-ként fut. A szervernek a .js fájlokat JavaScript MIME-típussal, a .wasm fájlokat application/wasm típussal kell kiszolgálnia. Egy hibásan beállított tárhely üres képernyőt vagy modulhibát mutat, ezért az első napon ellenőrizd.

• Böngésző-igény: JavaScript, ES-modulok, WebAssembly és WebGL2.
• Portál iframe-ben engedélyezd a teljes képernyőt és az automatikus lejátszást.
• Érintőképernyőn: húzással célozz és puttolj, két ujjal forgasd a kamerát, csippentéssel nagyíts.
• Nem telepíthető offline app: minden friss betöltés még mindig eléri a tárhelyedet.

A natív appprojektek nincsenek a csomagban. Ha áruházi kiadást tervezel, számolj a keret és a valódi telefonokon való tesztelés költségével, mert egy 3D-s fizikai játék nehezebb a régebbi eszközökön, mint egy kártyajáték.

Nem tartalmazott részek és a licenc

Ez a helyi böngészős kiadás: nincs online többjátékos mód vagy online szoba, nincs online ranglista, nincs felhőfiók, nincs reklám-SDK, nincs natív app és nincs tárhely. A pályarekordok, a napi haladás és az azonos eszközön játszott körök a játékos böngészőjében maradnak, és egyetlen pontszám sincs feltöltve. A mentések a böngésző eredetéhez tartoznak, így egy másik domainre költözve a játékosok újrakezdik.

A Puttide 39 USD-ba kerül; 2026. november 30-ig a fekete péntek akció 33,15 USD-ra viszi, és két vagy több sablon egy rendelésben 5–20% csomagkedvezményt ad. A licenc időkorlát nélküli és nem kizárólagos, egy végtermékre, a tiédre vagy egy ügyfeledére. Átmárkázhatod, módosíthatod a kódját, grafikáját és hangját, és ingyen vagy hirdetésekkel engedheted be a játékosokat, de a sablont vagy a kódját önmagában nem adhatod tovább. A támogatás hat hónap, vagy tizenkét a bővítéssel; az egyedi lyukakat, az integrációkat és a tárhelyezést kérésre árajánlattal adjuk.

A licenc, a támogatás és a visszatérítés teljes feltételei

Gyakran ismételt kérdések

TypeScriptben van a minigolf játék forráskódja?

Nem. A Puttide sima, formázott JavaScript a source/src és a game/src mappában, saját minifikált vagy csomagolt fájlok nélkül.

Hozzáadhatok saját lyukakat vagy pályákat?

Igen. Másolj egy lyukat a pályafájlban, adj neki egyedi azonosítót, állítsd be a parat, a tee-t és a kupát, add hozzá a courses.js fájlhoz, a nevét és tippjét pedig a nyelvi fájlokba.

Three.js-t tölt be CDN-ről?

Nem. A Three.js, a Rapier, a betűkészletek és a zene mind a game/ mappában vannak, így a játékhoz csak a tárhelyedre van szükség.

Miért mutat üres képernyőt a tárhelyem?

Általában a MIME-típusok miatt. A .js fájlokat JavaScriptként, a .wasm fájlokat application/wasm típusként szolgáld ki, nyisd meg a játékot HTTP(S)-en, és ellenőrizd, hogy a WebGL2 engedélyezett-e.

Játszhatnak együtt barátok?

Igen, két-négy játékos felváltva játszik ugyanazon az eszközön. Az online játék nem része ennek a kiadásnak.

Ez a megfelelő minigolf-alap neked?

A Puttide illik családi vagy sportportálhoz, egy olyan ügynökséghez, amely egy ügyfélnek márkázott pályát épít, és egy fejlesztőhöz, aki olvasható kódban akarja látni, hogyan működik együtt a Three.js és a Rapier. Gyengébben illik olyan projekthez, amelynek az első naptól online köröket vagy közös ranglistát kell adnia.

Játssz le egy teljes pályát a demóban telefonon, majd olvasd el a kézikönyv lyuk-hozzáadásról szóló részét. Ha az a rész egy délutánnyi munkának tűnik, a játék többi része már készen van.

Játszd le a Puttide demót és vásárold meg a licencet