Zdrojový kód hry minigolf: jamky, fyzika a 3D mapa dráhy

Zdrojový kód hry minigolf stojí a padá na jednom úkolu: přidat jamku. Kupující, který chce značkovou dráhu, sezónní úroveň nebo logo klienta na zelené ploše, nejdřív otevře soubory úrovní, a pokud je jamka zapuštěná v kódu enginu, projekt se zasekne. V Puttide, naší 3D minigolfové šabloně, má každá dráha vlastní soubor jamek v čistém JavaScriptu a manuál přidání jedné jamky krok za krokem popisuje.

Tenhle průvodce prochází balíček tak, jak se s ním setká vývojář: složky, knihovny, soubory drah, pořadí úprav, hosting a licenci. Názvy souborů pocházejí z průvodce pro kupující, který s hrou přichází.

Krátká odpověď pro netrpělivé: Puttide je naformátovaný JavaScript s Three.js pro kreslení a Rapier pro fyziku míčku, obojí přibalené. Žádný krok buildu, žádné CDN a žádný serverový kód.

Co zdrojový kód hry minigolf obsahuje

Puttide je hotová hra s 30 jamkami na pěti ostrovních drahách: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden a Volcano Forge, každá po šesti jamkách. Rampy, portály, odrážeče a větrné mlýny dělají z jamek malé hlavolamy. Každá jamka uděluje tři hvězdičky (dokončení, par nebo lépe, skrytá mince) a bronzová, stříbrná a zlatá medaile odměňují nejlepší kola.

Nad drahami je denní výzva s obměnou (Windy, Icy green, Heavy ball, Bouncy walls, Coin rush nebo Birdie hunt), Locker (šatnička), kde mince kupují míčky, stopy a další kosmetiku, a kola pro dva až čtyři hráče, kteří se střídají na jednom zařízení. Rozhraní je ve 14 jazycích.

• game/: hotový build připravený k nahrání, jediná složka, kterou publikujete.
• source/: stejná hra jako vývojářská verze, s README a package.json.
• documentation/: jeden ilustrovaný průvodce v angličtině a portugalštině.
• THIRD-PARTY-LICENSES/: texty licencí knihoven a písem.
• Verze 1.1.0, aktualizovaná 22. října 2026.

Otevřete stránku Puttide: demo, manuál a cenu

Three.js, Rapier a zbytek technologie

Míček simuluje Rapier 3D 0.21.0, který běží jako WebAssembly, a scéna se kreslí pomocí Three.js r186. Obě knihovny jsou v lib/three/ a lib/rapier/ se svými souvisejícími licenčními soubory a index.html má import map, který hře ukazuje na ně. Manuál uvádí, že soubory knihoven se chováním nezměnily a byly jen naformátovány, aby šly číst.

Na tom záleží ze dvou důvodů. Za prvé, nic se nenačítá z CDN, takže portál nebo klient s přísnou bezpečnostní politikou potřebuje jen váš hosting. Za druhé, aktualizace knihovny je ruční a záměrný krok: source/package.json uvádí přesné verze a nové modulové soubory zkopírujete přes odpovídající složku lib/ a ponecháte cesty v import map.

• Three.js r186: licence MIT.
• Rapier 3D compat 0.21.0, WebAssembly vložené: licence Apache-2.0.
• Webová písma Rubik a Fredoka: SIL Open Font License 1.1.
• Dvě hudební stopy: music/menu.mp3 a music/play-1.mp3.

Kde žijí jamky, mince a texty

Cesty jsou stejné v source/ i v game/. Data drah jsou rozdělena podle ostrova, což drží každý soubor dost krátký na přečtení najednou.

• src/course/courses.js: pořadí drah a požadavky na odemčení.
• src/course/holes.js: jamky Sunlit Ruins, s geometrií, parem a překážkami.
• src/course/pier.js, ice.js, lava.js a sky.js: jamky zbylých čtyř drah.
• src/sim/constants.js: ladění fyziky.
• src/game/economy.js: míčky, stopy a outfity, s jejich cenami.
• src/ui/i18n.js a jeho doprovodné soubory: slovníky čtrnácti jazyků, včetně názvů jamek a tipů.
• src/game/localRecords.js: rekordy drah uložené v prohlížeči.
• src/audio/audio.js: efekty a mapování hudby v probeTracks.
• css/style.css: barvy rozhraní, písma a responzivní styly.

Přidání jamky krok za krokem

Tuhle změnu dělá většina kupujících a manuál ji popisuje v několika řádcích. Rozepsali jsme ji do pořadí, které bychom dodrželi sami.

1. Vyberte soubor dráhy, do které nová jamka patří, například lava.js pro Volcano Forge.
2. Zkopírujte existující definici jamky, která se blíží tomu, co chcete.
3. Dejte jí jedinečné id. Opětovné použití id zmate uložený postup.
4. Nastavte par, pozici odpalu a pozici jamky, pak překážky přesuňte nebo nahraďte.
5. Přidejte jamku do jejích drah v courses.js.
6. Přidejte její zobrazovaný název a tip do jazykových slovníků ve všech jazycích, které dodáváte.
7. Zahrajte si ji: otestujte kolize, obnovení po výletu mimo hřiště a všechny tři hvězdičky včetně skryté mince.

