Mini golf oyun kaynak kodu: delikler, fizik ve 3D parkur haritası

Bir mini golf oyun kaynak kodunun değeri tek bir işte ortaya çıkar: yeni delik eklemek. Markalı bir parkur, sezonluk bir bölüm ya da yeşil alanda müşterisinin logosunu isteyen alıcı önce bölüm dosyalarını açar; delik motor kodunun içine gömülüyse proje orada tıkanır. 3D mini golf şablonumuz Puttide'da her parkurun düz JavaScript ile yazılmış kendi delik dosyası var ve kılavuz yeni bir deliğin nasıl ekleneceğini adım adım anlatıyor.

Bu rehber paketi bir geliştiricinin karşılaştığı sırayla ele alıyor: klasörler, kütüphaneler, parkur dosyaları, değişikliklerin sırası, barındırma ve lisans. Dosya adları oyunla birlikte gelen alıcı kılavuzundan alındı.

Acelesi olanlar için kısa cevap: Puttide, çizim için Three.js ve top fiziği için Rapier kullanan, okunaklı biçimlendirilmiş JavaScript'tir; iki kütüphane de pakete dahildir. Derleme adımı, CDN ya da sunucu kodu yok.

Mini golf oyun kaynak kodunda neler var

Puttide, beş ada parkurunda 30 deliği olan bitmiş bir oyun: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden ve Volcano Forge, her birinde altı delik. Rampalar, portallar, tamponlar ve yel değirmenleri delikleri küçük bulmacalara çeviriyor. Her delik üç yıldız veriyor (bitirmek, par veya daha iyisi, gizli jeton); bronz, gümüş ve altın madalyalar da en iyi turları ödüllendiriyor.

Parkurların yanında farklı bir kuralı olan günlük meydan okuma (rüzgârlı, buzlu yeşil, ağır top, zıplayan duvarlar, jeton avı ya da birdie avı), jetonlarla top, iz ve başka kozmetiklerin alındığı bir Locker ve tek cihazda sırayla oynayan iki ila dört kişilik turlar var. Arayüz 14 dilde sunuluyor.

• game/: yüklemeye hazır derleme; yayına aldığınız tek klasör.
• source/: aynı oyunun geliştirici sürümü, README ve package.json ile.
• documentation/: İngilizce ve Portekizce, görselli tek bir kılavuz.
• THIRD-PARTY-LICENSES/: kütüphanelerin ve yazı tiplerinin lisans metinleri.
• Sürüm 1.1.0, 22 Ekim 2026'da güncellendi.

Puttide sayfasını açın: demo, kılavuz ve fiyat

Three.js, Rapier ve teknolojinin geri kalanı

Top, WebAssembly olarak çalışan Rapier 3D 0.21.0 ile simüle ediliyor, sahne ise Three.js r186 ile çiziliyor. İkisi de lisans dosyalarıyla birlikte lib/three/ ve lib/rapier/ içinde duruyor; index.html'deki import map oyunu bu klasörlere yönlendiriyor. Kılavuz, kütüphane dosyalarının davranışının değişmediğini, yalnızca okunabilsin diye biçimlendirildiğini belirtiyor.

Bunun iki önemli sonucu var. Birincisi, hiçbir şey CDN'den yüklenmiyor; sıkı güvenlik politikası olan bir portal ya da müşteri için sizin sunucunuz yeterli. İkincisi, kütüphane güncellemek bilinçli ve elle yapılan bir iş: source/package.json tam sürümleri listeliyor; yeni modül dosyalarını ilgili lib/ klasörünün üzerine kopyalıyor ve import map yollarını koruyorsunuz.

• Three.js r186: MIT lisansı.
• Rapier 3D compat 0.21.0, gömülü WebAssembly: Apache-2.0 lisansı.
• Rubik ve Fredoka web yazı tipleri: SIL Open Font License 1.1.
• İki müzik parçası: music/menu.mp3 ve music/play-1.mp3.

Delikler, jetonlar ve metinler nerede duruyor

Yollar source/ ve game/ içinde aynı. Parkur verisi adalara göre bölünmüş; böylece her dosya bir oturuşta okunacak kadar kısa kalıyor.

