Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) bulunması yeterlidir. JavaScript kodlarını doğrudan tarayıcı konsolunda test edebileceğiniz gibi, projenizi düzenli tutmak için bir klasör yapısı oluşturmanız önerilir.

• HTML: Oyunun iskeletini oluşturmak için.
• CSS: Tasarım ve görsel geri bildirimler için.
• JavaScript: Oyun mantığı ve etkileşim için.

Modern tarayıcılar 2026 yılı itibarıyla ES6+ özelliklerini tam desteklemektedir. Bu nedenle, kod yazarken let, const, arrow functions ve template literals gibi güncel sözdizimlerini kullanacağız.

Adım 1: Oyunun HTML İskeletini Oluşturma

Oyunun arayüzü; kullanıcının kelimeyi tahmin edeceği bir giriş alanı, tahmin butonları ve geri bildirim mesajlarını gösterecek bir alandan oluşmalıdır. Aşağıdaki kod, basit ve erişilebilir bir yapı sunar.

    
Kelime Tahmin Oyunu
    
İpucu: Bir meyve ismi tahmin edin.
    
    Tahmin Et
    

Bu HTML yapısı, JavaScript ile kolayca erişebilmemiz için benzersiz id değerlerine sahiptir. input alanı kullanıcı girdisini alır, button ise etkileşimi tetikler.

Adım 2: JavaScript ile Temel Mantığı Kurma

Oyunun çalışması için öncelikle hedef kelimeyi belirlemeli ve kullanıcının girdiği veriyi bu hedefle karşılaştırmalıyız. Aşağıdaki örnekte, basit bir dizi (array) kullanarak hedef kelime listesini tanımlıyoruz.

const hedefKelimeler = ["elma", "armut", "çilek", "kavun"];
let secilenKelime = hedefKelimeler[Math.floor(Math.random() * hedefKelimeler.length)];

const tahminKutusu = document.getElementById("tahmin-kutusu");
const gonderButonu = document.getElementById("gonder-butonu");
const mesajAlani = document.getElementById("mesaj");

gonderButonu.addEventListener("click", () => {
    const kullaniciTahmini = tahminKutusu.value.toLowerCase();
    if (kullaniciTahmini === secilenKelime) {
        mesajAlani.textContent = "Tebrikler! Doğru tahmin.";
    } else {
        mesajAlani.textContent = "Yanlış tahmin, tekrar dene.";
    }
});

Bu kod bloğu, Math.random() fonksiyonu ile rastgele bir kelime seçer ve addEventListener ile tıklama olayını dinler. toLowerCase() metodu, kullanıcının büyük/küçük harf duyarlılığına takılmaması için girdiyi normalize eder.

Adım 3: Geri Bildirim ve Hata Yönetimi

Kullanıcı deneyimini iyileştirmek için yanlış tahminlerde ipuçları vermek veya kalan hak sayısını göstermek önemlidir. Aşağıdaki kod, bir sayaç mekanizması ekleyerek oyuna rekabet katar.

let kalanHak = 3;

gonderButonu.addEventListener("click", () => {
    const tahmin = tahminKutusu.value.toLowerCase();
    if (tahmin === secilenKelime) {
        mesajAlani.textContent = "Kazandınız!";
    } else {
        kalanHak--;
        if (kalanHak > 0) {
            mesajAlani.textContent = `Yanlış! Kalan hak: ${kalanHak}`;
        } else {
            mesajAlani.textContent = `Oyun bitti! Kelime: ${secilenKelime}`;
            gonderButonu.disabled = true;
        }
    }
});

Bu yaklaşım, kullanıcının sınırlı sayıda deneme yapmasını sağlar. disabled özelliği, oyun bittiğinde butonun tıklanmasını engellemek için kullanılır.

Adım 4: Güvenli Kodlama ve Veri Doğrulama

Tarayıcı tabanlı oyunlarda en büyük risk, kullanıcının konsolu açarak hedef kelimeyi görmesidir. Üretim ortamında bu mantığı sunucu tarafına taşımanız gerekse de, istemci tarafında basit bir koruma sağlayabilirsiniz.

Kritik Uyarı: İstemci tarafında (JavaScript) yapılan tüm kontroller kullanıcı tarafından manipüle edilebilir. Hassas verileri veya oyun cevaplarını asla doğrudan istemci tarafında açık metin olarak saklamayın. Gerçek bir uygulama için verileri şifreleyerek veya bir API üzerinden kontrol ederek yönetin.

Aşağıdaki tablo, farklı oyun mantığı yaklaşımlarını karşılaştırmaktadır:

Adım 5: Arayüzü Şıklaştırma ve Animasyonlar

Kullanıcı bir tahminde bulunduğunda görsel geri bildirim almak oyunun kalitesini artırır. CSS sınıflarını JavaScript ile değiştirerek basit animasyonlar ekleyebiliriz.

function mesajGoster(mesaj, renk) {
    mesajAlani.textContent = mesaj;
    mesajAlani.style.color = renk;
    mesajAlani.classList.add("animasyon-goster");
}

Bu fonksiyon, mesajın rengini ve görünürlüğünü dinamik olarak kontrol etmemizi sağlar. classList.add ile CSS'de tanımladığınız bir @keyframes animasyonunu tetikleyebilirsiniz.

Adım 6: Oyunun Test Edilmesi ve Debugging

Kodunuzu yazdıktan sonra Chrome Geliştirici Araçları'nı (F12) kullanarak console.log() ile değişkenlerin değerlerini takip edin. Yaygın hatalar arasında null referanslar veya yanlış değişken kapsamı (scope) yer alır.

