Yarım Saatte Web Tabanlı TIC-TAC-TOE Oyunu Geliştirme

Yukarıda videosunu izleyebileceğiniz bu örneğin kodlarına da buradan erişebilirsiniz.

Bu örneği, oyunun oynandığı alanı saran bir wrapper sınıfı verdiğimiz bir div içinde başlatıyoruz. Bu wrapper içine hamleleri göstermek için kullanacağımız 9 tane cell ve bilgi göstermek için kullanılacak 1 tane info sınıflı div ekliyoruz.

wrapper elementimize 300px genişlik ve 5px iç boşluk padding veriyoruz ki cell elementlerine verdiğimiz 5px dış boşluk margin ile dengeli bir ızgara görünümümüz olsun. cell içinde sadece tek bir harf olacağı için satır yüksekliğini ve font büyüklüğünü buna uygun veriyoruz. Oyun içerisinde hücreye tıklayan oyuncunun harfi hücre sınıfına eklenecek. Bunun için .cell.O ve .cell.X durumları için özel arkaplan renkleri ve :after elementleri için karşılık gelen oyuncu harfini veriyoruz. Harfi Javascript içerisinde de gösterebilirdik ama bu şekilde çok daha az kod yazmış olacağız.

Javascript bölümünde is önce tictactoe adında oluşturulduğunda kendini çalıştıracak bir fonksiyon oluşturuyoruz. HTML elementlerini alarak bunlara click olaylarını dinleyecek cellClick fonksiyonunu tanımlıyoruz. turn değişkeni ise X ya da O değerlerini alarak sıranın hangi oyuncuda olduğunu belirtiyor. playing değişkenini ise oyunun aktif olup olmadığını kontrol edebilmemiz için kullanacağız.

cells adında bir dizi oluşturduk. Bu diziye her bir cell için bir nesne ekleyip gereken yerlerde kullanacağız.

Her oyuncu değiştiğinde kullanmak için toogleTurn fonksiyonu oluşturduk. turn değişkenini kontrol edip info elementine de kimin sırası olduğunu burada yazacağız.

Her hamlede, bir kazanan olup olmadığını kontrol etmek için checkWinner fonksiyonunu oluşturduk. Oyunda 8 farklı kazanma ihtimali ve bir de beraberlik ihtimali var. Bunları kontrol edip playing değişkeni ile oyunu durduruyor ve info elementine gerekli bilgiyi yazıyoruz. Burada bir de “restart” butonu ekliyoruz. Bu butona tıklandığında da en başta tanımladığımız ve bütün bu kodları içerisine yazdığımız tictactoe değişkeninden dönecek bir restart fonksiyonun çalıştıracağız.