Izvorna koda igre mini golf: luknje, fizika in 3D zemljevid prog

Izvorna koda igre mini golf stoji ali pade na eni nalogi: dodajanju luknje. Kupec, ki želi proge z blagovno znamko, sezonsko stopnjo ali logotip stranke na zelenici, najprej odpre datoteke stopenj, in če je luknja zakopana v kodi motorja, se projekt ustavi. V Puttide, naši predlogi za 3D mini golf, ima vsaka proga svojo datoteko z luknjami v navadnem JavaScriptu, priročnik pa korak za korakom pokaže, kako dodati novo.

Ta vodnik sledi paketu tako, kot ga razvijalec vidi: mape, knjižnice, datoteke prog, vrstni red sprememb, gostovanje in licenco. Imena datotek so iz vodnika za kupce, ki je priložen igri.

Kratek odgovor za nestrpne: Puttide je oblikovan JavaScript s Three.js za risanje in Rapier za fiziko žoge, oba sta priložena. Ni koraka gradnje, ni CDN-ja in ni strežniške kode.

Kaj vsebuje izvorna koda igre mini golf

Puttide je dokončana igra s 30 luknjami na petih otoških progah: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden in Volcano Forge, po šest lukenj vsaka. Rampe, portali, odbijači in vetrnice spremenijo luknje v majhne uganke. Vsaka luknja podeli tri zvezdice (dokončanje, par ali bolje, skriti kovanec), bronasta, srebrna in zlata medalja pa nagradita najboljše kroge.

Poleg prog so dnevni izziv z obrati (veter: windy, ledena zelenica: icy green, težka žoga: heavy ball, odbojne stene: bouncy walls, nalet kovancev: coin rush ali lov na birdie: birdie hunt), Locker (omara), kjer kovanci kupijo žoge, sledi in drugo kozmetiko, ter krogi za dva do štiri igralce, ki izmenično igrajo na eni napravi. Vmesnik je v 14 jezikih.

• game/: pripravljena gradnja za nalaganje, edina mapa, ki jo objavite.
• source/: ista igra kot razvijalska izdaja, z README in package.json.
• documentation/: en ilustriran vodnik v angleščini in portugalščini.
• THIRD-PARTY-LICENSES/: besedila licenc za knjižnice in pisave.
• Različica 1.1.0, posodobljena 22. oktobra 2026.

Oglejte si stran Puttide: demo, priročnik in ceno

Three.js, Rapier in preostali sklad

Žogo simulira Rapier 3D 0.21.0, ki teče kot WebAssembly, prizor pa riše Three.js r186. Oba sta v lib/three/ in lib/rapier/ s svojimi datotekami z licenco, index.html pa ima import map, ki igro usmeri nanju. Priročnik pove, da so datoteke knjižnic vedenjsko nespremenjene in le oblikovane, da jih je mogoče brati.

To je pomembno iz dveh razlogov. Prvič, nič se ne nalaga iz CDN-ja, zato portalu ali stranki z ostrimi varnostnimi pravili zadostuje vaš gostitelj. Drugič, posodobitev knjižnice je ročen, namerni korak: source/package.json navaja natančne različice, nove module pa prekopirate v ustrezno mapo lib/ in ohranite poti v import map.

• Three.js r186: licenca MIT.
• Rapier 3D compat 0.21.0, WebAssembly vdelan: licenca Apache-2.0.
• Spletni pisavi Rubik in Fredoka: SIL Open Font License 1.1.
• Dve glasbeni skladbi: music/menu.mp3 in music/play-1.mp3.

Kje so luknje, kovanci in besedila

Poti so enake v source/ in game/. Podatki o progah so razdeljeni po otokih, zato je vsaka datoteka dovolj kratka, da jo preberete v enem sedenju.

• src/course/courses.js: vrstni red prog in zahteve za odklepanje.
• src/course/holes.js: luknje Sunlit Ruins, z geometrijo, parom in ovirami.
• src/course/pier.js, ice.js, lava.js in sky.js: luknje ostalih štirih prog.
• src/sim/constants.js: nastavitve fizike.
• src/game/economy.js: žoge, sledi in obleke z njihovimi cenami.
• src/ui/i18n.js in pripadajoče datoteke: slovarji za 14 jezikov, vključno z imeni lukenj in namigi.
• src/game/localRecords.js: rekordi prog, shranjeni v brskalniku.
• src/audio/audio.js: zvočni učinki in preslikava glasbe v probeTracks.
• css/style.css: barve vmesnika, pisave in odzivni slogi.

Dodajanje luknje, korak za korakom

To je sprememba, ki jo večina kupcev opravi, in priročnik jo opiše v nekaj vrsticah. Razširili smo jo v vrstni red, po katerem bi šli sami.

1. Izberite datoteko proge, ki ji nova luknja pripada, na primer lava.js za Volcano Forge.
2. Podvojite obstoječo definicijo luknje, ki je videti podobna tisti, kar želite.
3. Dajte ji edinstven id. Ponovna uporaba id-ja zmede shranjen napredek.
4. Nastavite par, položaj začetka in položaj jamice, nato premaknite ali zamenjajte ovire.
5. Dodajte luknjo k njeni progi v courses.js.
6. Dodajte njeno prikazno ime in namig v jezikovne slovarje, v vsakem jeziku, ki ga izdate.
7. Zaženite jo: preizkusite trke, vračanje po izhodu z igrišča in vse tri zvezdice, vključno s skritim kovancem.

Urejajte v source/, spremenjene datoteke kopirajte na iste poti v game/ in mapo postrezite prek HTTP za preizkus. Datoteka package.json ima skript serve, lahko pa zaženete python -m http.server 8765. Node.js je neobvezen in potreben samo, če želite, da npm upravlja različice knjižnic.

