Cara Membuat Permainan Tic Tac Toe Sederhana Menggunakan HTML, CSS, dan JavaScript

Membuat permainan sederhana adalah salah satu cara terbaik untuk belajar coding dengan lebih menyenangkan. Salah satu project yang sangat cocok untuk pemula adalah Tic Tac Toe. Permainan ini sederhana, mudah dipahami, tetapi tetap cukup menantang untuk melatih logika dasar dalam JavaScript.

Dengan membuat Tic Tac Toe, kamu tidak hanya belajar tentang tampilan website, tetapi juga mulai memahami bagaimana sebuah game bekerja. Kamu akan belajar bagaimana HTML digunakan untuk membuat struktur papan permainan, CSS untuk mempercantik tampilannya, dan JavaScript untuk mengatur giliran pemain, mendeteksi pemenang, serta mengulang permainan dari awal.

Project seperti ini sangat bagus karena membuat kamu melihat langsung hasil dari kode yang kamu tulis. Setiap klik memberi reaksi. Setiap langkah punya konsekuensi. Dan dari sana, kamu mulai memahami bahwa coding bukan hanya tentang menulis syntax, tetapi tentang membangun interaksi.

Pada tutorial ini, kita akan membuat permainan Tic Tac Toe yang simpel dengan fitur berikut:

Papan 3x3
Dua pemain bergantian: X dan O
Menampilkan giliran pemain
Mendeteksi pemenang
Menampilkan hasil seri
Tombol reset permainan

1. Struktur File Project

Agar project rapi, kita akan memakai 3 file:

index.html
style.css
script.js

Dengan memisahkan file seperti ini, kode akan lebih mudah dibaca dan dikembangkan di kemudian hari.

2. Membuat Struktur HTML

Buat file index.html, lalu isi dengan kode berikut:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tic Tac Toe Sederhana</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="game-container">
    <h1>Tic Tac Toe</h1>
    <p id="status">Giliran: X</p>

    <div class="board" id="board">
      <div class="cell" data-index="0"></div>
      <div class="cell" data-index="1"></div>
      <div class="cell" data-index="2"></div>
      <div class="cell" data-index="3"></div>
      <div class="cell" data-index="4"></div>
      <div class="cell" data-index="5"></div>
      <div class="cell" data-index="6"></div>
      <div class="cell" data-index="7"></div>
      <div class="cell" data-index="8"></div>
    </div>

    <button id="restartBtn">Main Lagi</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

Penjelasan HTML

Pada bagian ini, kita membuat sebuah wadah utama dengan class game-container. Di dalamnya ada judul game, teks status untuk menunjukkan giliran pemain, papan permainan, dan tombol reset.

Papan permainan dibuat dengan 9 div kecil yang masing-masing memiliki class cell. Setiap kotak juga diberi atribut data-index agar JavaScript bisa mengenali posisi kotak yang diklik.

Struktur ini sederhana, tetapi sangat penting karena semua logika game akan berjalan berdasarkan elemen-elemen ini.

3. Membuat Tampilan dengan CSS

Sekarang buat file style.css, lalu isi dengan kode berikut:


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #f4f4f4;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-container {
  text-align: center;
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-bottom: 15px;
}

#status {
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.cell {
  width: 100px;
  height: 100px;
  background: #e9e9e9;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.cell:hover {
  background: #dcdcdc;
}

button {
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  background: #333;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background: #555;
}

Penjelasan CSS

CSS di atas digunakan untuk membuat permainan terlihat bersih dan nyaman dilihat. Papan permainan menggunakan display: grid agar 9 kotak bisa tersusun rapi menjadi 3 kolom dan 3 baris.

Setiap kotak dibuat berukuran sama agar tampilan lebih simetris. Kita juga menambahkan hover effect supaya saat mouse diarahkan ke kotak, pengguna merasa ada interaksi.

Tujuan dari styling ini bukan hanya agar game terlihat bagus, tetapi juga agar user merasa nyaman saat memainkannya.

4. Menambahkan Logika dengan JavaScript

Sekarang buat file script.js, lalu isi dengan kode berikut:


const cells = document.querySelectorAll('.cell');
const statusText = document.getElementById('status');
const restartBtn = document.getElementById('restartBtn');

let currentPlayer = 'X';
let gameActive = true;
let gameState = ['', '', '', '', '', '', '', '', ''];

const winningConditions = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

function handleCellClick(event) {
  const clickedCell = event.target;
  const clickedIndex = clickedCell.getAttribute('data-index');

  if (gameState[clickedIndex] !== '' || !gameActive) {
    return;
  }

  gameState[clickedIndex] = currentPlayer;
  clickedCell.textContent = currentPlayer;

  checkWinner();
}

function checkWinner() {
  let roundWon = false;

  for (let i = 0; i < winningConditions.length; i++) {
    const [a, b, c] = winningConditions[i];

    if (
      gameState[a] &&
      gameState[a] === gameState[b] &&
      gameState[a] === gameState[c]
    ) {
      roundWon = true;
      break;
    }
  }

  if (roundWon) {
    statusText.textContent = `Pemenang: ${currentPlayer}`;
    gameActive = false;
    return;
  }

  if (!gameState.includes('')) {
    statusText.textContent = 'Hasil: Seri!';
    gameActive = false;
    return;
  }

  currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
  statusText.textContent = `Giliran: ${currentPlayer}`;
}

function restartGame() {
  currentPlayer = 'X';
  gameActive = true;
  gameState = ['', '', '', '', '', '', '', '', ''];
  statusText.textContent = 'Giliran: X';

  cells.forEach(cell => {
    cell.textContent = '';
  });
}

cells.forEach(cell => {
  cell.addEventListener('click', handleCellClick);
});

restartBtn.addEventListener('click', restartGame);

5. Penjelasan JavaScript

Bagian ini adalah inti dari permainan. Di sinilah game mulai hidup.

Mengambil elemen dari HTML


const cells = document.querySelectorAll('.cell');
const statusText = document.getElementById('status');
const restartBtn = document.getElementById('restartBtn');

Kode ini digunakan untuk mengambil semua elemen kotak, teks status, dan tombol reset agar bisa dikontrol oleh JavaScript.

Menyimpan data permainan


let currentPlayer = 'X';
let gameActive = true;
let gameState = ['', '', '', '', '', '', '', '', ''];

Di sini kita menyimpan siapa pemain saat ini, apakah game masih berjalan, dan isi dari semua kotak pada papan.

Kombinasi kemenangan


const winningConditions = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

Array ini berisi semua kemungkinan menang, baik horizontal, vertikal, maupun diagonal.

Fungsi saat kotak diklik

Ketika pemain menekan salah satu kotak, program akan mengecek apakah kotak itu masih kosong dan apakah permainan masih aktif. Jika iya, simbol pemain akan dimasukkan ke kotak tersebut.

Fungsi cek pemenang

Setelah setiap langkah, program akan memeriksa semua kombinasi kemenangan. Jika ada tiga simbol yang sama dalam satu garis, maka permainan selesai dan pemenang ditampilkan.

Jika tidak ada pemenang dan semua kotak sudah terisi, maka hasilnya seri.

Fungsi reset game

Saat tombol “Main Lagi” ditekan, semua kotak akan dikosongkan, giliran kembali ke X, dan permainan dimulai dari awal.

6. Cara Menjalankan Project

Simpan semua file dalam satu folder seperti ini:


tic-tac-toe/
│── index.html
│── style.css
│── script.js

Setelah itu, buka file index.html di browser. Game Tic Tac Toe sederhana kamu sudah siap dimainkan.

7. Kenapa Project Ini Bagus untuk Pemula

Project ini terlihat kecil, tetapi sebenarnya mengajarkan banyak hal penting. Kamu belajar bagaimana menangani klik dari user, menyimpan data permainan, mengubah tampilan halaman secara langsung, dan membuat logika menang atau seri.

Ini adalah latihan yang sangat bagus karena menggabungkan tampilan dan logika dalam satu project yang menyenangkan. Saat kamu melihat game buatanmu berjalan, rasa percaya diri akan naik. Dan itu penting, karena belajar coding bukan hanya soal teori, tetapi juga soal membangun keyakinan bahwa kamu memang bisa.

8. Ide Pengembangan Selanjutnya

Setelah versi sederhana ini berhasil, kamu bisa mengembangkannya lagi menjadi lebih menarik. Misalnya:

Menambahkan warna berbeda untuk X dan O
Memberi efek saat ada pemenang
Menambahkan skor pemain
Membuat mode lawan komputer
Membuat tampilan lebih modern dan responsif

Dari project kecil seperti ini, kamu sedang melatih dasar yang akan sangat berguna saat membuat aplikasi yang lebih besar.

9. Kesimpulan

Membuat permainan Tic Tac Toe dengan HTML, CSS, dan JavaScript adalah latihan yang sangat cocok untuk pemula. Project ini sederhana, tidak terlalu rumit, tetapi cukup lengkap untuk melatih pemahaman dasar tentang struktur halaman, desain tampilan, dan logika interaksi.

Setiap project kecil seperti ini membentuk fondasi. Dan fondasi yang kuat akan membuat langkah berikutnya terasa lebih mudah. Jadi jangan remehkan project sederhana. Kadang justru dari sinilah kemampuan besar mulai tumbuh.

Computer Science

Search This Blog

Popular Post