Ini adalah aplikasi ringkas permainan Tic Tac Toe yang saya bangunkan dengan JavaScript, tanpa sebarang framework seperti React, Vue malahan juga framework frontend seperti Bootstrap ataupun Tailwind.
Aplikasi ini dibangunkan untuk membantu pelajaran JavaScript.
Demo boleh dicuba di https://js-tictactoe-1m9.pages.dev/
Saya membuat penerangan kepada pembangunan aplikasi ini di pautan YouTube berikut :
- Tetapkan giliran kepada
player-1
- 3 peristiwa (event) yang ditunggu
- pemain
mouseover
pada salah satu kotak- pastikan tiada class
checked
sebab menandakan kotak telah ditandakan - tambah class tertakluk
player-1
atauplayer-2
kepada variablecurrent_turn
- tambah class
temp
sebagai tandamouseover
- pastikan tiada class
- pemain
mouseout
daripada salah satu kotak- pastikan tiada class
checked
kerana tidak perlu menghilangkan tanda x atau o bagi kotak yang telah ditanda pemain - sekiranya terdapat class
temp
, buang classtemp
danplayer-1
atauplayer-2
tertakluk kepada variablecurrent_turn
- pastikan tiada class
- pemain klik (click) pada kotak
- dapatkan
index
kotak - semak sama ada kotak mempunyai class
checked
kerana ianya tidak boleh ditanda semula - sekiranya tidak, tambahkan class
checked
danplayer-1
atauplayer-2
tertakluk kepada variablecurrent_turn
- semak sama ada pemain telah menang dengan fungsi
check_winner()
- sekiranya
check_winner()
adalahtrue
- umumkan pemenang
reset_game()
- sekiranya
check_winner()
adalahfalse
- semak sekiranya permainan telah
stalemate
dengan fungsicheck_stalemate()
- sekiranya tidak stalemate
- laksanakan arahan
update_turn()
untuk tukar giliran
- laksanakan arahan
- sekiranya stalemate
- umumkan stalemate
- jalankan fungsi
reset_game()
- sekiranya tidak stalemate
- semak sekiranya permainan telah
- dapatkan
- pemain
- Fungsi-fungsi yang dibangunkan
check_winner()
- menyemak sama ada pemain telah menang.- Sekiranya ya
- set kotak dengan class
winner
- return
true
- set kotak dengan class
- Sekiranya tidak
- return
false
- return
- Sekiranya ya
check_stalemate()
- menyemak sama ada semua kotak telah ditandakan- Sekiranya ya
- return
true
- return
- Sekiranya tidak
- return
false
- return
- Sekiranya ya
update_turn()
- menukar nilai current_turn kepadaplayer-1
atauplayer-2
- Variable
win
adalah Array yang menyimpan data kombinasi kotak yang diperlukan untuk menang - Variable
current_turn
menyimpan nilaiplayer-1
atauplayer-2
yang digunakan sebagai class untuk menunjukkan giliran pemain