Upravujte v source/, změněné soubory zkopírujte na stejné cesty do game/ a pro test servírujte složku přes HTTP. package.json má skript serve, nebo můžete spustit python -m http.server 8765. Node.js je volitelný a potřebuje se jen tehdy, když chcete, aby npm spravoval verze knihoven.

Ostatní změny v rozumném pořadí

1. Značka a barvy: logo, barvy a písma v css/style.css. White label je povolen, takže vaše značka může nahradit naši.
2. Ceny v Lockeru: economy.js. Levnější kosmetika udělá příjemnější běžný web; dražší prodlouží dlouhou kampaň.
3. Texty: formulace a tipy v souborech i18n.
4. Hudba: dvě přibalené stopy lze nahradit nahrávkami, na které máte licenci. Zkopírujte soubor a upravte výslovné mapování v audio.js (probeTracks); hudba scény se vrací ke stopě hraní.
5. Fyzika: constants.js jako poslední a po malých krocích, protože každá jamka byla vyladěna proti současným hodnotám.

Pro příbuzný projekt se stejným přístupem čistého JavaScriptu a bez jakékoli 3D knihovny je naše šablona bazénu postavená stejně.

Velvet Pool: kulečník 8-ball v čistém JavaScriptu a WebGL2

Sunset Rally: 3D stolní tenis s kampaní devíti zápasů

Hosting, typy MIME a obaly pro aplikace

Nahrajte vše uvnitř game/ do složky, například public_html/puttide/, podsložky zachovejte a adresu otevřete přes HTTPS. Na serveru není potřeba npm, PHP, databáze ani účet. Otevření index.html z disku nefunguje, protože prohlížeče blokují moduly na file://.

Puttide má jeden detail hostingu, který 2D hra nemá: fyzika běží jako WebAssembly. Váš server musí posílat soubory .js s typem MIME pro JavaScript a .wasm jako application/wasm. Host, který to zkazí, ukáže prázdnou obrazovku nebo chybu modulu, takže to ověřte hned první den.

• Prohlížeč potřebuje: JavaScript, moduly ES, WebAssembly a WebGL2.
• V rámu portálu povolte celou obrazovku a automatické přehrávání.
• Na dotykových obrazovkách: tažením míříte a píchnete, dvěma prsty otáčíte kamerou, roztažením přibližujete.
• Není to instalovatelná offline aplikace: každé nové načtení stále jde na váš hosting.

Projekty nativních aplikací v balíčku nejsou. Pokud plánujete vydání v obchodě, počítejte s obalem a jeho testováním na skutečných telefonech, protože 3D hra s fyzikou je na starších zařízeních těžší než karetní hra.

Co není zahrnuto, a licence

Tohle je lokální verze pro prohlížeč: bez online multiplayeru nebo online místností, bez online žebříčku, bez cloudových účtů, bez reklamního SDK, bez nativních aplikací a bez hostingu. Rekordy drah, denní postup a kola na stejném zařízení zůstávají v prohlížeči hráče a žádné skóre se nenahrává. Uložení patří původu prohlížeče, takže přechod na jinou doménu hráče spustí od nuly.

Puttide stojí v katalogu 39 USD; do 30. listopadu 2026 ho akce Black Friday snižuje na 33,15 USD a koupě dvou nebo více šablon v jedné objednávce přidává slevu za balíček 5 % až 20 %. Licence je trvalá a nevýhradní pro jeden koncový produkt, váš nebo jednoho klienta. Můžete ji přejmenovat, měnit její kód, grafiku a zvuk a nechat hráče hrát zdarma nebo s reklamami, ale šablonu ani její kód samostatně prodávat nesmíte. Podpora trvá šest měsíců, nebo dvanáct s prodloužením; vlastní jamky, integrace a hosting se nacenují na vyžádání.

Licence, podpora a vracení peněz celé

Často kladené otázky

Je zdrojový kód minigolfu v TypeScriptu?

Ne. Puttide je čistý, naformátovaný JavaScript v source/src a game/src, bez minifikovaných nebo sbalených souborů vlastní výroby.

Můžu přidat vlastní jamky nebo dráhy?

Ano. Zkopírujte jamku v souboru dráhy, dejte jí jedinečné id, nastavte par, odpal a jamku, přidejte ji do courses.js a její název a tip do jazykových souborů.

Načítá Three.js z CDN?

Ne. Three.js, Rapier, písma i hudba jsou uvnitř game/, takže hra potřebuje jen váš hosting.

Proč můj hosting ukazuje prázdnou obrazovku?

Obvykle kvůli typům MIME. Servírujte .js jako JavaScript a .wasm jako application/wasm, otevřete hru přes HTTP(S) a zkontrolujte, že je zapnutý WebGL2.

Můžou hrát spolu kamarádi?

Ano, dva až čtyři hráči se střídají na stejném zařízení. Online hra není součástí této verze.

Je to správný základ pro vaši minigolfovou hru?

Puttide se hodí na rodinný nebo sportovní portál, na agenturu, která staví značkovou dráhu pro jednoho klienta, a na vývojáře, který chce vidět, jak Three.js a Rapier spolupracují v čitelném kódu. Hůř se hodí pro projekt, který od prvního dne potřebuje online kola nebo společný žebříček.

Zahrajte si celou dráhu v demu na telefonu a potom si přečtěte v manuálu oddíl o přidání jamky. Pokud vám ten oddíl připadá jako odpoledne práce, zbytek hry je už hotový.

Vyzkoušejte demo Puttide a koupte licenci