🎮 Membuat Game Maze Mode Gelap dengan HTML, CSS, dan JavaScript

1. Pengantar: "Game Kecil, Seru Banget!"

Halo teman-teman! 👋

Di artikel (atau video) kali ini, kita bakal belajar bikin game Maze (labirin) sederhana menggunakan HTML, CSS, dan JavaScript. Tenang aja, meskipun kamu masih pemula, kamu pasti bisa ngikutin, karena semua dijelaskan langkah demi langkah.

Game ini pakai mode gelap yang elegan biar tampilannya kece, dan pemain bisa menggerakkan karakter dengan tombol arah (panah). Kita juga sudah bikin jalurnya lebih menantang, cocok buat ngasah logika!

Yuk mulai!

2. Manfaat Proyek Ini

Kenapa bikin game seperti ini itu berguna?

🎯 Melatih logika pemrograman (khususnya koordinat dan grid)

🎨 Belajar ngatur tampilan pakai CSS Grid dan dark mode

🕹️ Bisa dijadikan proyek portofolio sederhana

🧠 Dan yang pasti: nambah skill JavaScript kamu!

3. Penjelasan Kode Secara Bertahap

Kita akan bahas kodenya satu per satu:

HTML untuk struktur game

CSS untuk tampilan

JavaScript untuk logika permainannya

🧱 A. Kode HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Maze Game - Dark Mode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="maze-container">
    <div class="maze" id="maze"></div>
    <p class="status" id="status">Use arrow keys to move the block 🧱</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

✨ Penjelasan:

<div class="maze"> adalah area labirin.

ID maze dipakai oleh JavaScript untuk menggambar kotak-kotaknya.

<p class="status"> digunakan untuk menampilkan pesan (misalnya: menang!).

Semua gaya ada di style.css dan logikanya di script.js.

🎨 B. Kode CSS (Tampilan Mode Gelap Elegan)

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

.maze-container {
  text-align: center;
}

.maze {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: repeat(10, 40px);
  gap: 2px;
  margin-bottom: 20px;
}

.cell {
  width: 40px;
  height: 40px;
  background-color: #1a1a1a;
  border: 1px solid #333;
  transition: background 0.2s;
}

.wall {
  background-color: #444;
}

.player {
  background-color: #4caf50;
  box-shadow: 0 0 8px #4caf50;
}

.goal {
  background-color: #f44336;
  box-shadow: 0 0 8px #f44336;
}

.status {
  font-size: 1rem;
  color: #888;
}

✨ Penjelasan:

Warna dasar gelap (#0f0f0f) memberi kesan elegan dan modern.

Setiap cell adalah kotak kecil di dalam grid.

wall = dinding / tidak bisa dilewati.

player = posisi pemain (warna hijau).

goal = tujuan akhir (warna merah).

🧠 C. Kode JavaScript (Logika Permainan)

const mazeElement = document.getElementById("maze");
const statusText = document.getElementById("status");

const width = 10;
const height = 10;

// Simple 0 = path, 1 = wall
const mazeLayout = [
  0,1,1,1,1,1,1,1,1,1,
  0,0,0,0,0,1,1,1,1,1,
  1,1,1,1,0,1,0,0,0,1,
  1,0,0,1,0,1,0,1,0,1,
  1,0,1,1,0,0,0,1,0,1,
  1,0,1,0,0,1,1,1,0,1,
  1,0,1,1,1,1,0,0,0,1,
  1,0,0,0,0,0,0,1,1,1,
  1,1,1,1,1,1,0,1,1,1,
  1,1,1,1,1,1,0,0,0,0
];


const playerPosition = { x: 0, y: 0 };
const goalPosition = { x: 9, y: 9 };

function createMaze() {
  mazeElement.innerHTML = "";
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const div = document.createElement("div");
      div.classList.add("cell");
      if (mazeLayout[y * width + x] === 1) div.classList.add("wall");
      if (x === playerPosition.x && y === playerPosition.y) div.classList.add("player");
      if (x === goalPosition.x && y === goalPosition.y) div.classList.add("goal");
      mazeElement.appendChild(div);
    }
  }
}

function movePlayer(dx, dy) {
  const newX = playerPosition.x + dx;
  const newY = playerPosition.y + dy;
  if (
    newX >= 0 && newX < width &&
    newY >= 0 && newY < height &&
    mazeLayout[newY * width + newX] === 0
  ) {
    playerPosition.x = newX;
    playerPosition.y = newY;
    createMaze();
    if (playerPosition.x === goalPosition.x && playerPosition.y === goalPosition.y) {
      statusText.textContent = "🎉 You reached the goal!";
    }
  }
}

document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowUp": movePlayer(0, -1); break;
    case "ArrowDown": movePlayer(0, 1); break;
    case "ArrowLeft": movePlayer(-1, 0); break;
    case "ArrowRight": movePlayer(1, 0); break;
  }
});

createMaze();

✨ Penjelasan:

mazeLayout adalah peta maze dalam bentuk array 1 dimensi. Nilai 0 artinya jalan, 1 adalah tembok.

Pemain mulai dari (0,0), dan harus mencapai (9,9).

Fungsi createMaze() menggambar maze berdasarkan data array.

Pemain bisa digerakkan dengan ArrowUp, ArrowDown, dll.

Saat pemain sampai ke goal, muncul pesan kemenangan 🎉

Penutup: Yuk Coba dan Kembangkan Sendiri!

Sekarang kamu sudah punya game maze sendiri yang tampilannya keren dan logikanya jalan! 🎮

Kamu bisa mengembangkan ini lebih lanjut dengan:

Menambahkan timer dan skor

Level yang berbeda-beda

Maze yang dibuat secara acak

Suara efek saat bergerak

Semua dimulai dari hal kecil seperti ini. Jadi, terus eksplorasi dan upgrade game kamu! 🚀

Kalau kamu suka konten ini, jangan lupa:

👍 Like

💬 Komentar

📌 Save

🔔 Subscribe (kalau di YouTube)

Semangat belajar coding! 💻✨

CandraAndiP

Cari Blog Ini