Druge spremembe, po smiselnem vrstnem redu

1. Blagovna znamka in barve: logotip, barve in pisave v css/style.css. Bela označba je dovoljena, zato lahko vaša blagovna znamka nadomesti našo.
2. Cene v Lockerju: economy.js. Cenejša kozmetika naredi neformalno stran prijaznejšo; dražja raztegne dolgo kampanjo.
3. Besedila: formulacije in namigi v datotekah i18n.
4. Glasba: obe priloženi skladbi lahko zamenjate s posnetki, za katere imate licenco. Kopirajte datoteko in posodobite izrecno preslikavo v audio.js (probeTracks); glasba prizorov se vrne na skladbo igranja.
5. Fiziko: constants.js, kot zadnjo in v majhnih korakih, ker je bila vsaka luknja uglašena na trenutne vrednosti.

Za sorodni projekt z enakim pristopom navadnega JavaScripta in brez 3D knjižnice je naša predloga za bazen zgrajena na enak način.

Velvet Pool: osmica v navadnem JavaScriptu in WebGL2

Sunset Rally: 3D namizni tenis s kampanjo devetih tekem

Gostovanje, MIME tipi in ovojnice za aplikacije

Vse iz mape game/ naložite v mapo, na primer public_html/puttide/, ohranite podmape in odprite naslov prek HTTPS. Na strežniku niso potrebni npm, PHP, baza ali račun. Odpiranje index.html z diska ne deluje, ker brskalniki na file:// blokirajo module.

Puttide ima eno podrobnost gostovanja, ki je pri 2D igri ni: fizika teče kot WebAssembly. Vaš strežnik mora datoteke .js poslati z vrsto JavaScript MIME, .wasm pa kot application/wasm. Gostitelj, ki to zgreši, pokaže prazen zaslon ali napako modula, zato to preverite prvi dan.

• Brskalnik mora podpirati: JavaScript, module ES, WebAssembly in WebGL2.
• V okviru iframe portala dovolite celozaslonski način in samodejno predvajanje.
• Na zaslonih na dotik: povlecite za usmerjanje in udarec, dva prsta za vrtenje kamere, stisk za približevanje.
• Ni aplikacija, ki bi se namestila za delo brez povezave: vsako sveže nalaganje še vedno doseže vašega gostitelja.

Projekti nativnih aplikacij niso v paketu. Če načrtujete izdajo v trgovini, predvidite ovojnico in preizkušanje na pravih telefonih, ker je 3D igra s fiziko težja od igre s kartami na starejših napravah.

Ni vključeno in licenca

To je lokalna izdaja za brskalnik: brez spletnega večigralskega načina ali spletnih sob, brez spletne lestvice, brez računov v oblaku, brez oglasnega SDK-ja, brez nativnih aplikacij in brez gostovanja. Rekordi prog, dnevni napredek in krogi na isti napravi ostanejo v brskalniku igralca, nobena točka se ne naloži na strežnik. Shranjevanja pripadajo izvoru brskalnika, zato se prenos na drugo domeno začne pri igralcih znova.

Puttide stane 39 $; do 30. novembra 2026 akcija Black Friday zniža ceno na 33,15 $, nakup dveh ali več predlog v enem naročilu pa doda popust za paket od 5 % do 20 %. Licenca je trajna in nekskluzivna za en končni izdelek, vaš ali enega naročnika. Smete jo preimenovati, spreminjati kodo, grafiko in zvok ter dovoliti igralcem brezplačen dostop ali dostop z oglasi, ne smete pa ponovno prodajati predloge ali njene kode samo. Podpora traja šest mesecev ali dvanajst z razširitvijo; luknje po meri, vključitve in gostovanje ponudimo na zahtevo.

Licenca, podpora in pogoji vračila v celoti

Pogosta vprašanja

Ali je izvorna koda mini golfa v TypeScriptu?

Ne. Puttide je navaden, oblikovan JavaScript v source/src in game/src, brez skrčenih ali združenih datotek, ki bi bile naše.

Ali lahko dodam svoje luknje ali proge?

Da. Podvojite luknjo v datoteki proge, dajte ji edinstven id, nastavite par, začetek in jamico, dodajte jo v courses.js ter njeno ime in namig v jezikovne datoteke.

Ali nalaga Three.js iz CDN-ja?

Ne. Three.js, Rapier, pisave in glasba so vsi v game/, zato igra potrebuje samo vaš gostitelj.

Zakaj moj gostitelj pokaže prazen zaslon?

Ponavadi zaradi MIME tipov. Postrežite .js kot JavaScript in .wasm kot application/wasm, igro odprite prek HTTP(S) in preverite, ali je WebGL2 omogočen.

Ali lahko igrajo prijatelji skupaj?

Da, dva do štirje igralci izmenično igrajo na isti napravi. Spletna igra ni del te izdaje.

Ali je to pravi temelj za mini golf za vas?

Puttide ustreza družinskemu ali športnemu portalu, agenciji, ki gradi blagovno znamčno progo za eno stranko, in razvijalcu, ki želi videti, kako Three.js in Rapier delujeta skupaj v berljivi kodi. Manj se prilega projektu, ki od prvega dne potrebuje spletne kroge ali skupno lestvico.

Odigrajte celotno progo v demu na telefonu, nato preberite razdelek priročnika o dodajanju luknje. Če se vam zdi ta razdelek kot popoldan dela, je ostala igra že zgrajena.

Zaženite demo Puttide in kupite licenco