Gereksinimler ve Ön Hazırlık

JavaScript ile tarayıcı tabanlı bir kelime oyunu geliştirmek için herhangi bir karmaşık kurulum yapmanıza gerek yoktur. Modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve herhangi bir kod editörü (VS Code önerilir) yeterlidir. Projemiz için şu dosya yapısını oluşturmanız gerekmektedir:

• index.html: Oyunun iskeletini (HTML5) oluşturur.
• style.css: Oyunun görsel tasarımını sağlar.
• script.js: Oyunun mantığını ve etkileşimlerini yönetir.

Tarayıcıda geliştirme yaparken, tarayıcının "Geliştirici Araçları" (F12) panelindeki "Console" sekmesini açık tutmanız, hataları anlık olarak görmeniz ve debug (hata ayıklama) yapmanız açısından hayati önem taşır.

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

Oyunun arayüzü, kullanıcının kelimeyi göreceği bir alan, tahmin girişi yapacağı bir kutu ve geri bildirim mesajlarını içermelidir. Aşağıdaki kod bloğu, oyunun temel yapısını temsil eder.

    
Kelime Tahmin Oyunu
    
_ _ _ _ _
    
    Tahmin Et
    

Bu HTML yapısı, kullanıcıdan tek bir karakter girişi alacak şekilde tasarlanmıştır. maxlength="1" özelliği, kullanıcının tek seferde birden fazla harf girmesini engelleyerek veri girişini kısıtlar.

Adım 2: JavaScript ile Oyun Mantığını Kurma

Oyunun mantığını oluştururken, hedef kelimeyi belirlemeli ve kullanıcının girdiği harfleri kontrol etmeliyiz. JavaScript'te const ve let anahtar kelimelerini kullanarak değişkenlerimizi tanımlayalım.

const targetWord = "JAVASCRIPT";
let guessedLetters = [];
let attempts = 6;

function checkGuess(letter) {
    if (targetWord.includes(letter.toUpperCase())) {
        guessedLetters.push(letter.toUpperCase());
        return true;
    } else {
        attempts--;
        return false;
    }
}

Bu fonksiyon, kullanıcının girdiği harfin hedef kelime içinde olup olmadığını kontrol eder. toUpperCase() metodu, büyük/küçük harf duyarlılığını ortadan kaldırarak kullanıcı deneyimini iyileştirir.

Adım 3: DOM Manipülasyonu ile Etkileşim Sağlama

Kullanıcı "Tahmin Et" butonuna tıkladığında, JavaScript'in DOM üzerindeki öğeleri güncellemesi gerekir. Bu, oyunun dinamik hissettirmesini sağlayan temel mekanizmadır.

document.getElementById('guess-btn').addEventListener('click', () => {
    const input = document.getElementById('user-input');
    const letter = input.value;
    
    if (checkGuess(letter)) {
        document.getElementById('message').innerText = "Doğru tahmin!";
    } else {
        document.getElementById('message').innerText = "Yanlış! Kalan hak: " + attempts;
    }
    input.value = ''; // Giriş kutusunu temizle
});

Burada addEventListener kullanarak butonun tıklanma olayını dinliyoruz. İşlem tamamlandıktan sonra input.value = '' komutu ile giriş alanını sıfırlayarak bir sonraki tahmin için hazır hale getiriyoruz.

Adım 4: Kullanıcı Deneyimi ve Hata Yönetimi

Kullanıcılar bazen mükemmel olmayan girişler yapabilir. Örneğin, aynı harfi iki kez girmek veya sayı girmek oyunun akışını bozabilir. Bu durumları önlemek için bir doğrulama katmanı eklemeliyiz.

function validateInput(input) {
    const regex = /^[a-zA-Z]$/;
    if (!regex.test(input)) {
        alert("Lütfen sadece bir harf girin.");
        return false;
    }
    return true;
}

Düzenli ifadeler (Regex), kullanıcı girişlerini filtrelemek için en güçlü araçtır. /^[a-zA-Z]$/ kalıbı, yalnızca İngiliz alfabesindeki harflerin girilmesine izin verir.

Adım 5: Oyun Durumunu Kaydetme (LocalStorage)

Kullanıcının oyun ilerlemesini tarayıcı kapansa bile korumak için localStorage API'sini kullanabiliriz. Bu, kullanıcıya kaldığı yerden devam etme imkanı sunar.

function saveGameState(attempts) {
    localStorage.setItem('gameAttempts', attempts);
}

function loadGameState() {
    return localStorage.getItem('gameAttempts') || 6;
}

