Closures & Callstacks: JavaScript Oyunlarıyla Derinlemesine Öğrenme

JavaScript dünyasında karmaşık görünen ancak gücünü bir kez anladığınızda vazgeçilmeziniz olacak iki temel kavramla tanışmaya hazır mısınız? Closures ve Call Stack! Bu makale, JavaScript’in bu kritik bileşenlerini interaktif bir oyun geliştirme senaryosu üzerinden adım adım öğreterek, teorik bilgiyi pratiğe dönüştürmenize yardımcı olacak. Hem deneyimli geliştiriciler hem de yeni başlayanlar için kapsamlı bir rehber sunuyoruz.

JavaScript kodu yazarken, çoğu zaman fonksiyonların kendi içlerinde tanımlanmış değişkenlere eriştiğini görürüz. Peki, bu fonksiyonlar tanımlandıkları ortamdan ayrıldıktan sonra bile o ortamdaki değişkenlere nasıl erişmeye devam edebilir? İşte tam da bu noktada Closures (kapanımlar) devreye girer. Basitçe ifade etmek gerekirse, bir closure, bir iç fonksiyonun, dış fonksiyonunun kapsam zincirine (scope chain) erişimini koruyarak oluşturduğu bir yapıdır. Bu, dış fonksiyonun çalışması bitse ve call stack’ten çıkarılsa bile iç fonksiyonun dış ortamdaki değişkenleri hatırlayabilmesini sağlar.

Bu konuyu daha iyi anlamak için JavaScript’in kodu nasıl yürüttüğünü gösteren bir diğer temel kavram olan Call Stack’i (çağrı yığını) incelemek önemlidir. Call Stack, JavaScript motorunun fonksiyon çağrılarını takip ettiği bir veri yapısıdır. Bir fonksiyon çağrıldığında, bu çağrı stack’in en üstüne eklenir (push). Fonksiyon işini bitirdiğinde ise stack’ten çıkarılır (pop). Bu mekanizma, fonksiyonların doğru sırada yürütülmesini ve hangi fonksiyonun hangi ortamda çalıştığının izlenmesini sağlar. Her fonksiyon çağrısı, kendi yürütme bağlamını (execution context) oluşturur ve bu bağlam, fonksiyonun değişkenlerini, argümanlarını ve dış kapsamına olan referanslarını içerir. Bir closure, dış fonksiyonunun yürütme bağlamını “kapatarak” (closure) bu bağlamı bellekte tutar ve iç fonksiyonun erişebilmesini sağlar. Bu, JavaScript’in dinamik ve esnek doğasının önemli bir parçasıdır.

Örneğin, bir sayaç fonksiyonu düşündüğümüzde, bu sayaç her çağrıldığında değerini bir artırır ve bu değeri korur. Eğer closure olmasaydı, her çağrıda sayaç sıfırlanır veya genel bir değişkene bağımlı olurdu ki bu da kodun okunabilirliğini ve güvenliğini azaltırdı. Closures, özel veriler oluşturmanın ve bunları yalnızca belirli fonksiyonlar aracılığıyla değiştirmeye izin vermenin mükemmel bir yoludur. Bu, özellikle veri gizliliğini (encapsulation) sağlamak ve modüler kod yazmak istediğimizde hayati öneme sahiptir. JavaScript’teki hemen hemen her modern uygulama veya kütüphane, closures’lardan yoğun bir şekilde faydalanır. Event listener’lar, modül desenleri ve hatta React’teki state yönetim mekanizmaları bile altında closure prensiplerini barındırır. Bu derinlemesine anlayış, daha temiz, daha sürdürülebilir ve daha güçlü JavaScript kodu yazmanızı sağlayacaktır.

function disFonksiyon(disDegisken) {
    let icDegisken = 'Merhaba';

    function icFonksiyon() {
        // icFonksiyon, disFonksiyon'un disDegisken ve icDegisken'ine erişir.
        console.log(icDegisken + ' ' + disDegisken);
    }

    return icFonksiyon;
}

