Kod sumber permainan mini golf: lubang, fizik dan peta padang 3D
Di mana pakej Puttide menyimpan 30 lubangnya, di mana Three.js dan Rapier berada, dan bagaimana pembeli menambah lubang sendiri.
Kod sumber permainan mini golf diuji oleh satu tugas: menambah lubang baharu. Pembeli yang mahukan padang berjenama, tahap bermusim atau logo pelanggan di atas rumput hijau akan membuka fail tahap dahulu, dan jika lubang tertanam dalam kod enjin, projek akan tersekat. Dalam Puttide, templat mini golf 3D kami, setiap padang mempunyai fail lubangnya sendiri dalam JavaScript biasa, dan manual menerangkan cara menambah satu lubang langkah demi langkah.
Panduan ini menelusuri pakej mengikut urutan seorang pembangun menemuinya: folder, pustaka, fail padang, urutan perubahan, pengehosan dan lesen. Nama fail diambil daripada panduan pembeli yang disertakan bersama permainan.
Jawapan ringkas untuk yang tergesa-gesa: Puttide ialah JavaScript yang diformat supaya mudah dibaca, dengan Three.js untuk lukisan dan Rapier untuk fizik bola, kedua-duanya disertakan. Tiada langkah build, tiada CDN dan tiada kod pelayan.
Apa yang ada dalam kod sumber permainan mini golf ini
Puttide ialah permainan lengkap dengan 30 lubang di lima padang pulau: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden dan Volcano Forge, enam lubang setiap satu. Tanjakan, portal, pemantul dan kincir angin menjadikan setiap lubang teka-teki kecil. Setiap lubang memberi tiga bintang (tamat, par atau lebih baik, syiling tersembunyi), dan pingat gangsa, perak dan emas menghargai pusingan terbaik.
Selain padang, ada cabaran harian dengan kelainan (berangin, rumput berais, bola berat, dinding melantun, buru syiling atau buru birdie), Locker tempat syiling digunakan untuk membeli bola, jejak dan kosmetik lain, serta pusingan dua hingga empat pemain yang bergilir pada satu peranti. Antara muka tersedia dalam 14 bahasa.
- game/: build sedia dimuat naik, satu-satunya folder yang anda terbitkan.
- source/: permainan yang sama dalam edisi pembangun, dengan README dan package.json.
- documentation/: satu panduan bergambar dalam bahasa Inggeris dan Portugis.
- THIRD-PARTY-LICENSES/: teks lesen untuk pustaka dan fon.
- Versi 1.1.0, dikemas kini pada 22 Oktober 2026.
Buka halaman Puttide: demo, manual dan harga
Three.js, Rapier dan teknologi selebihnya
Bola disimulasikan oleh Rapier 3D 0.21.0 yang berjalan sebagai WebAssembly, manakala adegan dilukis dengan Three.js r186. Kedua-duanya berada dalam lib/three/ dan lib/rapier/ bersama fail lesen, dan index.html mempunyai import map yang menghalakan permainan kepadanya. Manual menyatakan fail pustaka tidak berubah dari segi tingkah laku, cuma diformat supaya boleh dibaca.
Ini penting atas dua sebab. Pertama, tiada apa-apa dimuatkan dari CDN, jadi portal atau pelanggan dengan dasar keselamatan yang ketat hanya perlukan hos anda. Kedua, menaik taraf pustaka ialah langkah manual yang disengajakan: source/package.json menyenaraikan versi tepat, dan anda menyalin fail modul baharu ke atas folder lib/ yang sepadan serta mengekalkan laluan import map.
- Three.js r186: lesen MIT.
- Rapier 3D compat 0.21.0, WebAssembly terbenam: lesen Apache-2.0.
- Fon web Rubik dan Fredoka: SIL Open Font License 1.1.
- Dua lagu: music/menu.mp3 dan music/play-1.mp3.
Di mana lubang, syiling dan teks disimpan
Laluan dalam source/ dan game/ adalah sama. Data padang dibahagikan mengikut pulau, jadi setiap fail cukup pendek untuk dibaca sekali duduk.
- src/course/courses.js: urutan padang dan syarat buka kunci.
- src/course/holes.js: lubang Sunlit Ruins, dengan geometri, par dan halangan.
- src/course/pier.js, ice.js, lava.js dan sky.js: lubang empat padang yang lain.
- src/sim/constants.js: penalaan fizik.
- src/game/economy.js: bola, jejak dan pakaian, berserta harganya.
- src/ui/i18n.js dan fail pengiringnya: kamus 14 bahasa, termasuk nama lubang dan petua.
- src/game/localRecords.js: rekod padang yang disimpan dalam pelayar.
- src/audio/audio.js: kesan bunyi dan pemetaan muzik dalam probeTracks.
- css/style.css: warna antara muka, fon dan gaya responsif.
Menambah lubang, langkah demi langkah
Inilah perubahan yang dibuat oleh kebanyakan pembeli, dan manual menerangkannya dalam beberapa baris. Kami huraikan mengikut urutan yang kami sendiri akan ikut.
- Pilih fail padang tempat lubang baharu itu, contohnya lava.js untuk Volcano Forge.
- Salin definisi lubang sedia ada yang paling hampir dengan apa yang anda mahu.
- Beri id yang unik. Menggunakan semula id akan mengelirukan kemajuan yang disimpan.
- Tetapkan par, kedudukan tee dan kedudukan cup, kemudian alih atau ganti halangan.
- Tambah lubang itu ke padangnya dalam courses.js.
- Tambah nama paparan dan petuanya ke dalam kamus setiap bahasa yang anda terbitkan.
- Mainkan: uji pelanggaran, pemulihan apabila bola keluar padang dan ketiga-tiga bintang, termasuk syiling tersembunyi.
Sunting dalam source/, salin fail yang berubah ke laluan yang sama dalam game/, dan hidangkan folder melalui HTTP untuk menguji. package.json ada skrip serve, atau anda boleh jalankan python -m http.server 8765. Node.js adalah pilihan dan hanya perlu jika anda mahu npm mengurus versi pustaka.
Perubahan lain, mengikut urutan yang munasabah
- Jenama dan warna: logo, warna dan fon dalam css/style.css. White label dibenarkan, jadi jenama anda boleh menggantikan jenama kami.
- Harga dalam Locker: economy.js. Kosmetik yang lebih murah menjadikan laman kasual lebih mesra; yang lebih mahal memanjangkan kempen yang panjang.
- Teks: ayat dan petua dalam fail i18n.
- Muzik: dua lagu yang disertakan boleh diganti dengan rakaman yang anda pegang lesennya. Salin fail dan kemas kini pemetaan eksplisit dalam audio.js (probeTracks); muzik adegan akan kembali kepada lagu permainan.
- Fizik: constants.js, paling akhir dan sedikit demi sedikit, kerana setiap lubang ditala mengikut nilai semasa.
Untuk projek berkaitan dengan pendekatan JavaScript biasa yang sama tanpa pustaka 3D langsung, templat pool kami dibina dengan cara yang sama.
Velvet Pool: pool 8 bola dalam JavaScript biasa dan WebGL2
Sunset Rally: ping pong 3D dengan kempen sembilan perlawanan
Pengehosan, jenis MIME dan pembungkus aplikasi
Muat naik semua kandungan game/ ke folder seperti public_html/puttide/, kekalkan subfolder, dan buka alamat melalui HTTPS. Pelayan tidak memerlukan npm, PHP, pangkalan data atau akaun. Membuka index.html dari cakera tidak berfungsi kerana pelayar menyekat modul pada file://.
Puttide ada satu perincian pengehosan yang tiada pada permainan 2D: fiziknya berjalan sebagai WebAssembly. Pelayan anda mesti menghantar fail .js dengan jenis MIME JavaScript dan .wasm sebagai application/wasm. Hos yang tersilap tetapan akan menunjukkan skrin kosong atau ralat modul, jadi semak pada hari pertama.
- Keperluan pelayar: JavaScript, modul ES, WebAssembly dan WebGL2.
- Dalam iframe portal, benarkan skrin penuh dan autoplay.
- Pada skrin sentuh: seret untuk membidik dan memukul, dua jari untuk memutar kamera, cubit untuk zum.
- Bukan aplikasi luar talian yang boleh dipasang: setiap muatan baharu masih menghubungi hos anda.
Projek aplikasi natif tidak termasuk dalam pakej. Jika anda merancang terbitan di gedung aplikasi, peruntukkan bajet untuk pembungkus dan ujiannya pada telefon sebenar, kerana permainan fizik 3D lebih berat berbanding permainan kad pada peranti lama.
Apa yang tidak disertakan, dan lesen
Ini ialah edisi pelayar tempatan: tiada mod berbilang pemain atau bilik dalam talian, tiada papan pendahulu dalam talian, tiada akaun awan, tiada SDK iklan, tiada aplikasi natif dan tiada pengehosan. Rekod padang, kemajuan harian dan pusingan pada peranti yang sama kekal dalam pelayar pemain, dan tiada skor dimuat naik. Simpanan terikat pada origin pelayar, jadi berpindah ke domain lain menyebabkan pemain bermula semula.
Harga senarai Puttide ialah $39; sehingga 30 November 2026, promosi Black Friday menurunkannya kepada $33.15, dan membeli dua templat atau lebih dalam satu pesanan menambah diskaun pakej 5% hingga 20%. Lesennya kekal dan tidak eksklusif untuk satu produk akhir, milik anda atau seorang pelanggan. Anda boleh menukar jenama, mengubah kod, grafik dan audio, serta membiarkan pemain bermain secara percuma atau dengan iklan, tetapi tidak boleh menjual semula templat atau kodnya secara bersendirian. Sokongan selama enam bulan, atau dua belas bulan dengan lanjutan; lubang tersuai, integrasi dan pengehosan disebut harga atas permintaan.
Terma lesen, sokongan dan bayaran balik sepenuhnya
Soalan lazim
Adakah kod sumber mini golf ini dalam TypeScript?
Tidak. Puttide ialah JavaScript biasa yang diformat dalam source/src dan game/src, tanpa fail yang dimampatkan atau dibundel oleh kami.
Bolehkah saya menambah lubang atau padang sendiri?
Boleh. Salin satu lubang dalam fail padang, beri id unik, tetapkan par, tee dan cup, tambahkannya ke courses.js dan masukkan nama serta petuanya ke dalam fail bahasa.
Adakah Three.js dimuatkan dari CDN?
Tidak. Three.js, Rapier, fon dan muzik semuanya dalam game/, jadi permainan hanya perlukan hos anda.
Kenapa hos saya menunjukkan skrin kosong?
Biasanya disebabkan jenis MIME. Hidangkan .js sebagai JavaScript dan .wasm sebagai application/wasm, buka permainan melalui HTTP(S), dan pastikan WebGL2 didayakan.
Bolehkah rakan-rakan bermain bersama?
Boleh, dua hingga empat pemain bergilir pada peranti yang sama. Permainan dalam talian tiada dalam edisi ini.
Adakah ini asas mini golf yang sesuai untuk anda?
Puttide sesuai untuk portal keluarga atau sukan, agensi yang membina padang berjenama untuk seorang pelanggan, dan pembangun yang mahu melihat bagaimana Three.js dan Rapier berfungsi bersama dalam kod yang mudah dibaca. Ia kurang sesuai untuk projek yang memerlukan pusingan dalam talian atau papan pendahulu bersama dari hari pertama.
Mainkan satu padang penuh dalam demo di telefon, kemudian baca bahagian manual tentang menambah lubang. Jika bahagian itu nampak seperti kerja satu petang, selebihnya permainan sudah siap dibina.