🎮 Shadow Dodger: Game HTML Sederhana dengan Tampilan Keren dan Mode Gelap

Shadow Dodger adalah game sederhana berbasis HTML, CSS, dan JavaScript yang dapat dijalankan langsung di browser tanpa instalasi. Meskipun sederhana, game ini hadir dengan tampilan mode gelap yang menarik, efek neon modern, dan gameplay yang adiktif: hindari rintangan dan kumpulkan skor setinggi mungkin.

✨ Fitur Utama Game

Mode Gelap & Tampilan Neon
- Desain game menggunakan warna gelap dan aksen neon biru cerah, menciptakan suasana futuristik yang nyaman di mata.

Kontrol Mudah
- Gunakan tombol panah ← dan → pada keyboard untuk menggerakkan karakter ke kiri dan kanan.

Rintangan Dinamis
- Rintangan muncul dari atas layar dan jatuh ke bawah secara acak, membuat pemain harus terus waspada.

Skor Real-time
- Skor ditampilkan langsung di dalam area permainan. Setiap rintangan yang berhasil dihindari akan menambah skor.

Tombol Play / Pause
- Pemain dapat menjeda dan melanjutkan permainan kapan saja dengan satu klik tombol.

🛠 Teknologi yang Digunakan

HTML5: Untuk struktur dasar game.

CSS3: Untuk gaya visual, termasuk mode gelap dan efek neon.

JavaScript: Untuk logika game, kontrol pemain, deteksi tabrakan, dan pergerakan rintangan.

🧠 Tujuan Game

Tujuan dari Shadow Dodger sangat sederhana: hindari semua rintangan selama mungkin dan raih skor tertinggi. Jika karakter menyentuh rintangan, permainan akan berakhir secara otomatis dan skor akan ditampilkan.

👨‍💻 Siapa yang Cocok Bermain?

Pelajar yang ingin belajar dasar pembuatan game menggunakan web.

Developer pemula yang ingin memahami logika interaktif di JavaScript.

Siapa saja yang ingin bermain game ringan tanpa perlu mengunduh aplikasi.

🔧 Cara Menjalankan

Simpan file index.html, style.css, dan script.js di satu folder.

Buka file index.html menggunakan browser seperti Chrome atau Firefox.

Mainkan langsung tanpa perlu server atau internet.

🧩 HTML `index.html`

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shadow Dodger</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Shadow Dodger</h1>
    <div id="gameArea">
      <div id="score">Score: 0</div>
      <div id="player"></div>
    </div>
    <button id="playPauseBtn">⏸ Pause</button>

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

🎨 CSS3 `style.css`

body {
  margin: 0;
  padding: 0;
  background: #0d0d0d;
  color: #00ffff;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-top: 20px;
  text-shadow: 0 0 10px #00ffff;
}

#gameArea {
  width: 300px;
  height: 500px;
  border: 2px solid #00ffff;
  position: relative;
  overflow: hidden;
  background: #111;
  box-shadow: 0 0 20px #00ffffaa;
  margin: 20px 0;
}

#player {
  width: 30px;
  height: 30px;
  background-color: #00f7ff;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: 135px;
  box-shadow: 0 0 10px #00f7ff;
}

.obstacle {
  width: 30px;
  height: 30px;
  background-color: #222;
  position: absolute;
  top: 0;
  animation: fall 3s linear forwards;
}

@keyframes fall {
  to {
    top: 500px;
  }
}

#score {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 18px;
  color: #0ff;
  text-shadow: 0 0 5px #0ff;
  z-index: 2;
}

#playPauseBtn {
  background-color: #00ffff;
  color: #000;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px #00ffff88;
  cursor: pointer;
  transition: all 0.2s ease;
}

#playPauseBtn:hover {
  background-color: #00bbbb;
  box-shadow: 0 0 15px #00ffffaa;
}

🧠 JavaScript `script.js`

const player = document.getElementById("player");
const gameArea = document.getElementById("gameArea");
const scoreText = document.getElementById("score");
const playPauseBtn = document.getElementById("playPauseBtn");

let score = 0;
let isGameOver = false;
let isPaused = false;
let obstacleInterval = null;
let obstacles = [];

// Gerak pemain
document.addEventListener("keydown", (e) => {
  if (isGameOver || isPaused) return;
  const left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
  if (e.key === "ArrowLeft" && left > 0) {
    player.style.left = left - 30 + "px";
  }
  if (e.key === "ArrowRight" && left < 270) {
    player.style.left = left + 30 + "px";
  }
});

// Deteksi tabrakan
function isColliding(a, b) {
  const aRect = a.getBoundingClientRect();
  const bRect = b.getBoundingClientRect();
  return !(
    aRect.top > bRect.bottom ||
    aRect.bottom < bRect.top ||
    aRect.right < bRect.left ||
    aRect.left > bRect.right
  );
}

// Buat rintangan
function createObstacle() {
  if (isGameOver || isPaused) return;

  const obstacle = document.createElement("div");
  obstacle.classList.add("obstacle");
  obstacle.style.left = Math.floor(Math.random() * 10) * 30 + "px";
  gameArea.appendChild(obstacle);
  obstacles.push({ element: obstacle, top: 0 });

  moveObstacle(obstacle);
}

// Gerakkan rintangan
function moveObstacle(obstacle) {
  const move = setInterval(() => {
    if (isGameOver || isPaused) {
      clearInterval(move);
      return;
    }

    let top = parseInt(obstacle.style.top || "0");
    top += 4;
    obstacle.style.top = top + "px";

    if (top > 470) {
      clearInterval(move);
      obstacle.remove();
      if (!isGameOver) {
        score++;
        scoreText.textContent = "Score: " + score;
      }
    }

    if (isColliding(player, obstacle)) {
      clearInterval(move);
      gameOver();
    }
  }, 20);
}

// Game over
function gameOver() {
  isGameOver = true;
  alert("Game Over!\nSkor kamu: " + score);
  location.reload();
}

// Play / Pause tombol
playPauseBtn.addEventListener("click", () => {
  if (isGameOver) return;

  isPaused = !isPaused;
  playPauseBtn.textContent = isPaused ? "▶️ Play" : "⏸ Pause";

  if (!isPaused) {
    // Lanjutkan interval rintangan
    if (!obstacleInterval) {
      obstacleInterval = setInterval(createObstacle, 1000);
    }
  }
});

// Mulai game
obstacleInterval = setInterval(createObstacle, 1000);

📈 Potensi Pengembangan

Game ini bisa dikembangkan lebih lanjut dengan menambahkan:

Level atau kecepatan bertambah seiring skor naik.

Musik latar dan efek suara.

Tampilan skor tertinggi (high score).

Animasi atau efek khusus saat tabrakan.

🎉 Penutup

Shadow Dodger adalah bukti bahwa game seru tidak harus rumit. Dengan hanya menggunakan HTML, CSS, dan JavaScript, kamu sudah bisa membuat dan memainkan game menarik yang bisa dinikmati semua kalangan.

CandraAndiP

Cari Blog Ini