const benimKapanim = disFonksiyon('Dünya!');
benimKapanim(); // Çıktı: Merhaba Dünya!
// disFonksiyon artık çağrı yığınında olmasa bile, benimKapanim hala 'Merhaba' ve 'Dünya!' değişkenlerini hatırlıyor.
    

Bir Oyuncunun Puanını Korumak İçin Closures Nasıl Kullanılır?

Şimdi closures kavramını gerçek bir oyun senaryosu üzerinden somutlaştıralım. Basit bir oyun geliştirdiğimizi hayal edin: bir oyuncunun puan topladığı ve bu puanın oyun boyunca güvenli bir şekilde saklanması gerektiği bir oyun. Geleneksel yaklaşımla, puanı global bir değişkende tutmak cazip gelebilir, ancak bu durum puanın istenmeyen yerlerden değiştirilmesi riskini taşır. İşte burada closure'lar devreye girerek veri gizliliğini ve kontrolünü sağlamamıza yardımcı olur. Oyuncunun puanını yönetmek için bir "oyuncu fabrikası" fonksiyonu oluşturalım. Bu fonksiyon, her oyuncu için benzersiz bir puan yöneticisi dönecek ve bu sayede her oyuncunun puanı kendi içinde izole edilmiş olacak.

function oyuncuPuanYoneticisi(baslangicPuani = 0) {
    let puan = baslangicPuani; // Bu 'puan' değişkeni closure tarafından korunur.

    return {
        puanAl: function() {
            return puan;
        },
        puanEkle: function(miktar) {
            puan += miktar;
            console.log(Yeni puan: ${puan});
        },
        puanSifirla: function() {
            puan = baslangicPuani;
            console.log(Puan sıfırlandı. Yeni puan: ${puan});
        }
    };
}

// Oyuncu 1 için puan yöneticisi oluşturma
const oyuncu1 = oyuncuPuanYoneticisi(100);
oyuncu1.puanEkle(50); // Yeni puan: 150
console.log(Oyuncu 1 güncel puan: ${oyuncu1.puanAl()}); // Çıktı: Oyuncu 1 güncel puan: 150

// Oyuncu 2 için ayrı bir puan yöneticisi oluşturma
const oyuncu2 = oyuncuPuanYoneticisi(200);
oyuncu2.puanEkle(75); // Yeni puan: 275
console.log(Oyuncu 2 güncel puan: ${oyuncu2.puanAl()}); // Çıktı: Oyuncu 2 güncel puan: 275

oyuncu1.puanSifirla(); // Puan sıfırlandı. Yeni puan: 100
console.log(Oyuncu 1 sıfırlama sonrası puan: ${oyuncu1.puanAl()}); // Çıktı: Oyuncu 1 sıfırlama sonrası puan: 100
    

Yukarıdaki örnekte, oyuncuPuanYoneticisi fonksiyonu çağrıldığında, kendi puan değişkenini oluşturur. Bu fonksiyon, bir nesne döndürür ve bu nesnenin içindeki metotlar (puanAl, puanEkle, puanSifirla) dış fonksiyonun puan değişkenine erişimini sağlar. Her metot, oyuncuPuanYoneticisi'nin ortamına "kapanmıştır" ve bu sayede puan değişkeni dışarıdan doğrudan erişilemez, yalnızca bu metotlar aracılığıyla manipüle edilebilir. Bu, veriyi izole ederek oyunun bütünlüğünü korur ve potansiyel hataları azaltır. Her oyuncuPuanYoneticisi çağrısı, kendi bağımsız puan değişkenine sahip yeni bir closure ortamı yaratır, bu da birden fazla oyuncuyu veya nesneyi yönetirken oldukça kullanışlıdır. Bu yapı, JavaScript'te modül tasarım desenlerinin temelini oluşturur ve genellikle kütüphanelerde veya daha büyük uygulamalarda veri gizliliği için kullanılır. Ayrıca, oyununuzda farklı puan türleri veya skor tabloları gibi daha karmaşık senaryoları yönetmek için bu yaklaşımı genişletebilirsiniz. Bu sayede, her bir puan türü kendi bağımsız mantığına ve verisine sahip olurken, genel oyun state'ini etkilemez.

