HTML5’da basit bir bulmaca oyunu üzerine düşünceler

[samsuk63]

Merhaba arkadaşlar,

Son zamanlarda HTML5 ile basit bir bulmaca oyunu geliştirmeye başladım. Tarayıcıda direkt çalışıyor, herhangi bir kurulum gerektirmiyor ve hem masaüstü hem de mobil cihazlarda oynanabiliyor.

Oyunun yapısı oldukça sade: küçük bir ızgara üzerinde taşları veya sembolleri eşleştiriyorsunuz. Amaç, görsel sadelikle birlikte akıcı bir deneyim sağlamak. Şu anda performans optimizasyonu ve mobil ekran uyumluluğu üzerinde çalışıyorum.

Asıl zor olan, grafik ve performans arasında dengeyi tutturmak. Fazla efekt ekleyince oyun yavaşlıyor, az ekleyince dağ gibi sıkıcı görünüyor.

HTML5 ile oyun geliştiren veya benzer bulmaca oyunları yapan arkadaşlar varsa, hangi yöntemlerle performansı artırdığınızı ve dokunmatik kontrolleri nasıl optimize ettiğinizi paylaşır mısınız?

 

×

YASAL UYARI VE BİLGİLENDİRME

Türkiye Cumhuriyeti mevzuatı kapsamında define arama faaliyetleri; 2863 sayılı Kültür ve Tabiat Varlıklarını Koruma Kanunu, Define Arama Yönetmeliği ve ilgili diğer mevzuat hükümlerine tabidir.

Define araması yapılabilmesi için ilgili mevzuatta öngörülen şartların yerine getirilmesi ve yetkili makamlardan gerekli izin ve ruhsatların alınması zorunludur. İzinsiz define araştırması ile kültür varlığı bulmak amacıyla gerçekleştirilen izinsiz kazı veya sondaj faaliyetleri kanunen suç teşkil edebilir ve cezai yaptırımlara tabidir.

Sit alanları, korunması gerekli kültür ve tabiat varlıklarının bulunduğu alanlar, mezarlıklar ve mevzuatla koruma altına alınmış diğer bölgelerde gerçekleştirilecek faaliyetlerde ilgili kanun, yönetmelik ve yetkili kamu kurumlarının kararlarına kesinlikle uyulmalıdır.

Bu internet sitesi; izinsiz define aramayı, kaçak kazıyı, tarihi veya kültürel varlıklara zarar verilmesini, kültür varlıklarının izinsiz olarak aranmasını, çıkarılmasını, taşınmasını veya ticaretini teşvik etmez, özendirmez ve bu tür faaliyetlere yönlendirme amacı taşımaz.

Site içerisinde kullanıcılar, üyeler veya üçüncü kişiler tarafından paylaşılan yorum, görüş, fotoğraf, video, arazi yorumu, işaret değerlendirmesi, yöntem, tavsiye ve benzeri içerikler paylaşımı yapan kişinin kendi görüş ve sorumluluğundadır. Bu tür içerikler site yönetiminin görüşü, önerisi, onayı veya herhangi bir faaliyete yönelik teşviki olarak değerlendirilemez.

Kullanıcılar, gerçekleştirecekleri her türlü araştırma ve arazi faaliyetinden önce yürürlükteki mevzuatı kontrol etmek, gerekli izinleri almak ve ilgili kamu kurumlarının talimatlarına uygun hareket etmekle yükümlüdür.

Önemli: Bu bilgilendirme, hukuka aykırı herhangi bir faaliyete izin verildiği veya böyle bir faaliyetin meşru olduğu anlamına gelmez. Yürürlükteki kanun ve yönetmelik hükümleri esas alınmalıdır.

[uçanhollandalı]

Merhaba arkadaşlar,

Son zamanlarda HTML5 ile basit bir bulmaca oyunu geliştirmeye başladım. Tarayıcıda direkt çalışıyor, herhangi bir kurulum gerektirmiyor ve hem masaüstü hem de mobil cihazlarda oynanabiliyor.

Oyunun yapısı oldukça sade: küçük bir ızgara üzerinde taşları veya sembolleri eşleştiriyorsunuz. Amaç, görsel sadelikle birlikte akıcı bir deneyim sağlamak. Şu anda performans optimizasyonu ve mobil ekran uyumluluğu üzerinde çalışıyorum.

Asıl zor olan, grafik ve performans arasında dengeyi tutturmak. Fazla efekt ekleyince oyun yavaşlıyor, az ekleyince dağ gibi sıkıcı görünüyor.

HTML5 ile oyun geliştiren veya benzer bulmaca oyunları yapan arkadaşlar varsa, hangi yöntemlerle performansı artırdığınızı ve dokunmatik kontrolleri nasıl optimize ettiğinizi paylaşır mısınız?

Bence bu konuda sana en detaylı bilgiyi chatgpt verir. Doğru soruları sorarsan işine yarayacak çok iyi cevaplar alabilirsin.
Mesela ben senin adına sordum,gelen cevaplar şöyle;

