JavaScript ile Hızlı, Tarayıcı Tabanlı Bir Sudoku Platformu Nasıl Oluşturdum?

olarak tasarlandı. CSS ile hücrelerin boyutları, kenarlıkları ve özellikle 3x3'lük blokları ayıran kalın çizgiler görsel olarak belirginleştirildi. Aktif hücre, yanlış girişler ve sabit sayılar için farklı stil sınıfları tanımlandı.

  


  Yeni Oyun
  Çöz
  

2.2. JavaScript ile Dinamik Izgara Oluşturma

Izgara, sayfa yüklendiğinde JavaScript tarafından dinamik olarak oluşturuldu. Bu, oyunun farklı zorluk seviyelerinde veya farklı ızgara boyutlarında kolayca adapte olmasını sağladı. Her hücreye benzersiz bir ID atayarak (örn. cell-0-0), DOM manipülasyonlarını ve olay dinleyicilerini daha verimli hale getirdim.

function createSudokuGrid(gridData) {
    const gridElement = document.getElementById('sudoku-grid');
    gridElement.innerHTML = ''; // Önceki ızgarayı temizle

    for (let row = 0; row < 9; row++) {
        for (let col = 0; col < 9; col++) {
            const cell = document.createElement('div');
            cell.classList.add('sudoku-cell');
            cell.dataset.row = row;
            cell.dataset.col = col;

            const value = gridData[row][col];
            if (value !== 0) {
                cell.textContent = value;
                cell.classList.add('fixed'); // Başlangıçta verilen sayılar
            } else {
                const input = document.createElement('input');
                input.type = 'text';
                input.maxLength = 1;
                input.dataset.row = row;
                input.dataset.col = col;
                cell.appendChild(input);
            }
            gridElement.appendChild(cell);
        }
    }
}

2.3. Kullanıcı Etkileşimleri ve Olay Dinleyicileri

Kullanıcının hücrelere sayı girmesi, butonlara tıklaması gibi etkileşimler için olay dinleyicileri (event listeners) kullanıldı. Özellikle hücrelere giriş yapıldığında, girilen sayının geçerliliği anında kontrol edildi ve görsel geri bildirim sağlandı (örn. yanlış sayı kırmızı renkte gösterildi). Klavye navigasyonu da eklenerek kullanıcı deneyimi zenginleştirildi.

3. Sudoku Mantığı: Doğrulama ve Çözümleme Algoritmaları

Sudoku oyununun kalbi, sayıların kurallara uygunluğunu denetleyen doğrulama ve bulmacayı çözebilen çözümleme algoritmalarında yatar.

3.1. Sudoku Kurallarını Doğrulama

Bir Sudoku ızgarasının geçerli olup olmadığını kontrol etmek için üç temel kural seti uygulandı:

1. Her satırda 1'den 9'a kadar her sayı bir kez bulunmalı.
2. Her sütunda 1'den 9'a kadar her sayı bir kez bulunmalı.
3. Her 3x3'lük blokta 1'den 9'a kadar her sayı bir kez bulunmalı.

Bu kontroller, kullanıcı bir sayı girdiğinde veya oyunun tamamlandığında tetiklenerek anında geri bildirim sağladı. Performans için, sadece değişen satır, sütun ve blok kontrol edildi.

function isValid(board, row, col, num) {
    // Satır kontrolü
    for (let x = 0; x < 9; x++) {
        if (board[row][x] === num && x !== col) return false;
    }

    // Sütun kontrolü
    for (let x = 0; x < 9; x++) {
        if (board[x][col] === num && x !== row) return false;
    }

    // 3x3 kutu kontrolü
    let startRow = row - (row % 3);
    let startCol = col - (col % 3);
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            if (board[i + startRow][j + startCol] === num && (i + startRow !== row || j + startCol !== col)) return false;
        }
    }
    return true;
}

3.2. Geri İzlemeli (Backtracking) Çözümleme Algoritması

Sudoku bulmacalarını çözmek ve yeni bulmacalar üretmek için geri izlemeli (backtracking) algoritmayı kullandım. Bu algoritma, boş hücreleri sırayla doldurmaya çalışır. Bir sayı yerleştirildiğinde, bir sonraki boş hücreye geçer. Eğer bir noktada geçerli bir sayı bulunamazsa, bir önceki adıma geri döner ve farklı bir sayı denemeye başlar. Bu yöntem, tüm olası çözümleri sistematik olarak keşfeder.