Oyun Mekaniklerini Geliştirmek İçin İleri Closure Teknikleri Nelerdir?

Closures, sadece puan yönetimi gibi basit senaryolarla sınırlı değildir. Oyun geliştirme sürecinde daha karmaşık mekanikleri, örneğin bir envanter sistemi, düşman yapay zekası (AI) veya seviye yönetimi gibi durumları ele almak için güçlü bir araç seti sunar. Bu ileri teknikler, oyununuzu daha modüler, esnek ve hataya dayanıklı hale getirmenize yardımcı olur. Şimdi bu senaryolara odaklanalım ve closures'ın nasıl daha karmaşık durumları yönetmek için kullanılabileceğini görelim.

Envanter Yönetimi İçin Closure Kullanımı

Bir oyunun envanter sistemi, oyuncunun topladığı eşyaları düzenli bir şekilde saklamasını ve gerektiğinde kullanmasını sağlar. Her oyuncunun kendine özel, başkaları tarafından karıştırılamayan bir envanteri olmalıdır. Bu gereksinimi closures ile kolayca karşılayabiliriz. Bir envanter modülü oluşturarak, içindeki eşya listesini closure ile gizleyebilir ve sadece ekleme, çıkarma veya gösterme gibi belirli metotlarla erişim sağlayabiliriz.

function envanterYoneticisi() {
    let esyalar = []; // Bu, closure ile korunan özel envanter listesidir.

    return {
        esyaEkle: function(esyaAdi) {
            esyalar.push(esyaAdi);
            console.log(${esyaAdi} envantere eklendi.);
        },
        esyaCikar: function(esyaAdi) {
            const index = esyalar.indexOf(esyaAdi);
            if (index > -1) {
                esyalar.splice(index, 1);
                console.log(${esyaAdi} envanterden çıkarıldı.);
            } else {
                console.log(${esyaAdi} envanterde bulunamadı.);
            }
        },
        envanteriGoster: function() {
            console.log('Envanter:', esyalar.join(', '));
        },
        esyaSayisi: function() {
            return esyalar.length;
        }
    };
}

const oyuncuEnvanteri = envanterYoneticisi();
oyuncuEnvanteri.esyaEkle('Kılıç');
oyuncuEnvanteri.esyaEkle('Kalkan');
oyuncuEnvanteri.envanteriGoster(); // Çıktı: Envanter: Kılıç, Kalkan
oyuncuEnvanteri.esyaCikar('Kılıç');
oyuncuEnvanteri.envanteriGoster(); // Çıktı: Envanter: Kalkan
console.log(Envanterde ${oyuncuEnvanteri.esyaSayisi()} eşya var.); // Çıktı: Envanterde 1 eşya var.
    

Bu örnekte, esyalar dizisi yalnızca envanterYoneticisi'nin döndürdüğü nesne içindeki metotlar aracılığıyla manipüle edilebilir. Bu, envanterin tutarlılığını sağlar ve dışarıdan yanlışlıkla değiştirilmesini önler. Aynı prensibi, düşman davranışlarını veya seviye özelliklerini yönetmek için de kullanabiliriz. Örneğin, bir düşmanın sağlık durumu veya saldırı gücü gibi özellikleri, düşman fabrikası fonksiyonu içinde closure ile izole edilebilir.

Düşman AI'ı İçin Closure Uygulaması

Bir düşmanın davranışlarını ve durumunu yöneten bir closure, farklı düşman türleri için özelleştirilmiş AI'lar oluşturmanıza olanak tanır. Her düşman örneği, kendi sağlık, konum ve hedefleme mantığına sahip olabilir.