1. Canvas yerine DOM kullanımı dengesini belirle:
Küçük ölçekli, fazla animasyon içermeyen bulmaca oyunlarında bazen tüm taşları <div> veya <img> ile DOM üzerinde kontrol etmek daha verimli olabiliyor. Ancak sürekli hareket eden çok sayıda eleman varsa tek bir <canvas> içinde çizim yapmak genelde daha performanslıdır.

2. Tekrar çizmeyi azalt:
Her karede tüm sahneyi yeniden çizmek yerine sadece değişen bölgeleri (örneğin taşların yer değiştirdiği alanları) yeniden render etmeye çalış. Bu, CPU ve GPU yükünü ciddi şekilde azaltır.

3. Görselleri önbelleğe al:
Taş veya sembol görsellerini her seferinde yeniden yüklemek yerine, başta sprite sheet (tek bir görsel dosyası içinde birden fazla ikon) kullanarak belleğe al. Bu sayede hem yükleme süresi kısalır hem de çizerken tarayıcı daha az işlem yapar.

4. Dokunmatik kontroller için “pointer events” tercih et:
touchstart, touchmove, touchend yerine modern pointerdown, pointermove, pointerup olaylarını kullanmak hem mobil hem masaüstü cihazlarda tutarlı davranış sağlar. Ayrıca passive: true parametresi ile dokunma gecikmelerini azaltabilirsin.

5. FPS sınırlaması ve requestAnimationFrame:
Oyun döngüsünü setInterval yerine requestAnimationFrame ile kontrol et. Bu, tarayıcının yenileme hızına uyum sağlar ve enerji tasarrufu sağlar. Gereksiz animasyonları durdurmak için document.hidden durumunu da kontrol edebilirsin.

6. CSS efektlerinde dikkatli ol:
Gölge, blur, opacity geçişleri gibi CSS efektleri GPU’ya yük bindirebilir. Basit renk geçişleri ve sprite animasyonları genellikle daha akıcıdır.

7. Ekran boyutuna göre yeniden ölçekleme:
Mobil uyumluluk için ızgara boyutlarını “yüzdelik değerlerle” (vw, vh) tanımlamak ve devicePixelRatio’ya göre canvas ölçeğini dinamik ayarlamak en iyi sonucu verir.

Ekstra öneri:
Oyun loop’una bir FPS sayacı ekleyip optimizasyon öncesi-sonrası performansı ölç. Bazen tek bir render veya event düzenlemesi 2-3 kat fark yaratabiliyor.

 

×

YASAL UYARI VE BİLGİLENDİRME

Türkiye Cumhuriyeti mevzuatı kapsamında define arama faaliyetleri; 2863 sayılı Kültür ve Tabiat Varlıklarını Koruma Kanunu, Define Arama Yönetmeliği ve ilgili diğer mevzuat hükümlerine tabidir.

Define araması yapılabilmesi için ilgili mevzuatta öngörülen şartların yerine getirilmesi ve yetkili makamlardan gerekli izin ve ruhsatların alınması zorunludur. İzinsiz define araştırması ile kültür varlığı bulmak amacıyla gerçekleştirilen izinsiz kazı veya sondaj faaliyetleri kanunen suç teşkil edebilir ve cezai yaptırımlara tabidir.

Sit alanları, korunması gerekli kültür ve tabiat varlıklarının bulunduğu alanlar, mezarlıklar ve mevzuatla koruma altına alınmış diğer bölgelerde gerçekleştirilecek faaliyetlerde ilgili kanun, yönetmelik ve yetkili kamu kurumlarının kararlarına kesinlikle uyulmalıdır.

Bu internet sitesi; izinsiz define aramayı, kaçak kazıyı, tarihi veya kültürel varlıklara zarar verilmesini, kültür varlıklarının izinsiz olarak aranmasını, çıkarılmasını, taşınmasını veya ticaretini teşvik etmez, özendirmez ve bu tür faaliyetlere yönlendirme amacı taşımaz.

Site içerisinde kullanıcılar, üyeler veya üçüncü kişiler tarafından paylaşılan yorum, görüş, fotoğraf, video, arazi yorumu, işaret değerlendirmesi, yöntem, tavsiye ve benzeri içerikler paylaşımı yapan kişinin kendi görüş ve sorumluluğundadır. Bu tür içerikler site yönetiminin görüşü, önerisi, onayı veya herhangi bir faaliyete yönelik teşviki olarak değerlendirilemez.

Kullanıcılar, gerçekleştirecekleri her türlü araştırma ve arazi faaliyetinden önce yürürlükteki mevzuatı kontrol etmek, gerekli izinleri almak ve ilgili kamu kurumlarının talimatlarına uygun hareket etmekle yükümlüdür.

Önemli: Bu bilgilendirme, hukuka aykırı herhangi bir faaliyete izin verildiği veya böyle bir faaliyetin meşru olduğu anlamına gelmez. Yürürlükteki kanun ve yönetmelik hükümleri esas alınmalıdır.