Membuat Game Tic Tac Toe Sederhana dengan HTML, CSS, dan JavaScript

samuelpasaribu.com
19 Sep, 2023

Tic Tac Toe adalah salah satu permainan klasik yang sederhana dan mengasyikkan yang bisa dimainkan oleh dua orang. Dalam artikel ini, kami akan membimbing Anda langkah demi langkah untuk membuat versi sederhana Tic Tac Toe menggunakan HTML, CSS, dan JavaScript. Anda akan belajar cara mendesain tampilan papan permainan dengan CSS agar terlihat menarik, mengimplementasikan logika permainan dengan JavaScript, dan bahkan menambahkan elemen interaktif seperti pemilihan simbol dan tombol mulai. Dengan mengikuti panduan ini, Anda akan memiliki pemahaman yang lebih baik tentang pengembangan web dan cara membuat permainan interaktif dengan teknologi dasar web.

Permainan Tic Tac Toe ini akan memungkinkan Anda untuk bersenang-senang dan memainkannya dengan teman atau keluarga secara online. Kami akan menunjukkan cara menggabungkan HTML untuk struktur halaman, CSS untuk styling, dan JavaScript untuk logika permainan, sehingga Anda dapat memahami bagaimana ketiga teknologi ini dapat bekerja bersama untuk membuat pengalaman web yang menarik. Dengan artikel ini, Anda akan memiliki dasar yang kuat untuk mengembangkan permainan web sederhana lainnya dan meningkatkan keterampilan pemrograman web Anda.

Tic Tac Toe, atau yang juga dikenal sebagai "X dan O," adalah salah satu permainan klasik yang sangat sederhana namun mengasyikkan. Dalam tutorial ini, kita akan memandu Anda melalui langkah-langkah membuat permainan Tic Tac Toe sederhana menggunakan HTML, CSS, dan JavaScript. Anda akan belajar bagaimana membangun tampilan permainan, logika pemain, dan pengecekan kemenangan. Mari mulai!

Langkah 1: Struktur Dasar HTML

Kita akan memulai dengan membuat struktur dasar HTML untuk permainan Tic Tac Toe. Buatlah file HTML baru dan tambahkan kode berikut:

Kode HTML diatas adalah kerangka dasar dari halaman web yang digunakan untuk membuat permainan Tic Tac Toe sederhana. Mari kita bahas setiap elemen dan atribut dalam kode tersebut:

  1. <!DOCTYPE html>: Ini adalah deklarasi DOCTYPE yang mengindikasikan jenis dokumen HTML yang digunakan, dalam hal ini, dokumen HTML versi 5.
  2. <html lang="en">: Elemen <html> merupakan elemen akar yang mengelilingi seluruh konten halaman web. Atribut lang="en" mengindikasikan bahwa bahasa yang digunakan dalam halaman ini adalah bahasa Inggris (English).
  3. <head>: Elemen <head> berisi informasi tentang halaman web yang tidak ditampilkan secara langsung kepada pengguna, seperti metadata dan referensi ke berkas eksternal. Dalam bagian ini, terdapat:
  • <meta charset="UTF-8">: Mendefinisikan karakter set yang digunakan dalam halaman web sebagai UTF-8, yang mendukung karakter internasional.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Digunakan untuk mengoptimalkan tampilan halaman web pada perangkat seluler dengan mengatur skala awal dan lebar viewport.
  • <title>Tic Tac Toe</title>: Ini adalah judul halaman web yang akan ditampilkan di tab peramban.
4. <link rel="stylesheet" href="style.css">: Ini adalah referensi ke berkas CSS eksternal style.css yang akan digunakan untuk mengatur tampilan halaman web.

5. <script>: Bagian ini adalah untuk memasukkan script JavaScript ke dalam halaman. Di dalamnya terdapat pernyataan window.console = window.console || function(t) {};, yang memastikan bahwa objek console yang digunakan untuk debugging JavaScript tersedia.

6. <body translate="no">: Elemen <body> adalah area utama yang berisi konten yang akan ditampilkan kepada pengguna. Atribut translate="no" mengindikasikan bahwa konten halaman tidak perlu diterjemahkan.

7. Selanjutnya, konten halaman dimulai dengan <div class="container">. Ini adalah wadah utama yang digunakan untuk mengelompokkan seluruh konten permainan Tic Tac Toe.

8. Dalam <div class="game">, papan permainan Tic Tac Toe dibangun. Setiap sel permainan diwakili oleh elemen <div class="cell">. Masing-masing sel memiliki elemen <input type="checkbox"> yang tersembunyi, dan elemen <label> yang digunakan untuk menampilkan simbol X atau O pada sel. Data sel disimpan dalam atribut data-cell.

9. Di bawah papan permainan, terdapat elemen <div class="modal"> yang digunakan untuk menampilkan pesan dan pengaturan permainan. Ini termasuk elemen-elemen seperti giliran pemain, pemilihan markah (X atau O), dan tombol "Start First" dan "Start Second".