function dusmanYapilandirici(tip, baslangicCan) {
    let can = baslangicCan;
    let konum = { x: 0, y: 0 };
    const dusmanTipi = tip;

    function saldir() {
        console.log(${dusmanTipi} saldırıyor!);
        // Saldırı mantığı buraya eklenebilir.
    }

    function hareketEt(yeniKonumX, yeniKonumY) {
        konum.x = yeniKonumX;
        konum.y = yeniKonumY;
        console.log(${dusmanTipi} yeni konuma hareket etti: (${konum.x}, ${konum.y}));
    }

    return {
        darbeAl: function(hasar) {
            can -= hasar;
            console.log(${dusmanTipi} darbe aldı. Kalan Can: ${can});
            if (can <= 0) {
                console.log(${dusmanTipi} yenildi!);
            }
        },
        davranisGerceklestir: function() {
            // Düşman tipine göre farklı davranışlar eklenebilir.
            if (can > 0) {
                if (Math.random() > 0.5) {
                    saldir();
                } else {
                    hareketEt(Math.floor(Math.random() * 10), Math.floor(Math.random() * 10));
                }
            }
        },
        durumAl: function() {
            return { tip: dusmanTipi, can: can, konum: { ...konum } };
        }
    };
}

const goblin = dusmanYapilandirici('Goblin', 50);
const ork = dusmanYapilandirici('Ork', 100);

goblin.davranisGerceklestir(); // Goblin saldırıyor! veya Goblin yeni konuma hareket etti.
ork.darbeAl(20); // Ork darbe aldı. Kalan Can: 80
console.log(ork.durumAl()); // Çıktı: { tip: 'Ork', can: 80, konum: { x: 0, y: 0 } }
    

Bu dusmanYapilandirici fonksiyonu, her çağrıldığında o düşmana özel bir closure oluşturur. Bu closure, düşmanın can, konum ve tip gibi özelliklerini içerir ve bu özelliklere yalnızca döndürülen nesnenin metotları aracılığıyla erişilebilir. Bu, oyununuzdaki her düşmanın bağımsız bir yaşam döngüsüne ve davranış setine sahip olmasını sağlar. İleri düzeyde, bu yapıya daha karmaşık durum makineleri veya hedefleme algoritmaları ekleyerek çok daha sofistike düşman AI'ları oluşturabilirsiniz. Closures, bu tür modüler ve esnek oyun mekaniklerini tasarlarken size büyük bir avantaj sağlar. Geliştirdiğiniz kod, hem daha okunabilir hem de yönetilmesi daha kolay hale gelir.

Bellek Yönetimi ve Performans: Closure'lar JavaScript Uygulamalarını Nasıl Etkiler?

Closures, JavaScript geliştirmede güçlü bir araç olsa da, bellek yönetimi ve performans üzerindeki etkilerini anlamak hayati öneme sahiptir. Özellikle oyunlar gibi performansın kritik olduğu uygulamalarda, closures'ların nasıl çalıştığını bilmek, gereksiz bellek tüketimini önlemeye ve uygulamanızın daha verimli çalışmasını sağlamaya yardımcı olur. Bir closure, dış fonksiyonunun kapsam zincirine (scope chain) referans tuttuğu için, dış fonksiyonun tamamlanmasından sonra bile o kapsamdaki değişkenlerin bellekte kalmasına neden olabilir.

JavaScript'te, bir değişkenin artık erişilebilir olmadığı durumlarda JavaScript motorunun çöp toplayıcısı (Garbage Collector - GC) devreye girer ve o değişkenin kapladığı belleği serbest bırakır. Ancak bir closure varsa, iç fonksiyon dış kapsamdaki değişkenlere hala referans tuttuğu sürece, GC bu değişkenleri serbest bırakamaz. Bu durum, yanlış yönetildiğinde bellek sızıntılarına (memory leaks) yol açabilir. Özellikle uzun süreli çalışan fonksiyonlar veya çok sayıda closure oluşturan döngülerde bu durum dikkatle ele alınmalıdır. Örneğin, bir döngü içinde binlerce closure oluşturursanız ve bu closure'lar büyük veri yapılarına referans tutuyorsa, önemli miktarda bellek tüketimine neden olabilirsiniz.