• src/course/courses.js: parkur sırası ve kilit açma koşulları.
• src/course/holes.js: Sunlit Ruins delikleri; geometri, par ve engellerle.
• src/course/pier.js, ice.js, lava.js ve sky.js: diğer dört parkurun delikleri.
• src/sim/constants.js: fizik ayarları.
• src/game/economy.js: toplar, izler ve kıyafetler, fiyatlarıyla birlikte.
• src/ui/i18n.js ve ona eşlik eden dosyalar: delik adları ve ipuçları dahil 14 dil sözlüğü.
• src/game/localRecords.js: tarayıcıda tutulan parkur rekorları.
• src/audio/audio.js: efektler ve probeTracks içindeki müzik eşlemesi.
• css/style.css: arayüz renkleri, yazı tipleri ve duyarlı stiller.

Adım adım yeni delik eklemek

Alıcıların çoğunun yaptığı değişiklik bu ve kılavuz bunu birkaç satırda anlatıyor. Biz kendi izleyeceğimiz sırayla biraz genişlettik.

1. Yeni deliğin ait olacağı parkur dosyasını seçin; örneğin Volcano Forge için lava.js.
2. İstediğinize en yakın görünen mevcut bir delik tanımını kopyalayın.
3. Ona benzersiz bir id verin. Aynı id'yi tekrar kullanmak kayıtlı ilerlemeyi karıştırır.
4. Par değerini, başlangıç (tee) ve delik (cup) konumlarını ayarlayın, ardından engelleri taşıyın ya da değiştirin.
5. Deliği courses.js içinde ait olduğu parkura ekleyin.
6. Görünen adını ve ipucunu, yayınlayacağınız her dilin sözlüğüne ekleyin.
7. Oynayın: çarpışmaları, saha dışından geri dönüşü ve gizli jeton dahil üç yıldızın hepsini test edin.

source/ içinde düzenleyin, değişen dosyaları game/ içinde aynı yollara kopyalayın ve test etmek için klasörü HTTP üzerinden sunun. package.json'da bir serve betiği var; isterseniz python -m http.server 8765 de çalıştırabilirsiniz. Node.js isteğe bağlı; yalnızca kütüphane sürümlerini npm ile yönetmek istiyorsanız gerekir.

Diğer değişiklikler, mantıklı bir sırayla

1. Marka ve renkler: css/style.css içinde logo, renkler ve yazı tipleri. Beyaz etiket serbest; markanız bizimkinin yerini alabilir.
2. Locker fiyatları: economy.js. Ucuz kozmetikler gündelik bir siteyi daha samimi yapar; pahalı olanlar uzun bir kampanyayı uzatır.
3. Metinler: i18n dosyalarındaki ifadeler ve ipuçları.
4. Müzik: gelen iki parçayı lisansına sahip olduğunuz kayıtlarla değiştirebilirsiniz. Dosyayı kopyalayın ve audio.js içindeki açık eşlemeyi (probeTracks) güncelleyin; sahne müziği bulunamazsa oyun parçasına döner.
5. Fizik: constants.js, en sonda ve küçük adımlarla, çünkü her delik mevcut değerlere göre ayarlandı.

Aynı düz JavaScript yaklaşımıyla, hiç 3D kütüphanesi kullanmayan benzer bir proje arıyorsanız bilardo şablonumuz da aynı şekilde kurulu.

Velvet Pool: düz JavaScript ve WebGL2 ile 8 top bilardo

Sunset Rally: dokuz maçlık kampanyalı 3D masa tenisi

Barındırma, MIME türleri ve uygulama sarmalayıcıları

game/ içindeki her şeyi public_html/puttide/ gibi bir klasöre yükleyin, alt klasörleri koruyun ve adresi HTTPS ile açın. Sunucuda npm, PHP, veritabanı ya da hesap gerekmez. index.html'i diskten açmak çalışmaz, çünkü tarayıcılar file:// üzerindeki modülleri engeller.

Puttide'ın 2D bir oyunda olmayan bir barındırma ayrıntısı var: fizik WebAssembly olarak çalışıyor. Sunucunuz .js dosyalarını JavaScript MIME türüyle, .wasm dosyalarını da application/wasm olarak göndermeli. Bunu yanlış yapan bir sunucu boş ekran ya da modül hatası gösterir; ilk gün kontrol edin.

