Panduan

Source Code Game Mini Golf: Hole, Fisika, dan Peta Lapangan 3D

Cara paket Puttide menyimpan 30 hole, letak Three.js dan Rapier, serta cara pembeli menambahkan hole sendiri.

Ilustrasi Puttide: bola golf menggelinding di green di antara reruntuhan batu dan pohon palem menuju bendera merah, dengan pulau-pulau kecil di laut belakangnya.

Bagus tidaknya source code game mini golf ditentukan oleh satu pekerjaan: menambah hole. Pembeli yang ingin membuat lapangan bermerek, level musiman, atau memasang logo klien di green pasti membuka file level lebih dulu. Kalau hole terkubur di dalam kode engine, proyeknya macet. Di Puttide, template mini golf 3D kami, setiap lapangan punya file hole sendiri dalam JavaScript biasa, dan manualnya menjelaskan langkah demi langkah cara menambah hole.

Panduan ini mengikuti urutan yang dialami developer saat membuka paketnya: folder, library, file lapangan, urutan perubahan, hosting, dan lisensi. Nama file diambil dari panduan pembeli yang disertakan bersama game.

Jawaban singkat untuk yang tidak sabar: Puttide ditulis dalam JavaScript yang rapi, dengan Three.js untuk grafis dan Rapier untuk fisika bola, keduanya sudah disertakan. Tanpa proses build, tanpa CDN, dan tanpa kode server.

Isi source code game mini golf ini

Puttide adalah game jadi dengan 30 hole di lima lapangan pulau: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden, dan Volcano Forge, masing-masing enam hole. Tanjakan, portal, bumper, dan kincir angin membuat tiap hole terasa seperti teka-teki kecil. Setiap hole memberi tiga bintang (selesai, par atau lebih baik, koin tersembunyi), dan medali perunggu, perak, serta emas menghargai ronde terbaik.

Selain lapangan, ada tantangan harian dengan variasi (berangin, green licin es, bola berat, dinding memantul, coin rush, atau birdie hunt), Locker tempat koin ditukar dengan bola, jejak, dan kosmetik lain, serta ronde untuk dua sampai empat pemain bergiliran di satu perangkat. Antarmukanya tersedia dalam 14 bahasa.

  • game/: build siap unggah, satu-satunya folder yang Anda publikasikan.
  • source/: game yang sama dalam edisi developer, dengan README dan package.json.
  • documentation/: satu panduan bergambar dalam bahasa Inggris dan Portugis.
  • THIRD-PARTY-LICENSES/: teks lisensi untuk library dan font.
  • Versi 1.1.0, diperbarui pada 22 Oktober 2026.

Buka halaman Puttide: demo, manual, dan harga

Three.js, Rapier, dan teknologi lainnya

Gerak bola disimulasikan oleh Rapier 3D 0.21.0 yang berjalan sebagai WebAssembly, dan adegannya digambar dengan Three.js r186. Keduanya ada di lib/three/ dan lib/rapier/ beserta file lisensinya, dan index.html memiliki import map yang mengarahkan game ke sana. Manual mencatat bahwa perilaku file library tidak diubah, hanya diformat agar mudah dibaca.

Ini penting karena dua alasan. Pertama, tidak ada yang dimuat dari CDN, jadi portal atau klien dengan kebijakan keamanan ketat cukup mengizinkan host Anda. Kedua, upgrade library adalah langkah manual yang disengaja: source/package.json mencantumkan versi persisnya, lalu Anda menyalin file modul baru ke folder lib/ yang sesuai dan mempertahankan path di import map.

  • Three.js r186: lisensi MIT.
  • Rapier 3D compat 0.21.0, WebAssembly tertanam: lisensi Apache-2.0.
  • Font web Rubik dan Fredoka: SIL Open Font License 1.1.
  • Dua lagu: music/menu.mp3 dan music/play-1.mp3.

Lokasi hole, koin, dan teks