Peki, bu durumla nasıl başa çıkabiliriz? Öncelikle, closure'ları bilinçli ve gerektiği yerde kullanmak önemlidir. Her zaman gereksiz yere closure oluşturmaktan kaçınmalısınız. Bir diğer strateji ise, closure'ın işi bittiğinde dış kapsamdaki referansları null'a atayarak manuel olarak referansları kırmaktır. Bu, GC'nin o belleği daha erken toplamasına yardımcı olabilir. Ancak modern JavaScript motorları ve çöp toplayıcılar oldukça akıllıdır; çoğu zaman doğru kullanımda bu tür manuel müdahalelere gerek kalmaz. Asıl önemli olan, DOM elemanlarına veya büyük veri yapılarına referans tutan closure'lara dikkat etmektir. Bir closure bir DOM elemanına referans tutuyorsa ve o DOM elemanı sayfadan kaldırıldıysa bile, closure var olduğu sürece eleman bellekte kalmaya devam edebilir.

Performans açısından, closure'lar ek bir soyutlama katmanı getirdiği için küçük bir performans maliyeti olabilir. İç fonksiyonun dış kapsam zincirinde arama yapması gerekir. Ancak modern JavaScript motorları bu tür optimizasyonları çok iyi yapar ve çoğu zaman bu maliyet göz ardı edilebilir düzeydedir. Asıl performans düşüşleri, gereksiz bellek tüketimi ve dolayısıyla GC'nin daha sık çalışmak zorunda kalmasından kaynaklanır. Daha az bellek sızıntısı demek, daha az GC döngüsü ve dolayısıyla daha akıcı bir uygulama performansı demektir. Özellikle bir oyunda, her milisaniyenin önemli olduğu durumlarda, bellek ve performans yönetimi kritik bir faktördür.

function buyukVeriIleClosure() {
    let buyukVeri = Array(1000000).fill('some_large_string'); // Büyük bir dizi
    
    return function() {
        console.log(buyukVeri.length); // Bu closure buyukVeri'ye referans tutar
    };
}

let benimIslemim = buyukVeriIleClosure();
// Artık benimIslemim çağrılmasa bile, buyukVeri bellekte tutulur.
// Eğer benimIslemim'i artık kullanmayacaksanız, referansı null'a atamak bellek boşaltılmasına yardımcı olabilir:
// benimIslemim = null;
    

Sonuç olarak, closures güçlüdür ancak dikkatli kullanılmalıdır. Bellek sızıntılarını ve gereksiz performans düşüşlerini önlemek için closure'ların yaşam döngüsünü ve referans tutma mekanizmalarını anlamak, daha sağlam ve verimli JavaScript uygulamaları geliştirmenize olanak tanır. Kodunuzu düzenli olarak profillemek ve bellek kullanımını izlemek, olası sorunları erken tespit etmenize yardımcı olacaktır.

Gerçek Dünya Oyunlarında Closures: Bir Vaka Analizi ve Duyarlı Tasarım İpuçları

Closures'ların gücü ve esnekliği, sadece küçük örneklerle sınırlı değildir; büyük ölçekli ve karmaşık oyun projelerinde de yaygın olarak kullanılır. Gerçek dünya oyunlarında, özellikle tarayıcı tabanlı oyunlarda, closures, modüler yapılandırma, durum yönetimi ve hatta event handling gibi pek çok alanda kilit rol oynar. Bu bölümde, closures'ın gerçek bir oyun projesinde nasıl kullanılabileceğine dair bir vaka analizi sunarken, aynı zamanda mobil cihazlarda oyun deneyimini iyileştirmek için duyarlı tasarım (responsive design) ipuçlarını ve CSS media query örneklerini de ele alacağız.

Oyun Motorlarında Modül Yönetimi ve Durum İzleme

Birçok JavaScript oyun motoru veya kütüphanesi, iç modüllerini ve bileşenlerini yönetmek için closures'dan yararlanır. Örneğin, bir oyunun "sahne yöneticisi" modülü, farklı oyun seviyelerini veya menü ekranlarını yüklemekten ve yönetmekten sorumlu olabilir. Bu modül, kendi iç durumunu (hangi sahnenin aktif olduğu, yüklü kaynaklar vb.) closure aracılığıyla koruyabilir ve dışarıya sadece belirli API'ler (sahneYukle(), aktifSahneAl() gibi) sunarak veri gizliliğini sağlayabilir. Bu, oyunun karmaşıklığı arttıkça kod tabanının yönetilebilirliğini önemli ölçüde artırır.