10. Akhirnya, berkas JavaScript eksternal script.js dimuat dengan <script>.

Kode HTML ini menyediakan kerangka dasar untuk permainan Tic Tac Toe dan elemen-elemen yang akan dimanipulasi oleh JavaScript untuk mengatur logika permainan dan tampilan.

Langkah 2: Gaya dengan CSS

Selanjutnya, mari tambahkan gaya CSS untuk membuat tampilan permainan Tic Tac Toe yang menarik. Buatlah file style.css dan tambahkan kode berikut:

Kode CSS diatas adalah gaya atau tampilan yang diterapkan pada halaman web permainan Tic Tac Toe. Mari kita bahas setiap bagian dari kode CSS tersebut:

  1. *, *:before, *:after: Ini adalah selektor universal yang berlaku untuk semua elemen di halaman, termasuk pseudo-element ::before dan ::after. Pada bagian ini, pengaturan dasar seperti margin, padding, dan box-sizing diatur ulang untuk memastikan konsistensi dalam tampilan halaman.
  2. body: Pengaturan untuk elemen <body>, termasuk latar belakang (background-color) yang ditentukan sebagai #eceff1, yang merupakan kode warna abu-abu muda. Font yang digunakan adalah "Roboto" dan font-fallback "sans" jika font utama tidak tersedia.
  3. .container: Ini adalah gaya untuk elemen dengan kelas "container". Lebar diberikan 100%, sehingga konten akan mengisi lebar penuh halaman.
  4. .game: Ini adalah gaya untuk wadah permainan Tic Tac Toe. Lebarnya diatur menjadi 450px, yang akan membatasi lebar papan permainan. Elemen ini ditempatkan di tengah halaman dengan margin auto dan menggunakan display flex untuk mengatur sel-sel permainan dalam baris dan kolom. Font yang digunakan adalah monospace.
  5. .cell: Ini adalah gaya untuk setiap sel permainan. Sel-sel ini diatur untuk menjadi flex containers sehingga isi dalam sel dapat diatur ke tengah secara horizontal dan vertikal.
  6. .cell > label: Gaya untuk elemen <label> dalam setiap sel permainan. Ini mengatur properti seperti ukuran, warna latar belakang, dan bayangan (box-shadow) yang memberikan efek hover yang halus ketika pengguna mengarahkan kursor ke atas sel.
  7. .cell > input[type="checkbox"]: Gaya untuk input checkbox yang tersembunyi dalam setiap sel permainan. Input ini digunakan untuk menyimpan status X atau O pada sel.
  8. .cell > input[type="checkbox"]:checked ~ label: Ini adalah gaya untuk label yang mengikuti input checkbox yang telah dicentang (checked). Ini digunakan untuk mengubah tampilan sel saat checkbox tercentang dengan memutar label sebesar 180 derajat.
  9. .cell > label:after: Gaya untuk pseudo-element ::after dari label dalam setiap sel. Pseudo-element ini digunakan untuk menampilkan simbol X atau O dalam sel permainan. Pseudo-element ini juga memiliki efek transisi pada border-color dan color untuk animasi perubahan warna.
  10. .cell.tic > label:after dan .cell.tac > label:after: Ini adalah gaya khusus untuk menampilkan simbol "X" (tic) dan "O" (tac) pada sel permainan. Ini berlaku ketika label memiliki kelas tambahan "tic" atau "tac".
  11. .win-line > label:after: Gaya ini digunakan untuk sel yang menjadi bagian dari garis kemenangan. Ini memberikan warna border dan teks yang berbeda (warna oranye) untuk menandai kemenangan.
  12. .modal dan .mod-container: Gaya untuk elemen modal yang digunakan untuk menampilkan pesan selama permainan. Modal ini diposisikan sebagai elemen tetap (fixed) untuk menutupi seluruh halaman. .mod-container mengatur tampilan modal yang berisi pesan dan pengaturan permainan.
  13. .mod-header, .mod-body, .mod-footer: Gaya untuk header, tubuh, dan footer dari modal. Ini mengatur warna latar belakang, ukuran font, dan tata letak elemen-elemen modal.
  14. .mark-switch, .mark, dan .play-order: Gaya untuk elemen-elemen yang digunakan untuk memilih markah (X atau O) dan urutan bermain. Ini mengatur tampilan tombol radio dan tata letak mereka.
  15. .btn dan .btn:hover: Gaya untuk tombol yang digunakan dalam modal dan permainan. Mereka memiliki ukuran font, warna latar belakang, bayangan, dan efek hover yang mengubah warna latar belakang saat kursor mengarah ke tombol.

Kode CSS ini mengontrol tampilan dan animasi halaman web permainan Tic Tac Toe, memberikan tampilan yang menarik dan interaktif kepada pengguna.

Langkah 3: Logika Permainan dengan JavaScript