// Debug için örnek
console.log("Seçilen kelime:", secilenKelime); 
// Bu satırı üretim ortamında mutlaka kaldırın!

Kodunuzun hatasız çalıştığından emin olmak için farklı senaryoları (boş girdi, çok fazla deneme, doğru tahmin) test edin.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Ticari veya yüksek güvenlik gerektiren projelerde, XSS (Cross-Site Scripting) saldırılarına karşı girdi temizleme (sanitization) ve modern güvenlik kütüphaneleri kullanmanız önerilir.

Sıkça Sorulan Sorular

JavaScript öğrenmek için kelime oyunu yapmak iyi bir başlangıç mı?

Kesinlikle. DOM manipülasyonu, olay dinleyicileri ve döngüleri aynı anda kullanmanızı gerektirdiği için öğrenme eğrisini ciddi oranda hızlandırır.

Kelimeleri bir dosyadan nasıl çekebilirim?

fetch() API kullanarak bir JSON dosyasındaki kelime listesini projenize dahil edebilirsiniz.

Kullanıcıların hile yapmasını nasıl engellerim?

İstemci tarafında hileyi %100 engellemek imkansızdır. Ancak, kelimeleri karmaşık hale getirerek (obfuscation) veya sunucu tabanlı bir doğrulama sistemi kurarak riski azaltabilirsiniz.

Bu oyuna nasıl yeni özellikler ekleyebilirim?

Zamanlayıcı (timer) ekleyebilir, skor tablosu oluşturabilir veya zorluk seviyeleri (kelime uzunluğuna göre) tanımlayabilirsiniz.

Kodlarım çalışmazsa ne yapmalıyım?

Öncelikle tarayıcı konsolundaki kırmızı hata mesajlarını inceleyin. Hatalar genellikle yazım yanlışı veya tanımlanmamış değişkenlerden kaynaklanır.

İleri Seviye İpuçları: LocalStorage ile Skor Kaydı

Oyununuzu daha profesyonel hale getirmek için kullanıcının başarısını tarayıcıda saklamanız gerekir. Tarayıcı kapansa bile skorun silinmemesi için localStorage API'sini kullanabiliriz. Bu, verileri tarayıcının yerel hafızasında anahtar-değer çiftleri olarak tutar.

Aşağıdaki kod bloğu, oyun bittiğinde skoru nasıl kaydedebileceğinizi ve en yüksek skoru nasıl geri çağırabileceğinizi göstermektedir:

// Skoru kaydetme fonksiyonu
function saveHighScore(score) {
    const currentHigh = localStorage.getItem('kelimeOyunuSkor') || 0;
    if (score > currentHigh) {
        localStorage.setItem('kelimeOyunuSkor', score);
        console.log("Yeni rekor: " + score);
    }
}

// Skoru sayfada gösterme
function displayHighScore() {
    const high = localStorage.getItem('kelimeOyunuSkor') || 0;
    document.getElementById('skor-tablosu').innerText = "En Yüksek Skor: " + high;
}

Performans Optimizasyonu ve Kod Temizliği

Projeniz büyüdükçe kodun okunabilirliğini artırmak ve tarayıcıyı yormamak için bazı optimizasyonlar yapmalısınız. Özellikle DOM manipülasyonlarını minimize etmek, oyunun akıcılığını doğrudan etkiler.

DOM Erişimlerini Önbelleğe Alma

Her tahmin işleminde document.getElementById kullanmak yerine, elementleri en başta değişkenlere atayarak bellek kullanımını optimize edebilirsiniz.

// Kötü pratik: Her seferinde DOM'u tarar
function updateUI() {
    document.getElementById('input-box').value = "";
    document.getElementById('status').innerText = "Tahmin et!";
}

// İyi pratik: Değişkenleri önbelleğe alma
const inputBox = document.getElementById('input-box');
const statusText = document.getElementById('status');

function updateUI() {
    inputBox.value = "";
    statusText.innerText = "Tahmin et!";
}

Olay Dinleyicileri (Event Listeners) Yönetimi

Oyun içerisinde çok sayıda buton veya giriş alanı varsa, her biri için ayrı dinleyici eklemek yerine "Event Delegation" (Olay Delegasyonu) yöntemini kullanın. Bu yöntem, ana kapsayıcıya tek bir dinleyici ekleyerek alt öğelerdeki tıklamaları yakalamanızı sağlar.

// Kapsayıcı üzerinden olay yönetimi
document.getElementById('oyun-alani').addEventListener('click', function(e) {
    if (e.target.classList.contains('tahmin-butonu')) {
        handleGuess();
    }
});

Bu yöntem, özellikle dinamik olarak oluşturulan butonlar için oldukça verimlidir ve bellek sızıntılarını önler. Kodunuzu modüler parçalara ayırarak (fonksiyonlar halinde) yönetmek, ileride yeni özellikler eklerken hata yapma riskinizi azaltacaktır.

Sonuç

JavaScript ile tarayıcı tabanlı bir kelime tahmin oyunu yapmak, web geliştirme temellerini anlamak için harika bir adımdır. Bu rehberde öğrendiğiniz DOM manipülasyonu, olay yönetimi ve temel mantık kurma becerilerini, daha büyük projelerde de kullanabilirsiniz. Bir sonraki adım olarak, projenizi LocalStorage kullanarak kullanıcının skorunu tarayıcıda kalıcı hale getirmeyi deneyebilirsiniz. Başarılar dilerim!