const SahneYoneticisi = (function() {
    let aktifSahne = null; // Closure ile gizlenmiş dahili durum

    function sahneDegistir(yeniSahne) {
        if (aktifSahne) {
            console.log(${aktifSahne.ad} sahnesi kapatılıyor...);
            aktifSahne.kapat();
        }
        aktifSahne = yeniSahne;
        aktifSahne.yukle();
        console.log(${aktifSahne.ad} sahnesi yüklendi.);
    }

    return {
        yukleOyunSahnesi: function() {
            const oyunSahnesi = {
                ad: 'Oyun Sahnesi',
                yukle: () => console.log('Oyun kaynakları yükleniyor...'),
                kapat: () => console.log('Oyun kaynakları boşaltılıyor...')
            };
            sahneDegistir(oyunSahnesi);
        },
        yukleMenuSahnesi: function() {
            const menuSahnesi = {
                ad: 'Menü Sahnesi',
                yukle: () => console.log('Menü arayüzü oluşturuluyor...'),
                kapat: () => console.log('Menü arayüzü kaldırılıyor...')
            };
            sahneDegistir(menuSahnesi);
        },
        getAktifSahneAdi: function() {
            return aktifSahne ? aktifSahne.ad : 'Yok';
        }
    };
})();

SahneYoneticisi.yukleMenuSahnesi(); // Menü arayüzü oluşturuluyor... Menü Sahnesi yüklendi.
console.log(Aktif sahne: ${SahneYoneticisi.getAktifSahneAdi()}); // Aktif sahne: Menü Sahnesi
SahneYoneticisi.yukleOyunSahnesi(); // Menü Sahnesi kapatılıyor... Oyun kaynakları yükleniyor... Oyun Sahnesi yüklendi.
    

Bu "Immediately Invoked Function Expression" (IIFE) deseni, SahneYoneticisi'nin kendi özel kapsamını oluşturmasını ve aktifSahne gibi değişkenleri dışarıdan erişilemez hale getirmesini sağlar. Dışarıya yalnızca yukleOyunSahnesi, yukleMenuSahnesi ve getAktifSahneAdi gibi public metotlar açılır. Bu, oyunun farklı bölümlerinin birbirinden bağımsız çalışmasını ve modülerliğini sağlar, bu da bakım ve genişletme açısından büyük kolaylık getirir.

Mobil Uyumlu Oyun Tasarımı İçin Duyarlı Yaklaşımlar

Günümüzde oyunların sadece masaüstü bilgisayarlarda değil, tabletler ve akıllı telefonlar gibi mobil cihazlarda da sorunsuz çalışması beklenir. Duyarlı tasarım, oyun arayüzünüzün ve düzeninizin farklı ekran boyutlarına ve yönelimlerine dinamik olarak uyum sağlamasını sağlar. JavaScript closures bu alanda doğrudan bir rol oynamasa da, olay dinleyicilerini (event listeners) yöneterek veya belirli ekran boyutlarına göre davranışları tetikleyerek dolaylı olarak yardımcı olabilir.

Örneğin, bir resize olay dinleyicisi içinde, ekran boyutunu kontrol eden ve oyunun belirli UI öğelerini veya kamera ayarlarını buna göre ayarlayan bir closure kullanabilirsiniz. Ancak duyarlı tasarımın temelini genellikle CSS Media Queries oluşturur. İşte mobil uyumlu bir oyun arayüzü için basit bir CSS media query örneği:

/* Temel stil - Varsayılan (masaüstü veya geniş ekranlar) */
.oyun-kontrolleri {
    width: 200px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 15px;
    border-radius: 8px;
}

.oyun-ana-ekran {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #1a1a1a;
}