Path di source/ dan game/ sama persis. Data lapangan dipisah per pulau, sehingga setiap file cukup pendek untuk dibaca sekali duduk.

  • src/course/courses.js: urutan lapangan dan syarat membukanya.
  • src/course/holes.js: hole Sunlit Ruins, lengkap dengan geometri, par, dan rintangan.
  • src/course/pier.js, ice.js, lava.js, dan sky.js: hole di empat lapangan lainnya.
  • src/sim/constants.js: pengaturan fisika.
  • src/game/economy.js: bola, jejak, dan kostum beserta harganya.
  • src/ui/i18n.js dan file pendampingnya: kamus untuk 14 bahasa, termasuk nama hole dan tips.
  • src/game/localRecords.js: rekor lapangan yang disimpan di browser.
  • src/audio/audio.js: efek suara dan pemetaan musik, di probeTracks.
  • css/style.css: warna antarmuka, font, dan gaya responsif.

Menambah hole, langkah demi langkah

Inilah perubahan yang paling sering dilakukan pembeli, dan manual menjelaskannya dalam beberapa baris. Kami menguraikannya menjadi urutan yang biasa kami ikuti sendiri.

  1. Pilih file lapangan tempat hole baru itu berada, misalnya lava.js untuk Volcano Forge.
  2. Duplikat definisi hole yang sudah ada dan paling mirip dengan yang Anda inginkan.
  3. Beri id yang unik. Memakai ulang id akan mengacaukan progres yang tersimpan.
  4. Atur par, posisi tee, dan posisi cup, lalu pindahkan atau ganti rintangannya.
  5. Tambahkan hole tersebut ke lapangannya di courses.js.
  6. Tambahkan nama tampilan dan tipsnya ke kamus bahasa, untuk setiap bahasa yang Anda rilis.
  7. Mainkan: uji tabrakan, pemulihan saat bola keluar lapangan, dan ketiga bintang, termasuk koin tersembunyi.

Edit di source/, salin file yang berubah ke path yang sama di game/, lalu sajikan folder itu lewat HTTP untuk diuji. package.json punya skrip serve, atau Anda bisa menjalankan python -m http.server 8765. Node.js opsional dan hanya diperlukan jika Anda ingin npm mengelola versi library.

Perubahan lain, dalam urutan yang masuk akal

  1. Merek dan warna: logo, warna, dan font di css/style.css. White label diizinkan, jadi merek Anda boleh menggantikan merek kami.
  2. Harga di Locker: economy.js. Kosmetik yang lebih murah membuat situs kasual terasa lebih ramah; yang lebih mahal memperpanjang kampanye yang panjang.
  3. Teks: kata-kata dan tips di file i18n.
  4. Musik: dua lagu bawaan bisa diganti dengan rekaman yang lisensinya Anda pegang. Salin filenya dan perbarui pemetaan eksplisit di audio.js (probeTracks); musik adegan akan kembali memakai lagu gameplay.
  5. Fisika: constants.js, paling akhir, dan sedikit demi sedikit, karena setiap hole disetel berdasarkan nilai saat ini.

Untuk proyek serupa dengan pendekatan JavaScript biasa yang sama tanpa library 3D sama sekali, template biliar kami dibuat dengan cara yang sama.

Velvet Pool: biliar 8-ball dalam JavaScript biasa dan WebGL2

Sunset Rally: tenis meja 3D dengan kampanye sembilan pertandingan

Hosting, tipe MIME, dan pembungkus aplikasi

Unggah semua isi game/ ke sebuah folder, misalnya public_html/puttide/, pertahankan subfoldernya, lalu buka alamatnya lewat HTTPS. Server tidak memerlukan npm, PHP, database, atau akun. Membuka index.html langsung dari disk tidak akan berhasil, karena browser memblokir modul di file://.

