Mini Golf Game Source Code: Mga Hole, Physics at 3D Course Map
Paano iniimbak ng Puttide package ang 30 hole nito, kung nasaan ang Three.js at Rapier, at paano magdaragdag ang buyer ng sarili nilang hole.

Iisa ang nagpapasya kung gagana ang mini golf game source code: ang pagdaragdag ng hole. Ang buyer na gustong gumawa ng branded na course, seasonal na level o logo ng kliyente sa green ay bubuksan muna ang mga level file, at kapag nakabaon ang isang hole sa engine code, titigil ang proyekto. Sa Puttide, ang 3D mini golf template namin, may sariling hole file sa plain JavaScript ang bawat course, at ipinapaliwanag ng manual kung paano magdagdag ng isa.
Sinusundan ng gabay na ito ang package na parang nakikita ito ng developer: ang mga folder, ang mga library, ang course file, ang ayos ng mga pagbabago, hosting at lisensya. Galing ang mga pangalan ng file sa buyer guide na kasama ng laro.
Ang maikling sagot para sa nagmamadali: ang Puttide ay formatted JavaScript na may Three.js para sa pagguhit at Rapier para sa physics ng bola, parehong kasama sa bundle. Walang build step, walang CDN at walang server code.
Ano ang kasama sa mini golf game source code
Tapos nang laro ang Puttide na may 30 hole sa limang island course: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden at Volcano Forge, tig-anim na hole. Ginagawang maliit na puzzle ng mga ramp, portal, bumper at windmill ang mga hole. Tatlong bituin ang nakukuha sa bawat hole (makatapos, par o mas mahusay, ang nakatagong barya), at may bronze, silver at gold na medalya para sa pinakamagagandang round.
Bukod sa mga course, may pang-araw-araw na challenge na may kakaibang twist (mahangin, nagyeyelong green, mabigat na bola, bouncy na pader, coin rush o birdie hunt), isang Locker kung saan binibili ng barya ang bola, trail at iba pang cosmetic, at round para sa dalawa hanggang apat na manlalarong nagpapalitan ng turn sa iisang device. Nasa 14 na wika ang interface.
- game/: ang handang i-upload na build, ang tanging folder na ilalathala mo.
- source/: ang parehong laro bilang developer edition, na may README at package.json.
- documentation/: isang illustrated na gabay sa Ingles at Portuguese.
- THIRD-PARTY-LICENSES/: teksto ng lisensya para sa mga library at font.
- Bersyon 1.1.0, na-update noong 22 Oktubre 2026.
Buksan ang listing ng Puttide: demo, manual at presyo
Three.js, Rapier at ang iba pang stack
Sa Rapier 3D 0.21.0 sinisimulate ang bola, na tumatakbo bilang WebAssembly, at iginuguhit ang eksena gamit ang Three.js r186. Parehong nasa lib/three/ at lib/rapier/ kasama ang kanilang lisensya, at may import map ang index.html na tumuturo sa laro sa mga ito. Sinasabi ng manual na hindi nagbago ang asal ng mga library file at inayos lang ang format para mabasa.
Mahalaga ito sa dalawang dahilan. Una, walang nilo-load mula sa CDN, kaya ang portal o kliyenteng may mahigpit na security policy ay kailangan lang ng host mo. Pangalawa, ang pag-upgrade ng library ay sadya at manwal na hakbang: nakalista sa source/package.json ang eksaktong bersyon, at kinokopya mo ang bagong module file sa katugmang lib/ folder at pinananatili ang mga path sa import map.
- Three.js r186: MIT na lisensya.
- Rapier 3D compat 0.21.0, naka-embed ang WebAssembly: Apache-2.0 na lisensya.
- Rubik at Fredoka web font: SIL Open Font License 1.1.
- Dalawang music track: music/menu.mp3 at music/play-1.mp3.
Nasaan ang mga hole, barya at teksto
Pareho ang path sa source/ at game/. Hinati ang course data ayon sa isla, para maikli ang bawat file at mabasa sa isang upuan lang.
- src/course/courses.js: pagkakasunod ng course at mga kailangan sa pag-unlock.
- src/course/holes.js: ang mga hole ng Sunlit Ruins, na may geometry, par at mga hadlang.
- src/course/pier.js, ice.js, lava.js at sky.js: ang mga hole ng apat na iba pang course.
- src/sim/constants.js: tuning ng physics.
- src/game/economy.js: bola, trail at outfit, kasama ang kanilang presyo.
- src/ui/i18n.js at mga kasamang file: ang 14 na diksyunaryo ng wika, kasama ang pangalan at tip ng mga hole.
- src/game/localRecords.js: mga rekord ng course na naka-save sa browser.
- src/audio/audio.js: mga effect at mapping ng musika, sa probeTracks.
- css/style.css: mga kulay ng interface, font at responsive na estilo.
Pagdaragdag ng hole, hakbang-hakbang
Ito ang pagbabagong pinakamaraming ginagawa ng mga buyer, at ilang linya lang ang paglalarawan sa manual. Pinalawak namin ito sa ayos na susundan namin mismo.
- Piliin ang course file kung saan kabilang ang bagong hole, halimbawa lava.js para sa Volcano Forge.
- Kopyahin ang isang umiiral na hole definition na malapit sa gusto mo.
- Bigyan ito ng natatanging id. Nalilito ang naka-save na progreso kapag inulit ang id.
- Itakda ang par, ang posisyon ng tee at ang posisyon ng cup, pagkatapos ilipat o palitan ang mga hadlang.
- Idagdag ang hole sa course nito sa courses.js.
- Idagdag ang display name at tip nito sa mga diksyunaryo ng wika, sa bawat wikang ihahatid mo.
- Laruin ito: subukan ang banggaan, pagbawi sa labas ng hangganan at ang tatlong bituin, kasama ang nakatagong barya.
Mag-edit sa source/, kopyahin ang mga binagong file sa parehong path sa game/, at i-serve ang folder sa HTTP para masubukan. May serve script ang package.json, o puwede mong patakbuhin ang python -m http.server 8765. Opsyonal ang Node.js, kailangan lang kung gusto mong pamahalaan ng npm ang mga bersyon ng library.
Ang iba pang pagbabago, sa maayos na pagkakasunod
- Brand at kulay: logo, kulay at font sa css/style.css. Puwede ang white label, kaya puwedeng palitan ng brand mo ang sa amin.
- Presyo sa Locker: economy.js. Ang mas murang cosmetic ay nagpapagaan sa casual na site; ang mas mahal ay nagpapahaba sa mahabang kampanya.
- Mga teksto: wording at tip sa mga i18n file.
- Musika: maaaring palitan ang dalawang kasamang track ng recording na may lisensya ka. Kopyahin ang file at i-update ang tahasang mapping sa audio.js (probeTracks); babalik sa gameplay track ang musika ng eksena.
- Physics: constants.js, sa huli, at sa maliliit na hakbang, dahil bawat hole ay in-tune laban sa kasalukuyang halaga.
Para sa kaugnay na proyekto na may parehong plain-JavaScript na paraan at walang 3D library, ginawa sa parehong paraan ang pool template namin.
Velvet Pool: 8-ball pool sa plain JavaScript at WebGL2
Sunset Rally: 3D table tennis na may nine-match na kampanya
Hosting, MIME type at app wrapper
I-upload ang lahat ng nasa loob ng game/ sa isang folder gaya ng public_html/puttide/, panatilihin ang mga subfolder, at buksan ang address sa HTTPS. Walang kailangang npm, PHP, database o account sa server. Hindi gumagana ang pagbukas ng index.html mula sa disk, dahil hinaharangan ng browser ang mga module sa file://.
May isang detalye sa hosting ang Puttide na wala sa 2D na laro: tumatakbo bilang WebAssembly ang physics. Dapat ipadala ng server mo ang .js file bilang JavaScript MIME type at ang .wasm bilang application/wasm. Ang host na nagkakamali dito ay nagpapakita ng blangkong screen o error sa module, kaya suriin ito sa unang araw.
- Kailangan ng browser: JavaScript, ES module, WebAssembly at WebGL2.
- Sa portal iframe, payagan ang fullscreen at autoplay.
- Sa touch screen: i-drag para tumutok at mag-putt, dalawang daliri para paikutin ang camera, pinch para mag-zoom.
- Hindi installable na offline na app: bawat bagong load ay kumokonekta pa rin sa host mo.
Wala sa package ang native app project. Kung plano mo ang release sa store, maglaan para sa wrapper at pagsubok nito sa totoong telepono, dahil mas mabigat ang 3D physics game kaysa card game sa lumang device.
Hindi kasama, at ang lisensya
Lokal na browser edition ito: walang online multiplayer o online room, walang online leaderboard, walang cloud account, walang advertising SDK, walang native app at walang hosting. Nananatili sa browser ng manlalaro ang mga rekord ng course, pang-araw-araw na progreso at round sa parehong device, at walang score na ina-upload. Nakatali sa browser origin ang mga save, kaya kapag lumipat ka sa ibang domain, magsisimulang muli ang mga manlalaro.
Nasa $39 ang Puttide; hanggang 30 Nobyembre 2026, dinadala ito ng Black Friday promotion sa $33.15, at ang pagbili ng dalawa o higit pang template sa iisang order ay nagdaragdag ng 5% hanggang 20% bundle discount. Habambuhay at hindi eksklusibo ang lisensya para sa isang end product, sa iyo o sa isang kliyente. Puwede mong i-rebrand ito, baguhin ang code, art at audio nito, at papasukin ang manlalaro nang libre o may ad, pero hindi mo puwedeng ibenta muli ang template o ang code nito nang mag-isa. Anim na buwan ang suporta, o 12 kung may extension; ang custom na hole, integrasyon at hosting ay ino-quote kapag hiniling.
Buong lisensya, suporta at refund terms
Mga madalas itanong
Nasa TypeScript ba ang mini golf source code?
Hindi. Ang Puttide ay plain, formatted na JavaScript sa source/src at game/src, walang minified o bundled na file na gawa namin.
Puwede ba akong magdagdag ng sarili kong hole o course?
Oo. Kopyahin ang isang hole sa course file, bigyan ito ng natatanging id, itakda ang par, tee at cup, idagdag ito sa courses.js, at idagdag ang pangalan at tip nito sa mga language file.
Nilo-load ba nito ang Three.js mula sa CDN?
Hindi. Nasa loob ng game/ ang Three.js, Rapier, mga font at musika, kaya kailangan lang ng laro ang host mo.
Bakit blangkong screen ang ipinapakita ng host ko?
Kadalasan dahil sa MIME type. I-serve ang .js bilang JavaScript at ang .wasm bilang application/wasm, buksan ang laro sa HTTP(S), at tiyaking naka-enable ang WebGL2.
Puwede bang maglaro nang sabay ang magkakaibigan?
Oo, dalawa hanggang apat na manlalaro na nagpapalitan ng turn sa iisang device. Hindi bahagi ng edition na ito ang online na paglalaro.
Tama ba ito bilang mini golf base mo?
Bagay ang Puttide sa portal ng pamilya o sports, sa ahensyang gumagawa ng branded na course para sa isang kliyente, at sa developer na gustong makita kung paano nagtutulungan ang Three.js at Rapier sa nababasang code. Mahina itong akma sa proyektong kailangan ng online na round o shared leaderboard mula sa unang araw.
Laruin ang buong course sa demo sa telepono, pagkatapos basahin ang seksyon ng manual tungkol sa pagdaragdag ng hole. Kung mukhang isang hapon ng trabaho ang seksyong iyon, tapos na ang iba pang bahagi ng laro.