localStorage, verileri tarayıcıda anahtar-değer çiftleri olarak saklar. Bu yöntem, veritabanı gerektirmeyen basit oyunlar için mükemmel bir kalıcı depolama çözümüdür.

Güvenlik Uyarısı: Tarayıcı tabanlı depolama yöntemleri (localStorage, sessionStorage) istemci tarafında tutulur ve kullanıcı tarafından kolayca değiştirilebilir. Hassas verileri veya oyun skorlarını kesinlikle burada saklamayın; bu verileri sunucu tarafında (backend) doğrulamanız gerekmektedir.

Karşılaştırma: Oyun Geliştirme Yöntemleri

Sıkça Sorulan Sorular

JavaScript ile oyun yaparken performans sorunu yaşar mıyım?

Kelime tahmin oyunları gibi basit mantıklı projelerde JavaScript oldukça hızlıdır. Performans sorunları genellikle çok sayıda görselin veya karmaşık fizik hesaplamalarının olduğu oyunlarda ortaya çıkar.

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

İstemci tarafında (tarayıcıda) %100 güvenlik sağlamak imkansızdır. Eğer skor tablosu gibi rekabetçi bir özellik ekleyecekseniz, oyun mantığını bir Node.js veya başka bir backend dilinde sunucuda çalıştırmalısınız.

Mobil cihazlarda oyun nasıl çalışır?

JavaScript kodunuz tarayıcıda çalıştığı için mobil cihazlarda da sorunsuz çalışır. Sadece CSS tarafında "Responsive Design" (duyarlı tasarım) kurallarını kullanarak oyunun ekran boyutuna göre şekillenmesini sağlamalısınız.

Hangi editörü kullanmalıyım?

VS Code, sunduğu eklentiler ve JavaScript desteği ile bu tür projeler için endüstri standardıdır. Eklenti olarak "Live Server" kurarak kodunuzu anlık olarak tarayıcıda görüntüleyebilirsiniz.

Oyuna nasıl ses veya görsel efekt ekleyebilirim?

HTML5 Audio nesnesini kullanarak ses dosyalarını oynatabilir, CSS transition ve animation özellikleri ile görsel efektler oluşturabilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Ticari veya üretim ortamındaki projelerinizde güvenlik açıklarını (XSS, veri manipülasyonu) göz önünde bulundurarak profesyonel güvenlik testleri yapmanız önerilir.

Oyun Deneyimini Geliştirmek İçin İleri Seviye İpuçları

Oyununuzun temel mantığı çalışır hale geldikten sonra, kullanıcıların oyuna tekrar gelmesini sağlayacak "oyunlaştırma" (gamification) öğelerini eklemek oldukça önemlidir. Basit bir kelime oyununu profesyonel bir seviyeye taşımak için şu teknikleri uygulayabilirsiniz:

• Zamanlayıcı (Timer) Entegrasyonu: Kullanıcıya her kelime için kısıtlı bir süre vererek heyecanı artırın.
• İpucu Sistemi: Kullanıcının zorlandığı anlarda kelimenin ilk harfini göstermek gibi sınırlı haklar tanımlayın.
• Skor Tablosu (Leaderboard): LocalStorage kullanarak en yüksek skorları tarayıcıda tutun ve kullanıcıya gösterin.

Aşağıdaki örnek kod bloğu, basit bir geri sayım sayacı mantığını oyununuza nasıl entegre edebileceğinizi göstermektedir:

let timeLeft = 30;
const timerDisplay = document.getElementById('timer');

function startTimer() {
    const countdown = setInterval(() => {
        timeLeft--;
        timerDisplay.textContent = `Kalan Süre: ${timeLeft}sn`;

        if (timeLeft


Sonuç

JavaScript ile tarayıcı tabanlı bir kelime oyunu geliştirmek, web teknolojilerinin temellerini anlamak için harika bir yoldur. Bu rehberde, HTML yapısını kurmaktan verileri kalıcı hale getirmeye kadar tüm adımları tamamladınız. Artık bu temelin üzerine yeni özellikler ekleyebilir, örneğin kelime havuzunu genişletebilir veya zamanlayıcı (timer) gibi mekanikler ekleyerek oyunu daha zorlu hale getirebilirsiniz.

Bir sonraki adım olarak, bu projeyi bir adım ileriye taşıyarak React veya Vue gibi modern bir framework kullanarak bileşen tabanlı (component-based) bir yapıya dönüştürmeyi deneyebilirsiniz. İyi kodlamalar!