• Tarayıcı gereksinimleri: JavaScript, ES modülleri, WebAssembly ve WebGL2.
• Bir portal iframe'inde tam ekrana ve otomatik oynatmaya izin verin.
• Dokunmatik ekranlarda: nişan almak ve vurmak için sürükleyin, kamerayı döndürmek için iki parmak, yakınlaştırmak için kıstırma.
• Yüklenebilir bir çevrimdışı uygulama değil: her yeni yükleme yine sizin sunucunuza bağlanır.

Paket yerel uygulama projeleri içermiyor. Mağaza yayını planlıyorsanız sarmalayıcı ve gerçek telefonlarda testi için bütçe ayırın; 3D fizikli bir oyun eski cihazlarda bir kart oyunundan daha ağırdır.

Dahil olmayanlar ve lisans

Bu, yerel tarayıcı sürümü: çevrimiçi çok oyunculu mod ya da çevrimiçi oda, çevrimiçi skor tablosu, bulut hesabı, reklam SDK'sı, yerel uygulama ve barındırma yok. Parkur rekorları, günlük ilerleme ve aynı cihazdaki turlar oyuncunun tarayıcısında kalır ve hiçbir skor sunucuya gönderilmez. Kayıtlar tarayıcı kökenine aittir; başka bir alan adına geçmek oyuncuları sıfırdan başlatır.

Puttide'ın liste fiyatı 39 $; 30 Kasım 2026'ya kadar Black Friday kampanyasıyla 33,15 $ ve aynı siparişte iki veya daha fazla şablon almak %5 ile %20 arası paket indirimi ekliyor. Lisans süresiz ve münhasır değil; size ya da bir müşterinize ait tek bir son ürün için geçerli. Markasını, kodunu, görsellerini ve seslerini değiştirebilir, oyuncuları ücretsiz ya da reklamlı oynatabilirsiniz; ancak şablonu veya kodunu tek başına yeniden satamazsınız. Destek altı ay, uzatmayla on iki ay sürer; özel delikler, entegrasyonlar ve barındırma için talep üzerine fiyat verilir.

Lisans, destek ve iade koşullarının tamamı

Sıkça sorulan sorular

Mini golf kaynak kodu TypeScript ile mi yazılmış?

Hayır. Puttide, source/src ve game/src içinde düz ve biçimlendirilmiş JavaScript; bize ait küçültülmüş ya da paketlenmiş dosya yok.

Kendi deliklerimi veya parkurlarımı ekleyebilir miyim?

Evet. Parkur dosyasında bir deliği kopyalayın, benzersiz bir id verin, par, tee ve cup değerlerini ayarlayın, courses.js'e ekleyin ve adını ile ipucunu dil dosyalarına yazın.

Three.js bir CDN'den mi yükleniyor?

Hayır. Three.js, Rapier, yazı tipleri ve müzik game/ içinde; oyun yalnızca sizin sunucunuza ihtiyaç duyar.

Sunucum neden boş ekran gösteriyor?

Genellikle sebep MIME türleridir. .js'i JavaScript, .wasm'ı application/wasm olarak sunun, oyunu HTTP(S) ile açın ve WebGL2'nin etkin olduğunu kontrol edin.

Arkadaşlar birlikte oynayabilir mi?

Evet, iki ila dört oyuncu aynı cihazda sırayla oynar. Çevrimiçi oyun bu sürümde yok.

Sizin için doğru mini golf temeli mi?

Puttide; aile ya da spor portallarına, tek bir müşteri için markalı parkur hazırlayan ajanslara ve Three.js ile Rapier'in okunaklı kodda birlikte nasıl çalıştığını görmek isteyen geliştiricilere uyar. İlk günden çevrimiçi tur ya da ortak skor tablosu gereken bir proje için daha zayıf bir seçimdir.

Demoda telefondan bir parkuru baştan sona oynayın, sonra kılavuzun delik ekleme bölümünü okuyun. O bölüm size bir öğleden sonralık iş gibi geliyorsa oyunun geri kalanı zaten hazır.

Puttide demosunu oynayın ve lisansı satın alın