Tic-tac-toe adalah permainan populer yang menggunakan kotak 3×3. Tujuan permainan ini adalah menjadi pemain pertama yang menempatkan tiga simbol dalam baris lurus horizontal, vertikal, atau diagonal.
Anda dapat membuat game Tic-tac-toe yang berjalan di browser web menggunakan HTML, CSS, dan JavaScript. Anda dapat menggunakan HTML untuk menambahkan konten yang berisi kisi 3×3, dan CSS untuk menambahkan beberapa gaya pada desain game.
Anda kemudian dapat menggunakan JavaScript untuk fungsionalitas game. Ini termasuk menempatkan simbol, bergiliran antar pemain, dan memutuskan siapa yang menang.
Cara Membuat UI untuk Game Tic-Tac-Toe
Anda dapat membaca dan mengunduh kode sumber lengkap untuk game ini darinya repositori GitHub.
Tic-tac-toe adalah salah satu dari banyak permainan yang dapat Anda buat saat mempelajari cara memprogram. Ini bagus untuk berlatih bahasa atau lingkungan baru, seperti mesin pengembangan game PICO-8.
Untuk membuat game Tic-tac-toe yang berjalan di browser web, Anda perlu menambahkan HTML untuk konten halaman. Anda kemudian dapat menata ini menggunakan CSS.
- Buat file baru bernama "index.html".
- Di dalam "index.html", tambahkan struktur dasar file HTML:
html>
<htmllang="en-AS">
<kepala>
<judul>Permainan Tic Tac Toejudul>
kepala>
<tubuh>
tubuh>
html> - Di dalam tag body HTML, tambahkan tabel yang berisi tiga baris, dengan tiga sel di setiap baris:
<divkelas="wadah">
<meja>
<tr>
<tdpengenal="1">td>
<tdpengenal="2">td>
<tdpengenal="3">td>
tr>
<tr>
<tdpengenal="4">td>
<tdpengenal="5">td>
<tdpengenal="6">td>
tr>
<tr>
<tdpengenal="7">td>
<tdpengenal="8">td>
<tdpengenal="9">td>
tr>
meja>
div> - Di folder yang sama dengan file HTML Anda, buat file baru bernama "styles.css".
- Di dalam file CSS, tambahkan beberapa gaya ke kisi 3 kali 3 Anda:
meja {
perbatasan-runtuh: runtuh;
batas: 0 mobil;
}td {
lebar: 100px;
tinggi: 100px;
perataan teks: tengah;
vertical-align: tengah;
berbatasan: 1pxpadathitam;
} - Tautkan file CSS ke file HTML Anda dengan menambahkannya ke tag head:
<tautanrel="lembar gaya"jenis="teks/css"href="styles.css">
Cara Bergiliran Menambahkan Simbol ke Papan Permainan
Dalam permainan, akan ada dua pemain, masing-masing dengan simbol "X" atau "O". Anda dapat menambahkan simbol "X" atau "O" dengan mengklik salah satu sel kisi. Ini akan berlanjut sampai salah satu dari Anda membuat baris lurus horizontal, vertikal, atau diagonal.
Anda dapat menambahkan fungsi ini menggunakan JavaScript.
- Di folder yang sama dengan file HTML dan CSS Anda, buat file JavaScript bernama "script.js".
- Tautkan file JavaScript ke file HTML Anda dengan menambahkan skrip ke bagian bawah tag body:
<tubuh>
Kode Anda di sini
<naskahsrc="skrip.js">naskah>
tubuh> - Di dalam file JavaScript, tambahkan string untuk mewakili simbol pemain. Ini bisa berupa "X" atau "O". Secara default, pemain pertama akan menempatkan "X":
membiarkan simbol pemain = "X"; - Tambahkan variabel lain untuk melacak apakah game telah berakhir:
membiarkan permainanBerakhir = PALSU - Setiap sel dalam tabel HTML memiliki ID antara 1 dan 9. Untuk setiap sel dalam tabel, tambahkan event listener yang akan berjalan setiap kali pengguna mengklik sel:
untuk (membiarkan saya = 1; saya <= 9; saya++) {
dokumen.getElementById (i.toString()).addEventListener(
"klik",
fungsi() {
}
);
} - Di dalam pendengar acara, ubah HTML bagian dalam untuk menampilkan simbol saat ini. Pastikan untuk menggunakan pernyataan bersyarat JavaScript untuk terlebih dahulu memastikan sel kosong, dan permainan belum berakhir:
jika (ini.innerHTML "" && !permainanBerakhir) {
ini.innerHTML = simbol pemain;
} - Tambahkan kelas ke elemen HTML untuk memberi gaya pada simbol yang akan ditampilkan di kisi. Nama kelas CSS akan menjadi "X" atau "O", tergantung pada simbolnya:
ini.classList.add (playerSymbol.toLowerCase()); - Di dalam file "styles.css", tambahkan dua kelas baru ini untuk simbol "X" dan "O". Simbol "X" dan "O" akan ditampilkan sebagai warna yang berbeda:
.X {
warna: biru;
ukuran huruf: 80px;
}.Hai {
warna: merah;
ukuran huruf: 80px;
} - Dalam file JavaScript, setelah mengubah innerHTML untuk menampilkan simbol, tukar simbol tersebut. Misalnya, jika pemain baru saja meletakkan "X", ubah simbol berikutnya menjadi "O":
jika (simbol pemain "X")
simbol pemain = "HAI"
kalau tidak
simbol pemain = "X" - Untuk menjalankan game, buka file "index.html" di browser web untuk menampilkan kisi 3 kali 3:
- Mulailah menempatkan simbol di kisi dengan mengklik sel. Permainan akan bergantian antara simbol "X" dan "O":
Cara Menentukan Pemenang
Saat ini, permainan akan tetap berlanjut meskipun pemain telah menempatkan tiga simbol berturut-turut. Anda perlu menambahkan kondisi akhir untuk memeriksanya setelah setiap belokan.
- Di dalam file JavaScript Anda, tambahkan variabel baru untuk menyimpan semua kemungkinan posisi "menang" untuk petak 3 kali 3. Misalnya, "[1,2,3]" adalah baris atas, atau "[1,4,7]" adalah baris diagonal.
membiarkan winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Tambahkan fungsi baru bernama checkWin():
fungsicheckWin() {
} - Di dalam fungsi, lewati setiap kemungkinan posisi menang:
untuk (membiarkan saya = 0; i < winPos.panjang; saya++) {} - Di dalam loop for, periksa apakah semua sel berisi simbol pemain:
jika (
dokumen.getElementById (winPos[i][0]).innerHTML playerSimbol &&
dokumen.getElementById (winPos[i][1]).innerHTML playerSimbol &&
dokumen.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Jika kondisi bernilai benar, maka semua simbol berada dalam garis lurus. Di dalam pernyataan if, tampilkan pesan ke pengguna. Anda juga dapat mengubah gaya elemen HTML dengan menambahkan kelas CSS yang disebut "win":
dokumen.getElementById (winPos[i][0]).classList.add("menang");
dokumen.getElementById (winPos[i][1]).classList.add("menang");
dokumen.getElementById (winPos[i][2]).classList.add("menang");
permainanBerakhir = BENAR;setTimeout(fungsi() {
peringatan (playerSymbol + "menang!");
}, 500); - Tambahkan kelas CSS "menang" ini ke file "styles.css". Saat pemain menang, itu akan mengubah warna latar belakang sel pemenang menjadi kuning:
.menang {
warna latar belakang: kuning;
} - Panggil fungsi checkWin() setiap kali pemain mendapat giliran, di dalam event handler yang ditambahkan pada langkah sebelumnya:
untuk (membiarkan saya = 1; saya <= 9; saya++) {
// Setiap kali pemain mengklik sel
dokumen.getElementById (i.toString()).addEventListener(
"klik",
fungsi() {
jika (ini.innerHTML "" && !permainanBerakhir) {
// Tampilkan "X" atau "O" di sel, dan beri gaya
ini.innerHTML = simbol pemain;
ini.classList.add (playerSymbol.toLowerCase());
// Periksa apakah pemain menang
checkWin();
// Tukar simbol ke yang lain untuk giliran berikutnya
jika (simbol pemain "X")
simbol pemain = "HAI"
kalau tidak
simbol pemain = "X"
}
}
);
}
Cara Mengatur Ulang Papan Permainan
Setelah pemain memenangkan permainan, Anda dapat mengatur ulang papan permainan. Anda juga dapat mengatur ulang papan permainan jika seri.
- Di file HTML, setelah tabel, tambahkan tombol reset:
<tombolpengenal="mengatur ulang">Mengatur ulangtombol> - Tambahkan beberapa gaya ke tombol reset:
.wadah {
menampilkan: melenturkan;
flex-direction: kolom;
}#mengatur ulang {
batas: 48px 40%;
lapisan: 20px;
} - Di file JavaScript, tambahkan event handler yang akan dijalankan setiap kali pengguna mengklik tombol reset:
dokumen.getElementById("mengatur ulang").addEventListener(
"klik",
fungsi() {}
); - Untuk setiap sel di grid, dapatkan elemen HTML menggunakan fungsi getElementById(). Atur ulang innerHTML untuk menghapus simbol "O" dan "X", dan hapus semua gaya CSS lainnya:
untuk (membiarkan saya = 1; saya <= 9; saya++) {
dokumen.getElementById (i.toString()).innerHTML = "";
dokumen.getElementById (i.toString()).classList.remove("X");
dokumen.getElementById (i.toString()).classList.remove("Hai");
dokumen.getElementById (i.toString()).classList.remove("menang");
permainanBerakhir = PALSU;
} - Jalankan game dengan membuka file "index.html" di browser web.
- Mulailah menempatkan simbol "X" dan "O" pada grid. Cobalah untuk membuat salah satu simbol menang.
- Tekan tombol reset untuk mengatur ulang papan permainan.
Belajar JavaScript dengan Membuat Game
Anda dapat terus meningkatkan keterampilan pemrograman Anda dengan membuat lebih banyak proyek di JavaScript. Sangat mudah untuk membuat game dan alat sederhana di lingkungan web, menggunakan teknologi terbuka lintas platform seperti JavaScript dan HTML.
Tidak ada cara yang lebih baik untuk meningkatkan pemrograman Anda selain berlatih menulis program!
