🎮 Game Zona Aman dengan HTML, CSS, dan JavaScript

1. Pembuka yang Menarik

Pernah nggak sih kamu main game sederhana tapi bikin geregetan? Nah, kali ini kita bakal bikin game Zona Aman—di mana kamu harus menjaga kursor tetap berada di dalam kotak yang terus bergerak. Kalau keluar? Tenang, kamu masih punya 5 detik buat balik. Tapi kalau nggak cepat, Game Over! 🎯

Game ini kita bangun pakai HTML, CSS, dan JavaScript, tanpa library tambahan. Cocok banget buat kamu yang masih pemula tapi pengen belajar bikin game interaktif berbasis web.

2. Manfaat dan Kegunaan Proyek Ini

Kenapa game ini keren buat dipelajari?

✅ Melatih logika dan event handling di JavaScript

✅ Belajar animasi dan positioning di CSS

✅ Cocok dijadikan portofolio interaktif

✅ Bisa di-custom jadi game mouse-skill atau reflex training

3. Penjelasan Kode

🧱 A. Kode HTML

HTML digunakan untuk menyusun struktur dasar dari game ini. Kita punya bagian judul, status, dan area permainan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Zona Aman</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="header">
    <h1>Zona Aman</h1>
    <div id="info">
      <span id="level">Level: 1</span>
      <span id="status">Status: Bertahan</span>
    </div>
  </div>

  <div id="game-container">
    <div id="safe-zone"></div>
  </div>

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

Penjelasan:

#header menampilkan judul dan info status

#game-container jadi area main game

#safe-zone adalah kotak yang harus kita jaga

🎨 B. Kode CSS

CSS digunakan untuk membuat tampilan gelap dan kontras, serta mengatur posisi dan gaya elemen.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0a0a0a;
  font-family: Arial, sans-serif;
  color: #ffffff;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #111;
  padding: 10px 0;
  text-align: center;
  border-bottom: 2px solid #333;
  z-index: 1000;
}

#header h1 {
  color: #00ffff;
  margin-bottom: 5px;
  font-size: 28px;
}

#info {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 18px;
}

#level {
  color: #ffff00;
}

#status {
  color: #00ffcc;
  font-weight: bold;
}

#game-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 80px; /* Supaya zona aman tidak tertutup header */
}

#safe-zone {
  width: 150px;
  height: 150px;
  background-color: #00ff00;
  border: 5px dashed #ffff00;
  position: absolute;
  transition: top 0.5s linear, left 0.5s linear;
  cursor: none;
}

Penjelasan:

Warna gelap membuat elemen kontras lebih terlihat

#safe-zone punya animasi posisi agar bergerak mulus

#header tetap di atas saat zona aman bergerak

⚙️ C. Kode JavaScript

JavaScript mengatur logika gerakan zona aman, level, dan countdown saat pemain keluar dari zona.

const safeZone = document.getElementById("safe-zone");
const statusText = document.getElementById("status");
const levelText = document.getElementById("level");

let isInside = false;
let level = 1;
let speed = 1000;
let gameOver = false;
let timer;
let countdownTimer;
let countdown = 5;

function moveSafeZone() {
  if (gameOver) return;
  const maxX = window.innerWidth - safeZone.offsetWidth;
  const maxY = window.innerHeight - safeZone.offsetHeight - 80; // dikurangi header
  const newX = Math.random() * maxX;
  const newY = 80 + Math.random() * maxY;

  safeZone.style.left = `${newX}px`;
  safeZone.style.top = `${newY}px`;
}

function nextLevel() {
  if (gameOver) return;
  level++;
  levelText.textContent = `Level: ${level}`;
  statusText.textContent = "Level naik!";
  statusText.style.color = "#00ffcc";
  speed = Math.max(300, speed - 100);
  clearInterval(timer);
  timer = setInterval(moveSafeZone, speed);
}

function startCountdown() {
  countdown = 5;
  statusText.textContent = `Keluar! Kembali dalam ${countdown} detik!`;
  statusText.style.color = "#ffcc00";

  countdownTimer = setInterval(() => {
    countdown--;
    if (isInside) {
      clearInterval(countdownTimer);
      statusText.textContent = "Status: Aman";
      statusText.style.color = "#00ffcc";
      return;
    }

    if (countdown > 0) {
      statusText.textContent = `Keluar! Kembali dalam ${countdown} detik!`;
    } else {
      clearInterval(countdownTimer);
      gameOver = true;
      statusText.textContent = "Game Over! Kamu tidak kembali tepat waktu.";
      statusText.style.color = "#ff3333";
      safeZone.style.backgroundColor = "#880000";
      clearInterval(timer);
    }
  }, 1000);
}

safeZone.addEventListener("mouseenter", () => {
  isInside = true;
  statusText.textContent = "Status: Aman";
  statusText.style.color = "#00ffcc";
});

safeZone.addEventListener("mouseleave", () => {
  if (!gameOver) {
    isInside = false;
    startCountdown();
  }
});

// Mulai permainan
moveSafeZone();
timer = setInterval(moveSafeZone, speed);
setInterval(() => {
  if (!gameOver) nextLevel();
}, 10000);

Penjelasan:

Zona aman bergerak setiap beberapa detik

Pemain naik level setiap 10 detik

Countdown 5 detik aktif jika pemain keluar dari kotak

Pemain kalah jika tak kembali dalam waktu tersebut

Penutup

Game ini adalah contoh sempurna bahwa kamu bisa bikin game seru dan interaktif hanya dengan HTML, CSS, dan JavaScript tanpa framework. Tinggal kembangkan ide-ide lain: tambahkan skor, suara, atau efek animasi! 👨‍💻🔥

CandraAndiP

Cari Blog Ini