/* Küçük ekranlar (örn. mobil cihazlar) için stiller */
@media (max-width: 768px) {
    .oyun-kontrolleri {
        width: 90%; /* Daha geniş kontrol alanı */
        position: fixed; /* Ekranın altında sabit kalsın */
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #222;
        padding: 10px;
        border-radius: 0;
        display: flex; /* Kontrol düğmelerini yatay hizala */
        justify-content: space-around;
        align-items: center;
    }

    .oyun-kontrol-dugmesi {
        font-size: 1.2em; /* Daha büyük düğme yazıları */
        padding: 10px 15px;
    }

    .oyun-ana-ekran {
        /* Mobil cihazlarda bazı arayüz öğelerini küçült veya gizle */
        font-size: 0.9em;
    }
}

/* Yüksek çözünürlüklü (retina) ekranlar için */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    /* Retina ekranlar için daha yüksek çözünürlüklü görseller kullanın */
    .oyuncu-sprite {
        background-image: url('oyuncu-sprite@2x.png');
        background-size: contain; /* Görseli boyutlandırma */
    }
}
    

Bu CSS kuralları, tarayıcı penceresi belirli bir genişliğin altına düştüğünde (max-width: 768px gibi), oyun kontrollerinin ve ana ekranın nasıl yeniden düzenleneceğini tanımlar. Örneğin, mobil cihazlarda kontrol düğmeleri ekranın alt kısmına yayılabilir ve daha büyük dokunma alanlarına sahip olabilir. JavaScript tarafında, window.matchMedia API'ını kullanarak bu medya sorgularını JavaScript içinde de dinleyebilir ve örneğin mobil cihazlarda farklı bir dokunmatik kontrol şeması etkinleştirebilirsiniz.

// JavaScript ile medya sorgularını dinleme örneği (mobil cihazlarda farklı kontrol)
(function() {
    const mobileQuery = window.matchMedia('(max-width: 768px)');

    function handleMobileChange(e) {
        if (e.matches) {
            console.log('Mobil cihaz algılandı, dokunmatik kontroller etkinleştiriliyor.');
            // Mobil cihazlara özgü kontrol şemasını etkinleştir
            // touchKontrolleriYukle();
        } else {
            console.log('Masaüstü/tablet algılandı, klavye kontrolleri etkinleştiriliyor.');
            // Klavye kontrollerini etkinleştir
            // klavyeKontrolleriYukle();
        }
    }

    // İlk yüklemede kontrol et
    handleMobileChange(mobileQuery);

    // Değişiklikleri dinle (closure sayesinde handleMobileChange, mobileQuery'ye erişebilir)
    mobileQuery.addEventListener('change', handleMobileChange);
})();
    

Bu JavaScript kodu, ekran boyutu değişimini dinlemek için bir closure kullanır ve mobil uyumluluğu dinamik olarak yönetir. Bu tür entegre yaklaşımlar, modern web oyunlarının farklı cihazlarda yüksek kaliteli bir kullanıcı deneyimi sunmasını sağlar. Closures, bu karmaşık etkileşimlerin ve durum yönetiminin ardındaki temel mekanizmalardan biri olarak önemini korur.

Sıkça Sorulan Sorular ve Önemli Çıkarımlar Nelerdir?

Bu makale boyunca JavaScript'in iki güçlü ve temel kavramı olan closures ve call stack'i, interaktif bir oyun geliştirme perspektifinden inceledik. Gördük ki, closures sadece teorik bir kavram olmakla kalmıyor, aynı zamanda oyun puanı yönetimi, envanter sistemleri, düşman yapay zekası ve modüler mimariler gibi gerçek dünya senaryolarında da kritik bir rol oynuyor. Call stack'in ise fonksiyon yürütme akışını nasıl yönettiğini ve her fonksiyonun kendi yürütme bağlamını nasıl oluşturduğunu anlamak, closures'ın neden ve nasıl çalıştığının temelini oluşturuyor.

Closures, veri gizliliğini (encapsulation) sağlayarak kodunuzu daha güvenli ve yönetilebilir hale getirir. Dışarıdan doğrudan erişilemeyen özel değişkenler oluşturmanıza olanak tanıyarak, istenmeyen yan etkileri ve hataları minimize eder. Ancak, bellek yönetimi ve performans üzerindeki potansiyel etkilerini de göz ardı etmemek gerekir. Gereksiz closure kullanımları veya büyük veri referansları, bellek sızıntılarına yol açabilir, bu nedenle dikkatli ve bilinçli kullanım esastır. Mobil uyumlu oyun geliştirmede ise, closures'ın doğrudan etkisi olmasa da, olay dinleyicileri aracılığıyla duyarlı davranışları tetiklemekte veya modüler yapılandırmalar için kullanıldığı görülmektedir. CSS media query'leri gibi duyarlı tasarım teknikleriyle birleştiğinde, her cihazda sorunsuz bir oyun deneyimi sunmanın anahtarını oluştururlar.

