HTML, CSS ve JavaScript ile Tik-Tak-Toe Oyunu

HTML, CSS ve JavaScript ile Tik-Tak-Toe Oyunu

Bu makalede, HTML, CSS ve JavaScript kullanarak basit bir Tik-Tak-Toe (X ve O) oyunu nasıl geliştireceğinizi adım adım açıklayacağım. Öncelikle, oyunun temel mantığını anlamak önemlidir. Ardından, HTML ile oyun tahtasını oluşturur, CSS ile stilini düzenler ve son olarak JavaScript ile oyunun mantığını ve kullanıcı etkileşimini sağlarız. Bu rehber, web geliştirmeye yeni başlayanlar için bile oldukça anlaşılır olacaktır.

HTML ile Oyun Tahtasının Oluşturulması

Öncelikle, oyun tahtasını oluşturacak temel HTML yapısını oluşturmamız gerekiyor. Bu yapıda, 3×3’lük bir ızgara oluşturmak için tablo (<table>) etiketini kullanacağız. Her hücre, oyuncuların işaretlerini yerleştirecekleri alanları temsil edecektir. Aşağıda HTML kod örneği bulunmaktadır:

<table id="tic-tac-toe">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS ile Stil Uygulama

Şimdi ise, oluşturduğumuz oyun tahtasına CSS ile stil uygulayacağız. Bu sayede, oyun daha düzenli ve görsel olarak daha çekici hale gelecektir. Örneğin, hücrelerin boyutlarını, renklerini ve kenarlıklarını düzenleyebilirsiniz. Aşağıda basit bir CSS örneği bulunmaktadır:

#tic-tac-toe {
  width: 300px;
  height: 300px;
  border-collapse: collapse;
}

#tic-tac-toe td {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  text-align: center;
  font-size: 60px;
  cursor: pointer;
}

JavaScript ile Oyun Mantığı

En önemli kısım olan JavaScript ile oyun mantığını oluşturmaya geldi sıra. Bu adımda, oyunun başlangıcını, oyuncuların hamlelerini, kazananı kontrol etmeyi ve oyunun sonlanmasını yöneteceğiz. Bu işlem, olay dinleyicileri (event listeners) ve dizi (array) gibi JavaScript özelliklerini kullanarak gerçekleştirilecektir. Detaylı kod örneği, makalenin kapsamı dışında olsa da, temel mantık şudur: Her hücreye tıklandığında, ilgili hücreye X veya O işaretini yerleştirir ve kazananı kontrol ederiz.

Oyunun tamamlanması için, JavaScript kodunda, kazanma koşullarını kontrol eden bir fonksiyon yazmanız gerekir. Bu fonksiyon, satır, sütun ve çaprazlarda aynı işaretin olup olmadığını kontrol ederek kazananı belirler. Ayrıca, beraberlik durumunu da kontrol etmeniz önemlidir. Kazanma durumunda veya beraberlik durumunda, oyunu yeniden başlatma seçeneği sunmak iyi bir kullanıcı deneyimi sağlayacaktır.

Sonuç

Bu makalede, basit bir Tik-Tak-Toe oyununu HTML, CSS ve JavaScript kullanarak nasıl oluşturabileceğinizi öğrendiniz. Bu temel bilgileri kullanarak daha karmaşık oyunlar geliştirebilirsiniz. Daha fazla bilgi ve örnek için fatihsoysal.com sitesini ziyaret edebilirsiniz. Ayrıca, burada ingilizce bir kaynak daha bulabilirsiniz.

#Etiketler
#TikTakToe #HTML #CSS #JavaScript #OyunGeliştirme #WebGeliştirme #Programlama #Kodlama #Tutorial