Javascript İle XOX Oyunu Yapımı

Bu dersimizde, Javascript İle XOX oyunu hazırlayacağız. Bu oyunun nasıl yapılacağını detaylandıracağım. Oyun için html, css ve javascript kodları yazacağız.

Javascript kodumuzda öncelikle oyun tahtasını oluşturacak bir fonksiyon yazıyoruz. Fonksiyon her hücreyi tıklanabilir olmasına imkan sağlayacak. Tıklama sonrasında hangi oyuncunun sırası olduğunu belirleyecek. Ardından, oyunun kurallarını belirtiyoruz. Oyuncuların sırasıyla X ve O işaretlerini oynayacaklarından emin olmalıyız. Aynı zamanda, bir oyuncu üç işareti yatay, dikey veya çapraz olarak bir araya getirdiğinde oyunun kazanılacağını belirtiyoruz.

Son olarak, oyunun sonlandırılması ve yeniden başlatılması için bir fonksiyon hazırlıyoruz. Bir oyuncu kazandığında veya oyun tahtasının dolması yani beraberlik olması durumunda çalışacak.

HTML Kodları

Hazırlayacağımız örnek basit bir şekilde olacağı için, HTML’deki tablo yapısını kullanabiliriz. Her bir hücre için id tanımlaması yaparak verilere ulaşma ve veri işleme işlemini sağlıyoruz.

<table>
  <tr>
    <td id="0"></td>
    <td id="1"></td>
    <td id="2"></td>
  </tr>
  <tr>
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>
  </tr>
  <tr>
    <td id="6"></td>
    <td id="7"></td>
    <td id="8"></td>
  </tr>
</table>

CSS Kodları

Oyunun biraz güzel görünmesini amaçlıyoruz. Bunun içinde minicik bir CSS kodu eklemesi yapıyoruz.

td {
  width: 50px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

Böylece oyun ortamını oluşturmuş oluyoruz. Şimdide gelelim javascript kodlarına.

Javascript Kodları

Burada yapacağımız işler, ilk olarak oyun tahtasını oluşturmak olacaktır. Ardından, oyun kurallarını önceden gelirlemek bizim işlerimizi kolaylaştıracaktır. Oyun kurallarının belirlenmesinin ardından gerekli kontroller yapılarak, oyunun durumu hakkında bilgi edinebiliriz.

//Oyun tahtası oluşturma
var cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', cellClicked);
}

//Oyun kuralları
var currentPlayer = 'X';
var winConditions = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], //yatay kazanma durumları
  [0, 3, 6], [1, 4, 7], [2, 5, 8], //dikey kazanma durumları
  [0, 4, 8], [2, 4, 6] //çapraz kazanma durumları
];

function cellClicked() {
  if (this.innerHTML === '') {
    this.innerHTML = currentPlayer;
    checkForWin();
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
  }
}

function checkForWin() {
    for (var i = 0; i < winConditions.length; i++) {
        var condition = winConditions[i];
        var a = cells[condition[0]].innerHTML;
        var b = cells[condition[1]].innerHTML;
        var c = cells[condition[2]].innerHTML;
            if (a !== '' && a === b && b === c){
                alert(currentPlayer + ' kazandı!');
                resetGame();
                return;
            }
    }
    //Eğer hiçbir kazanma durumu yoksa ve tüm hücreler doluysa oyunu berabere bitir
    if (allCellsAreFull()){
        alert('Oyun berabere bitti!');
        resetGame();
    }
}

function allCellsAreFull(){
    for (var i = 0; i < cells.length; i++){
        if (cells[i].innerHTML === '') {
            return false;
        }
    }
    return true;
}

function resetGame(){
    for (var i = 0; i < cells.length; i++) {
        cells[i].innerHTML = '';
    }
    currentPlayer = 'X';
}

Bu kodlar, kullanıcıların tahtayı tıklaması ve kazanma durumlarını kontrol etmek için kullanılmaktadır. Tüm hücrelerin dolu olduğu ve kazananın olmadığı durumlarda, oyunculara oyunun berabere bittiği bilgisi verilir. Ayrıca, oyun sonlandırıldığında oyun tahtası sıfırlanır ve yeni bir oyun başlatmak için hazır hale getirilir.

Böylelikle, Javascript İle XOX oyunu hazırlamış oluyoruz. Bu dersin amacı, Javascript ile bu işlemin nasıl sağlanacağını göstermekti. Temel düzeyde yapılabilinecek bir örnek olarak değerlendirebilirsiniz.