Snake game

Yılan Oyunu: Mimari ve Teknik Yaklaşım

Bu oyun, tek dosyalık ve bağımlılıksız bir Vanilla JS + Canvas 2D modülü olarak tasarlanmıştır. Framework yükü olmaması ilk boyama süresini kısaltır ve Blogger gibi kısıtlı ortamlarda sorunsuz çalışır.

Veri Yapısı ve Algoritma

• Yılan: Baş dizinin ilk elemanıdır. Her adımda unshift ile yeni baş eklenir, yem yenmediyse pop ile kuyruk silinir. Bu, gövdeyi kopyalamadan hareket sağlar.
• Yön kuyruğu (input queue): Aynı tick içinde hızlı iki tuşa basılması ters yöne dönüp kendine çarpma hatasına yol açar. Maksimum 3 elemanlı kuyruk bu hatayı engeller.
• Yem yerleşimi: Yem yalnızca boş hücreler arasından seçilir. Rastgele deneme döngüsü yerine boş hücre listesi kullanıldığından döngü sonsuza gitmez.
• Çarpışma: Yem yenmeyen adımlarda kuyruk hücresi serbest sayılır, böylece kuyruğun bulunduğu hücreye girmek haksız ölüm üretmez.

Performans Kararları

• Sabit zaman adımı: requestAnimationFrame ile zaman biriktirici (accumulator) kullanılır. Oyun hızı ekran yenileme hızından bağımsızdır (60/120/144 Hz).
• DPR uyumu: Canvas boyutu devicePixelRatio ile ölçeklenir ve ResizeObserver ile yeniden boyutlanır. Retina ekranlarda bulanıklık oluşmaz.
• Sekme gizlenince duraklatma: visibilitychange dinlenir, arka planda CPU harcanmaz.

Tasarım ve Renk Mimarisi

Renkler :root altında HSL ile 60-30-10 kuralına göre tanımlıdır: %60 zemin (--bg), %30 yüzey (--surface), %10 vurgu (--accent). HSL'de yalnızca açıklık değeri değiştirilerek karanlık/aydınlık mod üretilir. Canvas renkleri aynı CSS değişkenlerinden okunduğundan tema değişiminde DOM ile canvas aynı paleti paylaşır.

Anti-Pattern Uyarıları

• setInterval ile oyun döngüsü kurmak sekme kısıtlamalarında kare atlamasına yol açar.
• Her karede getComputedStyle çağırmak maliyetlidir. Bu projede 20×20 ölçekte kabul edilebilir; daha büyük sahnelerde renkler önbelleğe alınmalıdır.
• Yön değişimini doğrudan dir değişkenine yazmak yarış durumu (race condition) yaratır.

Alternatif Yaklaşımlar

DOM tabanlı ızgara daha kolay erişilebilirlik sunar ancak yüzlerce düğümde yeniden boyama maliyeti artar. WebGL bu ölçek için gereksiz karmaşıklıktır. Canvas 2D en iyi denge noktasıdır.

Yılan Oyununu Yapay Zekaya Yaptırma Rehberi

İyi bir prompt; rol, görev, teknik kısıtlar ve çıktı biçimini ayrı ayrı tanımlar. Aşağıdaki adımlar, benzer oyunlar için yeniden kullanılabilir.

Adım 1: Temel Prompt

Rol: Kıdemli Full-Stack mimar.
Görev: Canvas tabanlı yılan oyunu yaz.
Kısıtlar: Tek dosya HTML+CSS+JS, bağımlılık yok, 20x20 ızgara,
requestAnimationFrame + sabit zaman adımı, yön kuyruğu.
Çıktı: Eksiksiz kod, yer tutucu yok, Türkçe yorumlar.

Adım 2: Tasarım Parametreleri

:root içinde HSL ile 60-30-10 renk mimarisi (%60 zemin, %30 yüzey, %10 vurgu),
karanlık/aydınlık mod, clamp() tipografi, min 44px dokunma hedefi,
transition: 0.3s ease, 480/768/1024/1280px kırılımları.

Adım 3: Mobil Kontrol

Dokunmatik kaydırma (swipe) ve ekranda D-pad ekle.
touch-action: none kullan, sayfa kaymasını engelle.
Sekme gizlenince oyunu otomatik duraklat.

Adım 4: Genişletme Promptları

• Duvarlardan geçiş (wrap-around) modu ekle ve mod seçici koy.
• Engel hücreleri ve zaman sınırlı bonus yem ekle.
• Kodu ES modüllerine ve sınıf yapısına ayır, birim testleri yaz.

İpuçları

Kısıtları madde madde yazın, "eksik kod bırakma" şartını açıkça belirtin ve çıktıyı bir sonraki promptta iyileştirme isteğiyle birlikte geri verin. Hazır şablonlar için Prompt Sayfası'nı kullanın.