Park Bulmaca Oyun Kaynak Kodu: 30 Bölümlük 3D Trafik Bulmacası
Beep Out paketinde neler var, TypeScript projesi nasıl düzenlenmiş ve alıcılar genelde ilk neyi değiştiriyor.
Park bulmaca oyun kaynak kodu arıyorsanız kısa cevap şu: Beep Out, tarayıcıda çalışan 30 bölümlük, bitmiş bir 3D trafik bulmacası. Yüklemeye hazır derlenmiş sürümü ve arkasındaki düzenlenebilir TypeScript projesiyle birlikte $35. Bu rehberde paketi açıp her parçanın ne işe yaradığını gösteriyoruz.
Park sıkışıklığı oyunları basit görünür; zayıf olanın hemen fark edilmesi de bu yüzdendir. Kurallar ilk bakışta anlaşılmalı, bölüm sırası oyuncuya bir şey öğretmeli, kod da eski bölümleri bozmadan kendi tahtalarınızı eklemenize izin vermeli. Burada bu üç konuya bakıyoruz; yanında barındırma, lisans ve bu sürümde olmayanlar da var.
Park bulmaca oyun kaynak kodu paketinde neler var
Beep Out, Local Browser Edition 1.1.0 sürümü olarak satılıyor. İndirdiğiniz dosya iki kısımdan oluşuyor: bugün yayına alabileceğiniz bir oyun ve değiştirebileceğiniz bir proje.
- 30 bölümün tamamını içeren, yüklemeye hazır game/ klasörü.
- Tarayıcının çalıştırdığını görebilmeniz için okunabilir JavaScript, CSS ve veri dosyaları.
- Oyun varlıkları ve testlerle birlikte TypeScript geliştirici kaynağı.
- Kurulum, dosya haritası, özelleştirme, sorun giderme ve SSS bölümleri olan, İngilizce ve Portekizce resimli kılavuz.
- Bağımlılık ve yazı tipi lisans bildirimleri.
Arayüz 14 dilde geliyor: İngilizce, Portekizce, İspanyolca, Fransızca, Almanca, İtalyanca, Felemenkçe, Lehçe, Türkçe, Rusça, Endonezce, Japonca, Korece ve Basitleştirilmiş Çince. Kılavuz ise yalnızca İngilizce ve Portekizce; geliştiriciniz bu ikisini okumuyorsa bunu hesaba katın.
Beep Out sayfasını açıp demoyu oynayın
Trafik bulmacası nasıl işliyor, kural kural
Her aracın tavanında çıkış yönünü gösteren bir ok var. Önü boş olan bir araca dokunur ya da tıklarsanız yola çıkar. Önü kapalı birini seçerseniz trafiğe takılır; yani bölümü hamlelerin sırası belirler.
4. bölümden itibaren otobüs durağında bir yolcu sırası bekler. Bir araç ancak rengi sıradaki yolcuyla eşleşirse ayrılabilir. Yolu açık ama rengi yanlış bir araba park cebine girer ve yolcusu sıraya geldiğinde kendiliğinden çıkar. Otopark küçüktür; yanlış renkler çoğalınca dolar ve oyuncu birkaç hamle sonrasını düşünmek zorunda kalır. Sıradan bir sıkışıklığı sıralama bulmacasına çeviren de bu ikinci katmandır.
Oyun ekranında ipucu, geri alma ve yeniden başlatma var. Bir bölümü takılan dokunuş, ipucu ya da geri alma olmadan bitirmek Clean Clear (temiz bitiriş) kazandırır; isteğe bağlı olarak her bölümün en iyi süresi tarayıcıda saklanır. Geçilen bölümler Garage'da beş boya stilinin kilidini açar. Boyalar yalnızca görünüm içindir: bütün arabalar aynı şekilde oynar.
Kod nasıl düzenlenmiş
Çalışılacak iki yer var ve bunları ayrı tutmak işinizi kolaylaştırır. game/ klasörü derlenmiş çıktıdır: yüklersiniz, oynanır. Değişiklikler geliştirici projesinde yapılır: bölümler, ayarlar, metinler, logolar ve ses dosyaları. Bir değişiklikten sonra yeniden derler, yayındaki game/ klasörünü yeni çıktının tamamıyla değiştirirsiniz.
Teknoloji yığını TypeScript, Three.js ve WebGL2; derleme Vite ile yapılıyor. Dosyalar arasında HTML, CSS, JavaScript, TypeScript ve JSON var. Yeniden derlemek için Node.js 22.12 veya üstü ile npm gerekir. Oynamak için bunların hiçbiri gerekmez.
Proje dört komutla geliyor ve kılavuz her birini açıklıyor:
- npm run levels, derlemeden önce bölüm dosyalarınızı kontrol eder.
- npm test testleri çalıştırır.
- npm run typecheck, TypeScript'teki tür hatalarını yakalar.
- npm run build yeni game klasörünü oluşturur.
Bölüm denetleyicisi göründüğünden daha önemli. Park bulmacaları sessizce bozulur: çözülemeyen bir tahta, eşleşen arabası olmayan bir yolcu. Her derlemeden önce kontrolü çalıştırmak, sorunu oyunculardan duymaktan çok daha ucuzdur.
Hazır park bulmaca oyun şablonunda ilk neyi değiştirmeli
Şu dört değişiklikle, bu sırayla başlamanızı öneriyoruz.
1. Ad, logo ve marka
HTML başlığı ve marka ayarları kaynak projede; logo dosyaları public/ içinde, sesler de kendi klasöründe. Dosyaları aynı yolları koruyarak değiştirin, sonra yeniden derleyin. White label serbest: bizim markamızın yerine sizin ya da müşterinizin markası geçer.
2. Bölümler
Bölüm hazırlama dosyaları source/ içinde. Düzenleyin, npm run levels ile doğrulayın, yeniden derleyin ve yükleyin. Kılavuzda dosya haritası olduğu için bir tahtayı bulmak üzere kodu taramanız gerekmez.
3. Arayüz metinleri ve diller
Arayüz metinleri dil dosyalarında duruyor. Kitleniz 14 dilden birini konuşuyorsa her ekranı o dilde bir kez okuyun; marka üslubunuza göre birkaç kelimeyi düzeltmek genelde değer.
4. Oyun ayarları
Oyun ayarları kodun içine dağılmış değil, yapılandırma dosyalarında tutuluyor. Her seferinde tek bir değeri değiştirin ve her değişiklikten sonra birkaç bölüm oynayın.
- Orijinal paketin yedeğini alın.
- Marka dosyalarını yollarını koruyarak değiştirin.
- Bölümleri düzenleyin ya da ekleyin ve npm run levels çalıştırın.
- npm test ve npm run build çalıştırın.
- Yayındaki game/ klasörünü tek tek dosyalarla değil, bütün olarak değiştirin.
- Oyuncularınızın kullandığı telefon ve tarayıcılarda test edin.
Barındırma, sayfaya gömme ve uygulama mağazaları
game/ klasörünün içeriğini herhangi bir statik HTTP(S) sunucusuna yükleyip adresini açın. Oynamak için PHP, veritabanı, hesap ya da Node.js sunucusu gerekmez. Bir alt klasörde veya kendi sayfanızdaki bir iframe içinde çalışır; kılavuzda örnek bir iframe kodu da var. İlerlemenin sayfa yenilenince kaybolmaması gerekiyorsa iframe'e yeterli yükseklik verin ve tarayıcı depolamasını açık tutun.
index.html'i doğrudan diskten açmak desteklenmez; HTTP(S) üzerinden sunulması gerekir. Tarayıcıda JavaScript, ES modülleri ve WebGL2 olmalı. Oyuncular dokunmatik ekranda dokunarak, masaüstünde tıklayarak oynar; Settings'teki Low grafik modu eski telefonlarda pil tasarrufu sağlar.
Pakette yerel (native) uygulama projesi yok. Oyunu bir uygulama mağazasına koymak, bir portal SDK'sına bağlamak ya da sunucunuza kurdurmak istiyorsanız bu ayrı bir hizmettir ve her proje için ayrı fiyat veriyoruz.
Değişiklik, barındırma ya da uygulama sürümü için teklif isteyin
Bu sürümde neler yok
Beep Out tek oyunculu ve verileri yerelde tutuyor. İlerleme, rekorlar ve ayarlar oyuncunun tarayıcısında kalır. Çevrimiçi çok oyunculu mod, çevrimiçi sıralama ya da bulutta rekor yok; reklam SDK'sı ve portal SDK'sı da yok. Yerel uygulamalar, barındırma ve barındırılan hizmetler pakete dahil değil.
Birçok site için doğru yapı da bu: sunucuda bakım gerektiren bir şey yok ve oyuncu verisi tarayıcının dışına çıkmıyor. Skor tablosu ya da reklam istiyorsanız bu işi yayından sonraya değil, öncesine planlayın.
Tek paragrafta lisans, destek ve fiyat
Tek bir satın alma, bu sürümü tek bir son üründe (sizin ya da bir müşterinizin) kullanmak için süresiz ve münhasır olmayan bir lisans verir. Oyuncular oyuna ücretsiz ya da reklamla para kazanılan bir modelle erişebilir. O ürünün içinde kodu, görselleri ve sesleri değiştirebilir, bizim adımızı ve logomuzu kaldırabilirsiniz; ancak şablonu, kaynak kodunu ya da varlıklarını tek başına yeniden satamaz veya paylaşamazsınız. Destek 6 ay sürer, ödeme sırasında uzatma alınırsa 12 ay; dosyaların kurulumu ve kullanımıyla tekrarlanabilen hataların düzeltilmesini kapsar. Liste fiyatı $35; 30 Kasım 2026'ya kadar Black Friday kampanyasıyla bütün şablonlarda %15 indirim var, yani Beep Out $29.75. 1 Aralık'tan itibaren fiyatlar liste fiyatına döner.
Lisans ve destek koşullarının tamamını okuyun
Sıkça sorulan sorular
Sunucuya ya da veritabanına ihtiyacım var mı?
Hayır. game/ klasörünün içeriğini statik bir HTTP(S) sunucusuna yükleyin ve index.html'i o adres üzerinden açın. İlerleme ve rekorlar oyuncunun tarayıcısına kaydedilir.
Kendi park bölümlerimi ekleyebilir miyim?
Evet. source/ içindeki bölüm hazırlama dosyalarını düzenleyin, npm run levels ile doğrulayın, yeniden derleyin ve yayındaki game/ klasörünü yeni çıktıyla değiştirin.
Trafik bulmacası telefonda çalışıyor mu?
Evet. Oyuncular dokunmatik ekranda araçlara dokunur, masaüstünde tıklar. Tarayıcının WebGL2 desteklemesi gerekir; Low grafik ayarı eski cihazlarda yardımcı olur. Yayından önce kendi telefonlarınızda test edin.
Oyunu kendi sayfamın içine koyabilir miyim?
Evet. Herhangi bir klasörde barındırıp bir iframe ile sayfaya gömün. Kılavuzda örnek bir kod parçası var.
Reklam ya da çevrimiçi skor dahil mi?
Hayır. Bu sürümde reklam SDK'sı, çevrimiçi sıralama ya da çok oyunculu mod yok. Bunları eklemek özel bir iş ve her proje için ayrı fiyatlandırılıyor.
Tek lisansı iki müşteri için kullanabilir miyim?
Hayır. Bir lisans bir son ürünü kapsar. İkinci müşteri için ikinci bir lisans gerekir; aynı siparişteki birden fazla şablona paket indirimi uygulanır.
Benzer bulmaca şablonları
Kitleniz trafikten çok renk ayırmayı seviyorsa Mochi Monsters, üç dünyada 60 bölüm ve Endless (sonsuz) modu olan bir renk sıralama bulmacası; liste fiyatı $39. Daha kısa oyun turları istiyorsanız Gridspark, şimşek gibi ZAP hamlesi ve seed tabanlı günlük görevi olan 8×8'lik bir blok bulmacası; liste fiyatı $29. İkisi de okunabilir kaynak kod ve 14 arayüz diliyle geliyor.
Renk sıralama bulmacası Mochi Monsters'a bakın
Blok bulmacası Gridspark'a bakın
Aynı siparişte iki ya da daha fazla şablon alırsanız her lisansın fiyatı düşer: ikide %5, üçte %10, dörtte %15, beş ve üzerinde %20 indirim.