Tic-tac-toe (juga dikenal sebagai noughts dan crosses atau Xs dan Os)
adalah permainan kertas dan pensil untuk dua pemain, X dan O, yang
bergiliran menandai ruang dalam grid 3 × 3. Pemain yang berhasil menempatkan
tiga tanda mereka di baris horisontal, vertikal, atau diagonal memenangkan
pertandingan. Kali ini saya akan membuat Tic Tac Toe yang sangat sederhana
dengan menggunakan JavaScript.
Rancangan Tampilan
Tampilan yang akan digunakan sangat sederhana untuk mempersingkat proses
koding nanti yang akan dilakukan menggunakan HTML dan CSS. Tampilan terdiri
dari 4 komponen:
1. Judul
2. 9 Buah Button
3. Status
4. Button Reset
HTML dan CSS
Untuk membuat tampilan sederhana itu, buatlah file HTML seperti
berikut.
Karena akan menggunakan JavaScript dan CSS, jangan sampai lupa untuk
meyimpan link dan script untuk memanggil file CSS dan JavaScript. HTML saja
tidak cukup untuk membuat tampilan yang menarik, karena itulah CSS ada. CSS
bagaikan make-up dari HTML oleh karena itu, kita tambahkan CSS supaya
tampilan terlihat lebih baik dan menyerupai rancangan.
Setelah CSS ini diterapkan, tampilan akan menyerupai sesuai dengan
rancangan. Dalam CSS ini, digunakan Flexbox untuk mengatur posisi komponen.
Seperti mengatur posisi permainan supaya berada di tengah layar, mengatur 9
buah button agar berjajar 3x3, dan mengatur posisi Judul, Status, juga Reset
Button. Untuk mempelajari lebih lanjut mengenai Flexbox dapat dilihat pada
link berikut https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Rancangan Permainan
Setelah HTML & CSS dibuat, itu hanya menyelesaikan tampilan saja.
Button yang ada masih belum bisa digunakan. Untuk bisa menggunakan Button,
dibutuhkan JavaScript. JavaScript digunakan untuk mengubah tampilan HTML
& CSS seperti pada saat menekan button untuk menampilkan simbol X
ataupun O. Selain itu, JavaScript digunakan juga untuk menerapkan
logika-logika dalam permainan TicTacToe seperti bagaimana cara memenangkan
permainan. Tetapi sebelum mulai menulis program dengan JavaScript, kita
harus mengerti bagaimana alur permainannya. Untuk itulah, dibuat rancangan
permainan.
|
Rancangan |
Keterangan |
|
Jumlah Pemain |
2 pemain terdiri dari: O dan X |
|
Cara Bermain |
l Pemain secara bergantian (dimulai dari O) dapat menekan satu Button
yang ada dalam permainan di setiap gilirannya.
l Button yang sudah ditekan oleh pemain, tidak dapat ditekan lagi. |
|
Cara Memenangkan Permainan |
Ketika pemain berhasil menekan 3 buah Button yang membentuk garis
lurus.
|
|
Jika Permainan Seri |
Terdapat Button reset yang dapat digunakan untuk memulai ulang
permainan. |
JavaScript
Hal yang pertama kali dapat dilakukan yaitu deklarasi Player, Button, dan
Text pada tampilan untuk menampilkan informasi pemenang.
|
var player = "O";
var boxes = document.querySelectorAll(".box");
var reset_btn = document.querySelector("#reset");
var status_txt = document.querySelector("#status"); |
Karena kita sudah memberikan class dan id pada HTML maka, komponen Button
dan Text dapat diambil menggunakan class (diawali dengan . ) dan id (diawali
dengan # ) yang sudah ditetapkan dengan querySelector pada JavaScript.
Perbedaan querySelector dan querySelectorAll yaitu querySelector hanya
menerima satu buah komponen, sedangkan querySelectorAll menerima lebih dari
satu komponen dalam bentuk Array. *Boxes digunakan untuk menyimpan 9 Button
yang akan ditekan oleh pemain.
Setelah itu kita akan menerapkan fungsi reset untuk memulai ulang
permainan. Berikut adalah JavaScript-nya.
|
reset_btn.onclick = function resetGame() {
status_txt.innerHTML = "";
for (box of boxes) {
box.value = "";
box.disabled = false;
}
player = "O";
}; |
Reset Button diberikan fungsi ketika di klik. Reset Button akan menghapus
status pemenang, menghilangkan teks pada 9 Button dan membuat button
tersebut dapat di klik, kemudian mengembalikan ke pemain O sebagai pemain yang mendapat giliran pertama.
Setelah itu kita akan membuat fungsi untuk 9 Button. Berikut adalah
JavaScript-nya:
|
for (box of boxes) {
box.onclick = function () {
this.value = player;
this.disabled = true;
checkWinner();
player = player == "O" ? "X" : "O";
};
} |
Dalam script di atas, kita memberikan fungsi ketika salah satu dari 9
button ditekan oleh pemain. Hal yang dilakukan adalah menandai Button dengan
huruf dimana huruf yang akan tampil yaitu sesuai dengan player yang menekan
tombol tersebut (O atau X). Kemudian button yang sudah ditekan di disable (supaya tidak bisa
dilakukan aksi apapun oleh player lain). Setelah itu dilakukan pengecekan
apakah sudah ada pemenang atau belum. Pengecekan ini dilakukan menggunakan
fungsi checkWinner() yang akan dibahas setelah ini. Setelah dilakukan pengecekan pemenang,
jika masih belum ada pemenangnya maka ubah player menjadi player selanjutnya
(Jika saat ini X ubah jadi O, dan sebaliknya).
Fungsi checkWinner() digunakan untuk pengecekan apakah permainan sudah
selesai atau belum. Berikut adalah JavaScript-nya:
|
function checkWinner() {
var winningCondition = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (condition of winningCondition) {
var a = boxes[condition[0]].value;
var b = boxes[condition[1]].value;
var c = boxes[condition[2]].value;
if (a == "" || b == "" || c == "") continue;
if (a == b && b == c) {
disableBoxes();
status_txt.innerHTML = "The Winner is " + player;
}
}
} |
Hal pertama yang harus dilakukan untuk mengecek pemenang yaitu, dengan
menentukan Box (Button) mana saja yang harus bernilai sama (sama-sama O atau sama-sama X). Sesuai dengan rancangan permainan yang sudah dibuat. Pemain akan menang
ketika terdapat 3 Button yang ditekan membentuk garis lurus baik itu
vertikal, horizontal, maupun diagonal.
Angka yang digunakan dimulai dari 0 untuk mengikuti sifat Array yang
dimulai dari 0. Sehingga dapat diprogram dengan mudah. Berdasarkan angka
tersebut, berarti player akan menang jika dapat menekan Button berikut dalam
permainan:
l 0 - 1 - 2
l 3 - 4 - 5
l 6 - 7 - 8
l 0 - 3 - 6
l 1 - 4 - 7
l 2 - 5 - 8
l 0 - 4 - 8
l 2 - 4 - 6
Setelah memiliki data diatas. Fungsi checkWinner() tadi melanjutkan prosesnya dengan mengecek satu per satu apakah ada
player yang sudah menekan Button sesuai urutan data diatas. Jika sudah ada,
kita harus men-disable semua button untuk menyatakan bahwa permainan telah
berakhir, lalu menampilkan siapa pemenangnya. Untuk men-disable semua
Button, digunakan sebuah fungsi disableBoxes(). Berikut adalah JavaScript-nya:
|
function disableBoxes() {
for (box of boxes) {
box.disabled = true;
}
} |
Dengan begini, semua JavaScript yang diperlukan sudah terimplementasi.
Berikut adalah hasil dari JavaScript yang sudah buat:
Setelah semua file selesai dibuat, pastikan seluruh file HTML, CSS, dan
JavaScript berada pada satu folder yang sama. Kemudian buka file index.html. TicTacToe sederhana dapat dimainkan.
Posting Komentar