💻 Membuat Game Catur Dark Mode dengan HTML, CSS, dan JavaScript

 



Pernah kepikiran bikin game catur sendiri? Gak perlu ribet pakai engine berat—cukup dengan HTML, CSS, dan JavaScript, kamu sudah bisa bikin game catur simpel tapi tampil keren dengan mode gelap ala hacker! Artikel ini akan membimbing kamu selangkah demi selangkah. Cocok banget buat kamu yang masih pemula tapi pengen punya proyek keren.

🧠 Kenapa Game Catur Ini Menarik?

Game ini dibuat tanpa framework atau library eksternal, jadi kamu bisa benar-benar paham cara kerja kodenya. Selain itu:

  • Desain mode gelap bikin tampilannya elegan.
  • Kamu bisa belajar cara membuat grid (papan catur) dengan CSS Grid.
  • Kode JavaScript-nya simpel dan hanya untuk memindahkan buah catur secara manual, jadi cocok untuk belajar dasar-dasar interaktivitas.

🧱 1. Kode HTML: Struktur Dasar Game

HTML kita hanya perlu menyiapkan wadah untuk papan catur.

💡 Penjelasan:

  • <div id="chessboard"> adalah tempat di mana papan catur akan ditampilkan secara dinamis oleh JavaScript.
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <title>Game Catur Dark Mode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="chessboard"></div>
  <script src="script.js"></script>
</body>
</html>

🎨 2. Kode CSS: Tampilan Dark Mode yang Keren

CSS ini bikin papan catur tampil menarik dengan warna gelap dan efek neon lembut.

💡 Penjelasan:

  • #chessboard diatur pakai CSS Grid 8x8.
  • Warna kotak catur dibedakan dengan class .dark dan .light.
body {
  margin: 0;
  background: #121212;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#chessboard {
  display: grid;
  grid-template-columns: repeat(8, 60px);
  grid-template-rows: repeat(8, 60px);
  box-shadow: 0 0 10px #0ff;
}

.square {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  cursor: pointer;
}

.dark {
  background-color: #333;
}

.light {
  background-color: #eee;
  color: black;
}

⚙️ 3. Kode JavaScript: Logika Dasar Catur

JS-nya mengatur isi papan dan logika memindahkan buah catur (belum pakai aturan resmi catur).

💡 Penjelasan:

  • board[] adalah array yang menyimpan posisi awal buah catur.
  • Klik satu petak untuk memilih buah catur, klik petak lain untuk memindahkan.
const pieces = {
  r: "♜", n: "♞", b: "♝", q: "♛", k: "♚", p: "♟",
  R: "♖", N: "♘", B: "♗", Q: "♕", K: "♔", P: "♙"
};

const board = [
  "rnbqkbnr",
  "pppppppp",
  "........",
  "........",
  "........",
  "........",
  "PPPPPPPP",
  "RNBQKBNR"
];

let selected = null;

function createBoard() {
  const container = document.getElementById("chessboard");
  container.innerHTML = "";

  for (let row = 0; row < 8; row++) {
    for (let col = 0; col < 8; col++) {
      const square = document.createElement("div");
      square.classList.add("square");

      const isDark = (row + col) % 2 === 1;
      square.classList.add(isDark ? "dark" : "light");

      const piece = board[row][col];
      if (piece !== ".") {
        square.textContent = pieces[piece];
      }

      square.dataset.row = row;
      square.dataset.col = col;

      square.addEventListener("click", () => handleClick(row, col));
      container.appendChild(square);
    }
  }
}

function handleClick(row, col) {
  if (selected) {
    const [fromRow, fromCol] = selected;
    board[row] = board[row].substring(0, col) + board[fromRow][fromCol] + board[row].substring(col + 1);
    board[fromRow] = board[fromRow].substring(0, fromCol) + "." + board[fromRow].substring(fromCol + 1);
    selected = null;
  } else {
    if (board[row][col] !== ".") {
      selected = [row, col];
    }
  }

  createBoard();
}

createBoard();

🏁 Penutup

Nah, itu dia cara membuat game catur dark mode dengan HTML, CSS, dan JavaScript dari nol. Walaupun belum sepenuhnya sesuai aturan catur, game ini sudah cukup keren untuk latihan logika dan tampilan. Cocok juga buat portofolio atau ditambahin fitur lain seperti timer, giliran pemain, bahkan AI nanti.

Selamat ngoding dan semoga makin jago! ♟️

Komentar

Posting Komentar