JavaScript : Membuat Game Tic Tac Toe

Giliran: X

Game Tic Tac Toe adalah salah satu permainan papan klasik yang sederhana namun cukup populer. Permainan ini biasanya dimainkan oleh dua orang dengan menggunakan simbol X dan O. Tujuan dari permainan ini adalah menempatkan tiga simbol yang sama secara berderet baik horizontal, vertikal, maupun diagonal pada papan berukuran 3x3.

Pada kesempatan kali ini kita akam membuat game Tic Tac Toe sederhana dengan menggunakan HTML dan JavaScript.

Membuat Papan Tic Tac Toe

Pertama kita akan membuat papan tic tac toe yang berukuran 3x3. Untuk membuat papan tic tac toe kita akan menggunakan tag <table>, <tr>, dan <td>. Pada tag <td>

<table>
  <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>

Kemudian kita akan membuat kode CSS untuk membuat papan tic tac toe.

table {
  border-collapse: collapse;
  margin: 20px auto;
}
td {
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 24px;
  border: 2px solid black;
  cursor: pointer;
}

Dari kode HTML dan CSS yang kita buat. Sekarang kita memiliki sebuah papan tic tac toe yang berukuan masing-masing kotaknya berukuran lebar 60px dan tinggi 60px.

Membuat Tanda ketika Kotak Diklik

Setelah kita membuat papan tic tac toe. Sekarang kita akan membuat kondisi ketika papan diklik akan muncul simbol. Kita akan membuat agar papan muncul simbol X terlebih dahulu.
Kita akan memberikan event handler onclick pada papan tic tac toe yang kita buat sebelumnya

<table>
  <tr>
    <td onclick="main(0)"></td>
    <td onclick="main(1)"></td>
    <td onclick="main(2)"></td>
  </tr>
  <tr>
    <td onclick="main(3)"></td>
    <td onclick="main(4)"></td>
    <td onclick="main(5)"></td>
  </tr>
  <tr>
    <td onclick="main(6)"></td>
    <td onclick="main(7)"></td>
    <td onclick="main(8)"></td>
  </tr>
</table>

Kita menambahkan event handler onclick pada element <td> untuk memanggil fungsi JavaScript ketika kotak diklik. Pada onclik terdapat fungsi main(0) sampai main(8). Setiap element <td> mewakili satu kotak pada papan Tic Tac Toe yang berjumlah 9 kotak (indeks 0–8). Fungsi main() menerima parameter berupa angka indeks yang menunjukkan posisi kotak yang diklik.
main(0) menunjukkan posisi kotak baris 1, kolom 1
main(1) menunjukkan posisi kotak baris 1, kolom 2
main(2) menunjukkan posisi kotak baris 1, kolom 3
main(3) menunjukkan posisi kotak baris 2, kolom 1
main(4) menunjukkan posisi kotak baris 2, kolom 2
main(5) menunjukkan posisi kotak baris 2, kolom 3
main(6) menunjukkan posisi kotak baris 3, kolom 1
main(7) menunjukkan posisi kotak baris 3, kolom 2
main(8) menunjukkan posisi kotak baris 3, kolom 3

Kemudian kita akan membuat fungsi main() dengan JavaScript yang bertujuan untuk memberikan tanda "X" ketika kotak diklik.

<script>
  let papan = ["", "", "", "", "", "", "", "", ""];

  function main(index) {
    if (papan[index] === "") {
      papan[index] = "X";
      document.getElementsByTagName("td")[index].innerText = "X";
    }
  }
</script>

Membuat Tanda "X" dan "O" ketika Kotak Diklik

Setelah kita berhasil menampilkan tanda "X" ketika sebuah kotak diklik, langkah berikutnya adalah membuat permainan berjalan secara bergantian antara setelah menampilkan tanda "X" selanjutnya muncul tanda "O". Setelah menampilkan tanda "O" selanjutnya muncul tanda "X". Dengan begitu, setiap kali memilih kotak, maka akan otomatis berganti dari "X" ke "O", lalu kembali lagi ke dari "O" ke "X", dan seterusnya.

<script>
  let papan = ["", "", "", "", "", "", "", "", ""];
  let giliran = "X";
  
  function main(index) {
    if (papan[index] === "" && jalan) {
      papan[index] = giliran;
      document.getElementsByTagName("td")[index].innerText = giliran;

      
    }
  }
</script>

let giliran = "X";

Kita menambahkan variabel giliran = "X" sebagai tanda bahwa X giliran pertama. Secara default pemain pertama yang berjalan adalah X.

Untuk menampilkan tanda "X" selanjutnya muncul tanda "O", setelah menampilkan tanda "O" selanjutnya muncul tanda "X", dan seterusnya, maka kita bisa menambahkan printah berikut.

giliran = giliran === "X" ? "O" : "X";

Pada baris ini adalah operator ternary di JavaScript.
Jika giliran === "X" (giliran sama dengan "X"), maka nilai giliran diubah menjadi "O". Sehingga variabel giliran berikutnya bernilai "O".
Jika tidak (bukan giliran X, berarti O), maka nilai giliran berikutnya menjadi "X".

Dengan adanya variabel ini, setiap kali sebuah kotak diklik, program dapat memeriksa giliran siapa yang sedang bermain. Setelah tanda X ditampilkan, nilai variabel giliran akan berubah menjadi "O", sehingga giliran berikutnya otomatis diberikan kepada O begitu pula sebaliknya.