Puttide punya satu detail hosting yang tidak ada pada game 2D: fisikanya berjalan sebagai WebAssembly. Server Anda harus mengirim file .js dengan tipe MIME JavaScript dan .wasm sebagai application/wasm. Host yang salah mengatur ini akan menampilkan layar kosong atau error modul, jadi periksa sejak hari pertama.

  • Kebutuhan browser: JavaScript, modul ES, WebAssembly, dan WebGL2.
  • Di iframe portal, izinkan fullscreen dan autoplay.
  • Di layar sentuh: seret untuk membidik dan memukul, dua jari untuk memutar kamera, cubit untuk zoom.
  • Bukan aplikasi offline yang bisa diinstal: setiap muat ulang tetap mengakses host Anda.

Proyek aplikasi native tidak termasuk dalam paket. Jika Anda berencana merilis di toko aplikasi, siapkan anggaran untuk pembungkusnya dan pengujian di ponsel sungguhan, karena game fisika 3D lebih berat daripada game kartu di perangkat lama.

Yang tidak termasuk, dan lisensinya

Ini adalah edisi browser lokal: tanpa multiplayer online atau room online, tanpa papan peringkat online, tanpa akun cloud, tanpa SDK iklan, tanpa aplikasi native, dan tanpa hosting. Rekor lapangan, progres harian, dan ronde di satu perangkat tetap tersimpan di browser pemain, dan tidak ada skor yang diunggah. Data simpanan terikat pada origin browser, jadi pindah ke domain lain berarti pemain mulai dari awal.

Harga Puttide adalah $39; sampai 30 November 2026, promo Black Friday menurunkannya menjadi $33.15, dan membeli dua template atau lebih dalam satu pesanan memberi tambahan diskon paket 5% hingga 20%. Lisensinya permanen dan non-eksklusif untuk satu produk akhir, milik Anda atau milik satu klien. Anda boleh mengganti mereknya, mengubah kode, grafis, dan audionya, serta membuka game untuk pemain secara gratis atau dengan iklan, tetapi Anda tidak boleh menjual ulang template atau kodenya secara terpisah. Dukungan berlaku enam bulan, atau dua belas bulan dengan perpanjangan; hole kustom, integrasi, dan hosting dihitung berdasarkan permintaan.

Ketentuan lisensi, dukungan, dan pengembalian dana selengkapnya

Pertanyaan yang sering diajukan

Apakah source code mini golf ini ditulis dalam TypeScript?

Tidak. Puttide ditulis dalam JavaScript biasa yang rapi di source/src dan game/src, tanpa file kami sendiri yang di-minify atau di-bundle.

Bisakah saya menambah hole atau lapangan sendiri?

Bisa. Duplikat sebuah hole di file lapangan, beri id unik, atur par, tee, dan cup, tambahkan ke courses.js, lalu tambahkan nama dan tipsnya ke file bahasa.

Apakah Three.js dimuat dari CDN?

Tidak. Three.js, Rapier, font, dan musik semuanya ada di dalam game/, jadi game hanya membutuhkan host Anda.

Kenapa host saya menampilkan layar kosong?

Biasanya karena tipe MIME. Kirim .js sebagai JavaScript dan .wasm sebagai application/wasm, buka game lewat HTTP(S), dan pastikan WebGL2 aktif.

Bisakah dimainkan bersama teman?

Bisa, dua sampai empat pemain bergiliran di perangkat yang sama. Permainan online tidak termasuk dalam edisi ini.

Apakah ini dasar mini golf yang tepat untuk Anda?

Puttide cocok untuk portal keluarga atau olahraga, agensi yang membuat lapangan bermerek untuk satu klien, dan developer yang ingin melihat bagaimana Three.js dan Rapier bekerja sama dalam kode yang mudah dibaca. Kurang cocok untuk proyek yang sejak hari pertama membutuhkan ronde online atau papan peringkat bersama.

Mainkan satu lapangan penuh di demo menggunakan ponsel, lalu baca bagian manual tentang menambah hole. Kalau bagian itu terlihat seperti pekerjaan satu sore bagi Anda, sisa game-nya sudah jadi.

Mainkan demo Puttide dan beli lisensinya