function solveSudoku(board) {
    for (let row = 0; row < 9; row++) {
        for (let col = 0; col < 9; col++) {
            if (board[row][col] === 0) { // Boş hücre bul
                for (let num = 1; num <= 9; num++) {
                    if (isValid(board, row, col, num)) {
                        board[row][col] = num;
                        if (solveSudoku(board)) { // Rekürsif çağrı
                            return true;
                        } else {
                            board[row][col] = 0; // Geri izleme: sayıyı geri al
                        }
                    }
                }
                return false; // Geçerli sayı bulunamadı
            }
        }
    }
    return true; // Tüm hücreler dolduruldu
}

4. Performans Optimizasyonu ve Akıcı Kullanıcı Deneyimi

Tarayıcı tabanlı bir uygulama için performans kritik öneme sahiptir. Özellikle Sudoku gibi sürekli etkileşim gerektiren bir oyunda, UI'ın donmaması ve işlemlerin hızlı yanıt vermesi beklenir.

4.1. DOM Manipülasyonlarını Azaltma

DOM manipülasyonları pahalı işlemlerdir. Bu nedenle, ızgarayı güncellerken mümkün olduğunca az DOM işlemi yapmaya özen gösterdim. Örneğin, bir hücrenin değeri değiştiğinde tüm ızgarayı yeniden çizmek yerine, sadece ilgili hücrenin içeriğini güncelledim. Ayrıca, olay dinleyicilerini hücrelere tek tek eklemek yerine, olay delegasyonu (event delegation) kullanarak ana ızgara elementine tek bir dinleyici ekledim. Bu, bellek kullanımını ve performansını artırdı.

4.2. Algoritma Verimliliği

Sudoku çözücü ve üretici algoritmalarının verimliliği doğrudan oyunun hızını etkiler. Geri izleme algoritması, en kötü durumda eksponansiyel karmaşıklığa sahip olsa da, Sudoku'nun 9x9 gibi sabit ve küçük boyutu için genellikle yeterince hızlı çalışır. Ancak, daha büyük ızgaralar veya daha karmaşık bulmacalar için Dancing Links (DLX) gibi daha gelişmiş algoritmalar düşünülebilir.

4.3. Zamanlayıcı ve Animasyon Optimizasyonları

Oyun içi zamanlayıcı ve olası animasyonlar için requestAnimationFrame kullanarak tarayıcının render döngüsüyle senkronize çalıştım. Bu, CPU kullanımını azaltarak daha akıcı animasyonlar ve daha iyi pil ömrü sağladı.

5. Oyun Üretimi ve Zorluk Seviyeleri

Sadece bir Sudoku çözücüye sahip olmak yeterli değil; platformun sürekli yeni ve oynanabilir bulmacalar sunabilmesi gerekiyordu.

5.1. Sudoku Bulmacası Üretimi

Yeni bir Sudoku bulmacası üretmek için aşağıdaki adımları izledim:

1. Tamamen dolu ve geçerli bir Sudoku ızgarası oluşturmak için geri izleme algoritmasını kullandım (rastgele sayılarla başlayarak).
2. Bu dolu ızgaradan rastgele hücreleri sırayla kaldırdım.
3. Her kaldırma işleminden sonra, kalan bulmacanın tek bir çözümü olup olmadığını kontrol ettim. Eğer birden fazla çözümü varsa veya çözümü kalmazsa, kaldırma işlemini geri aldım.

Bu yöntem, her zaman tekil çözümü olan geçerli Sudoku bulmacaları üretmemi sağladı.

5.2. Zorluk Seviyeleri

Oyunun zorluk seviyesini belirlemek için başlangıçta kaldırılan hücre sayısını kullandım. Ne kadar çok hücre kaldırılırsa, bulmaca o kadar zor olur. Ancak, sadece hücre sayısı değil, aynı zamanda kalan sayıların dağılımı ve bulmacayı çözmek için gereken mantıksal adımların karmaşıklığı da zorluğu etkiler. Bu nedenle, zorluk seviyelerini ayarlarken hem kaldırılan hücre sayısını hem de çözüm algoritmasının adımlarını göz önünde bulunduran deneysel bir yaklaşım benimsedim.

Örnek zorluk seviyesi tablosu: