🎮 Cara Membuat Game Tic Tac Toe dengan Mode Gelap Menggunakan HTML, CSS, dan JavaScript



🎮 Cara Membuat Game Tic Tac Toe dengan Mode Gelap Menggunakan HTML, CSS, dan JavaScript

Tic Tac Toe (atau dikenal juga sebagai "XOX") adalah salah satu permainan klasik yang sederhana namun menyenangkan. Kali ini, kita akan membuat versi web-nya dengan tampilan mode gelap yang elegan, lengkap dengan fitur interaktif seperti penanda giliran pemain dan tombol reset.

🧩 1. Struktur File

Untuk memisahkan logika dan tampilan dengan rapi, kita akan menggunakan tiga file:

  • index.html – Struktur HTML utama
  • style.css – Gaya tampilan dalam mode gelap
  • script.js – Logika permainan Tic Tac Toe

🛠️ 2. Kode HTML

Buat file index.html dan isi dengan struktur berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Game Tic Tac Toe - Mode Gelap</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="game-container">
    <h1>Tic Tac Toe</h1>
    <div class="turn-indicator">
  <span id="playerX" class="player active">X</span>
  <span> vs </span>
  <span id="playerO" class="player">O</span>
</div>
    <div class="board" id="board"></div>
    <p id="status"></p>
    <button onclick="resetGame()">Main Lagi</button>
  </div>

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

🎨 3. Kode CSS (Mode Gelap)

File style.css ini akan memberikan tampilan gelap yang modern dan responsif.

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #121212;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.game-container {
  text-align: center;
  background-color: #1e1e1e;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

h1 {
  margin-bottom: 20px;
  color: #00e676;
}

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

.cell {
  width: 100px;
  height: 100px;
  font-size: 2.5rem;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cell:hover {
  background-color: #555;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background-color: #00e676;
  color: #000;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #00c853;
}

.turn-indicator {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.player {
  padding: 5px 15px;
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.player.active {
  background-color: #00e676;
  color: #000;
}

⚙️ 4. Kode JavaScript (Logika Game)

Simpan logika game ini dalam file script.js:

const board = document.getElementById('board');
const statusText = document.getElementById('status');
const playerXEl = document.getElementById('playerX');
const playerOEl = document.getElementById('playerO');

let currentPlayer = 'X';
let gameActive = true;
let cells = Array(9).fill('');

function renderBoard() {
  board.innerHTML = '';
  cells.forEach((cell, index) => {
    const button = document.createElement('button');
    button.classList.add('cell');
    button.textContent = cell;
    button.addEventListener('click', () => makeMove(index));
    board.appendChild(button);
  });
}

function makeMove(index) {
  if (!gameActive || cells[index]) return;
  cells[index] = currentPlayer;
  renderBoard();
  if (checkWinner()) {
    statusText.textContent = `Pemain ${currentPlayer} Menang! 🎉`;
    gameActive = false;
  } else if (cells.every(cell => cell)) {
    statusText.textContent = 'Seri! 🤝';
    gameActive = false;
  } else {
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    statusText.textContent = `Giliran Pemain ${currentPlayer}`;
    updateTurnIndicator();
  }
}

function checkWinner() {
  const winPatterns = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // baris
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // kolom
    [0, 4, 8], [2, 4, 6]             // diagonal
  ];
  return winPatterns.some(pattern => {
    const [a, b, c] = pattern;
    return cells[a] && cells[a] === cells[b] && cells[a] === cells[c];
  });
}

function updateTurnIndicator() {
  playerXEl.classList.toggle('active', currentPlayer === 'X');
  playerOEl.classList.toggle('active', currentPlayer === 'O');
}

function resetGame() {
  cells = Array(9).fill('');
  currentPlayer = 'X';
  gameActive = true;
  statusText.textContent = `Giliran Pemain ${currentPlayer}`;
  renderBoard();
  updateTurnIndicator();
}

// Inisialisasi saat pertama kali halaman dimuat
resetGame();

✅ Fitur yang Sudah Tersedia

  • ✅ Mode gelap yang nyaman di mata
  • ✅ Ukuran papan fleksibel dan responsif
  • ✅ Indikator giliran pemain
  • ✅ Deteksi kemenangan atau seri
  • ✅ Tombol “Main Lagi” untuk reset cepat

🚀 Kesimpulan

Dengan hanya tiga file sederhana, kamu bisa membuat game Tic Tac Toe yang tidak hanya fungsional tapi juga menarik secara visual. Proyek ini cocok untuk pemula yang ingin belajar dasar-dasar DOM JavaScript, grid CSS, dan interaktivitas web.

Jika kamu ingin meningkatkan proyek ini, kamu bisa menambahkan:

  • 🎵 Suara klik dan efek kemenangan
  • 💾 Skor dan riwayat permainan
  • 🤖 AI lawan (komputer)

Komentar

Posting Komentar