Önemli çıkarımımız şudur: Closures ve Call Stack, JavaScript'in nasıl çalıştığını derinlemesine anlamak için vazgeçilmezdir. Bu kavramlara hakim olmak, sadece daha iyi kod yazmanızı sağlamakla kalmayacak, aynı zamanda başkalarının kodunu daha kolay anlamanıza ve modern JavaScript kütüphaneleri ile framework'lerini daha etkin kullanmanıza yardımcı olacaktır. Bu güçlü araçları doğru ve bilinçli bir şekilde kullanarak, hem basit hem de karmaşık oyunları başarıyla geliştirebilirsiniz.

Sıkça Sorulan Sorular

• S: Closure'lar ne zaman ve nerede oluşur?

  C: Closure'lar, bir iç fonksiyonun, dış fonksiyonunun kapsamındaki değişkenlere referans tuttuğu her durumda oluşur. Dış fonksiyonun çalışması bitse ve çağrı yığınından çıkarılsa bile, iç fonksiyon döndürüldüğünde veya başka bir yere taşındığında bu referanslar korunur. Örneğin, bir fonksiyonun içindeki bir diğer fonksiyonu döndürdüğünüzde bir closure oluşturmuş olursunuz.

• S: Call Stack dolarsa ne olur?

  C: Call Stack, genellikle özyinelemeli (recursive) fonksiyonların sonsuz döngüye girmesi gibi durumlarda dolabilir. Bu, "Maximum call stack size exceeded" hatasına yol açar. Bu durumda JavaScript motoru daha fazla fonksiyon çağrısını işleyemez ve uygulamanız çöker. Bu nedenle, özyinelemeli fonksiyonlar yazarken dikkatli olunmalı ve bir çıkış koşulu (base case) tanımlandığından emin olunmalıdır.

• S: Closure'lar bellek sızıntılarına neden olabilir mi?

  C: Evet, yanlış kullanıldığında closure'lar bellek sızıntılarına neden olabilir. Özellikle bir closure, artık ihtiyaç duyulmayan ancak büyük veri yapılarına veya DOM elemanlarına referans tutmaya devam ederse, JavaScript'in çöp toplayıcısı bu belleği serbest bırakamaz. Bu durumu önlemek için, closure'lar tarafından tutulan referansları işiniz bittiğinde manuel olarak null'a atamak veya referans döngülerini kırmak faydalı olabilir.

• S: Closure'lar performansı olumsuz etkiler mi?

  C: Teorik olarak, closure'lar, iç fonksiyonun dış kapsam zincirinde değişken aramasını gerektirdiği için hafif bir performans maliyetine sahip olabilir. Ancak modern JavaScript motorları bu tür optimizasyonları çok iyi yapar ve çoğu durumda bu maliyet göz ardı edilebilir düzeydedir. Asıl performans endişesi, bellek sızıntılarından kaynaklanan gereksiz çöp toplama döngüleridir, bu da uygulamanın genel yanıt verme süresini düşürebilir.

• S: IIFE (Immediately Invoked Function Expression) ile closure'lar arasındaki ilişki nedir?

  C: IIFE'ler, kendi özel kapsamlarını oluşturmak ve bu kapsam içindeki değişkenleri dışarıdan erişilemez hale getirmek için sıkça kullanılır. Bir IIFE içinde tanımlanan herhangi bir fonksiyon, IIFE'nin kapsamına bir closure oluşturabilir ve o kapsamdaki değişkenlere erişebilir. Bu, modül deseni oluşturmak ve global kapsamı kirletmeden özel durumları yönetmek için yaygın bir yaklaşımdır.