Sekarang, mari kita tambahkan logika permainan dengan JavaScript. Buatlah file script.js dan tambahkan kode berikut:

Kode JavaScript diatas adalah inti dari permainan Tic Tac Toe yang diimplementasikan di halaman web. Mari kita bahas setiap bagian dari kode JavaScript tersebut:

  1. Variabel dan Arrays Awal: Kode dimulai dengan mendefinisikan sejumlah variabel, seperti modal, cells, playerClass, cpuClass, grid, lines, pw, cw, corners, sides, dan winObj. Ini adalah variabel yang akan digunakan dalam permainan untuk menyimpan data seperti papan permainan, kelas pemain, kelas CPU, dan banyak lagi. lines adalah array yang berisi indeks kombinasi untuk mengecek pemenang.
  2. $(document).ready(function() {...}): Ini adalah bagian dari jQuery yang menunggu dokumen HTML sepenuhnya dimuat sebelum menjalankan kode JavaScript. Dalam fungsi ini, inisialisasi permainan dilakukan. Tombol-tombol dan elemen lainnya diatur untuk mendeteksi interaksi pengguna.
  3. init(flag): Ini adalah fungsi yang digunakan untuk menginisialisasi permainan. Ini mereset papan permainan, mengatur kelas pemain dan kelas CPU berdasarkan pilihan pengguna, dan menyembunyikan modal.
  4. delay(fnc, arg): Fungsi ini digunakan untuk mengatur penundaan dalam permainan. Misalnya, dalam memanggil myMove() atau menampilkan modal.
  5. playerMove(cell): Fungsi ini dipanggil ketika pemain mengklik sel pada papan permainan. Ini mengunci sel yang dipilih, menambahkan kelas pemain ke sel itu, dan memperbarui papan permainan.
  6. myMove(): Fungsi ini digunakan untuk mengatur gerakan CPU dalam permainan. Algoritma untuk gerakan CPU disusun di sini, seperti mencoba untuk memenangkan permainan atau menghalangi pemain, memilih sel tengah jika tersedia, atau memilih sudut atau sisi secara acak jika tidak ada pilihan yang lebih baik.
  7. makeMove(cell): Fungsi ini digunakan untuk menerapkan gerakan ke papan permainan. Ini mengaktifkan checkbox pada sel yang dipilih, menambahkan kelas CPU ke sel itu, dan memperbarui papan permainan.
  8. randomEmptyCell(range): Fungsi ini digunakan untuk memilih sel acak yang masih kosong (tidak ada pemain atau CPU di sana) dari rentang yang diberikan.
  9. canWin(wm): Fungsi ini memeriksa apakah ada kemungkinan untuk memenangkan permainan dengan pola tertentu (misalnya, "ppp" untuk pemain atau "ccc" untuk CPU). Ini digunakan oleh CPU untuk mencoba memenangkan permainan atau menghalangi pemain.
  10. gameTest(isPlayer): Fungsi ini menguji status permainan untuk menentukan apakah ada pemenang atau permainan berakhir. Jika tidak, itu memanggil myMove() atau mengaktifkan sel-sel untuk pemain berikutnya.
  11. gameWon() dan gameTie(): Fungsi ini dipanggil ketika permainan berakhir dengan kemenangan atau seri. Mereka menampilkan pesan modal yang sesuai.
  12. isWin(): Fungsi ini memeriksa apakah ada pemenang dalam permainan dengan memeriksa kombinasi yang mungkin sesuai dengan pola kemenangan.
  13. isEnd(): Fungsi ini memeriksa apakah permainan berakhir dalam keadaan seri (semua sel terisi).
  14. Modal: Ini adalah konstruktor untuk objek modal yang digunakan dalam permainan. Ini mencakup metode untuk menampilkan dan menyembunyikan modal serta menampilkan pesan di dalamnya.

Kode JavaScript ini mengendalikan logika permainan, termasuk gerakan pemain dan CPU, pengecekan pemenang, serta tampilan modal untuk hasil permainan. Ini membuat permainan Tic Tac Toe berfungsi dan interaktif.

Tayangan Demo

Anda dapat melihat demo permainan Tic Tac Toe yang telah kita buat di sini: Demo Tic Tac Toe.

Kesimpulan

Sekarang Anda telah berhasil membuat permainan Tic Tac Toe sederhana menggunakan HTML, CSS, dan JavaScript. Anda dapat memodifikasi dan mengembangkan permainan ini sesuai dengan keinginan Anda. Selamat bermain dan belajar lebih lanjut!

Dengan mengikuti tutorial ini, Anda telah mempelajari bagaimana membuat game sederhana dengan teknologi web dasar. Semoga artikel ini bermanfaat bagi Anda dalam mengembangkan keterampilan pemrograman web Anda.

samuelpasaribu.com

samuelpasaribu.com

samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Next Post Previous Post
No Comment
Add Comment
comment url