🎮 Game Whack-A-Mole Glow in the Dark: Bisa Atur Kecepatan dan Ada Timer Real-Time!

Whack-A-Mole adalah salah satu game klasik yang sangat digemari. Kini, game ini hadir dalam versi modern berbasis web, yang tidak hanya menyala dalam gelap tapi juga memungkinkan pemain memilih kecepatan permainan dan memiliki hitungan mundur real-time.

✨ Fitur Unggulan

✅ Tampilan glow in the dark yang memanjakan mata

✅ Lingkaran simetris dan proporsional

✅ Pilihan kecepatan game: Lambat, Normal, dan Cepat

✅ Skor menyesuaikan kecepatan: semakin cepat, semakin besar poinnya

✅ Timer real-time selama 30 detik — berhenti otomatis

✅ Tampilan skor dan waktu langsung berubah saat bermain

🔧 Cara Kerja Game

Game ini dibuat menggunakan tiga teknologi utama:

HTML untuk struktur

CSS untuk desain menyala

JavaScript untuk logika interaktif seperti skor, kecepatan, dan timer

💻 Kode Lengkap

1. `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Whack-A-Mole</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>✨ Whack-a-Mole Glow Edition ✨</h1>

  <div class="controls">
    <label for="speed">Speed:</label>
    <select id="speed">
      <option value="1500">🐢 Slow</option>
      <option value="1000" selected>⚖️ Normal</option>
      <option value="600">🐇 Fast</option>
    </select>
    <button onclick="startGame()">Start Game</button>
  </div>

  <div class="scoreboard">
    <p id="score">Score: 0</p>
    <p id="timer">Waktu: 30 detik</p>
  </div>

  <div class="game-container">
    <div class="grid">
      <div class="hole"></div>
      <div class="hole"></div>
      <div class="hole"></div>
      <div class="hole"></div>
      <div class="hole"></div>
      <div class="hole"></div>
      <div class="hole"></div>
      <div class="hole"></div>
      <div class="hole"></div>
    </div>
  </div>

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

2. `style.css`

body {
  background-color: #0d0d0d;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 3em;
  text-shadow: 0 0 15px #0ff;
  margin: 20px 0;
}

.controls {
  margin-top: 10px;
}

select, button {
  padding: 10px;
  margin: 5px;
  font-size: 1em;
  border-radius: 8px;
  border: none;
  background-color: #222;
  color: #0ff;
  box-shadow: 0 0 10px #0ff;
  cursor: pointer;
}

select:focus, button:hover {
  outline: none;
  box-shadow: 0 0 15px #00ffff, 0 0 25px #00ffff;
}

.scoreboard {
  margin-top: 10px;
  font-size: 1.5em;
  text-shadow: 0 0 10px #0ff;
}

.game-container {
  max-width: 700px;
  margin: auto;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.hole {
  background-color: #222;
  width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 20px #444;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.2s;
  margin: auto;
}

.hole.active {
  background: radial-gradient(circle, #00ffcc 0%, #007777 100%);
  box-shadow: 0 0 25px #00ffcc, 0 0 40px #00ffcc;
  animation: pop 0.3s ease-in-out;
}

@keyframes pop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

3. `script.js`

const holes = document.querySelectorAll('.hole');
    const scoreDisplay = document.getElementById('score');
    const timerDisplay = document.getElementById('timer');

    let score = 0;
    let activeHole = null;
    let gameInterval;
    let timerInterval;
    let gameTimeout;
    let endTime;

    function randomHole() {
      if (activeHole !== null) {
        holes[activeHole].classList.remove('active');
      }
      const index = Math.floor(Math.random() * holes.length);
      activeHole = index;
      holes[index].classList.add('active');
    }

    holes.forEach((hole, index) => {
      hole.addEventListener('click', () => {
        if (index === activeHole) {
          score++;
          scoreDisplay.textContent = `Score: ${score}`;
          holes[index].classList.remove('active');
          activeHole = null;
        }
      });
    });

    function updateTimer() {
      const remaining = Math.max(0, Math.ceil((endTime - Date.now()) / 1000));
      timerDisplay.textContent = `Waktu: ${remaining} detik`;
    }

    function endGame() {
      clearInterval(gameInterval);
      clearInterval(timerInterval);
      clearTimeout(gameTimeout);
      holes.forEach(h => h.classList.remove('active'));
      activeHole = null;
      alert(`⏰ Waktu Habis!\nSkor Akhirmu: ${score}`);
    }

    function startGame() {
      clearInterval(gameInterval);
      clearInterval(timerInterval);
      clearTimeout(gameTimeout);
      holes.forEach(h => h.classList.remove('active'));

      score = 0;
      scoreDisplay.textContent = `Score: ${score}`;
      activeHole = null;

      const speed = 1000; // Contoh, kecepatan 1000ms
      gameInterval = setInterval(randomHole, speed);

      const duration = 30;
      endTime = Date.now() + duration * 1000;

      updateTimer(); // update timer langsung saat start
      timerInterval = setInterval(updateTimer, 100);

      gameTimeout = setTimeout(endGame, duration * 1000);
    }

🚀 Kesimpulan

Game ini cocok untuk kamu yang ingin:

Belajar coding sambil bersenang-senang

Menguji refleks dengan tantangan cepat

Menikmati efek visual yang keren di layar gelap

Kamu bisa menjalankan game ini langsung dari browser tanpa perlu instal apa pun. Cukup salin ketiga file (HTML, CSS, JS) ke folder dan buka file HTML-nya.

CandraAndiP

Cari Blog Ini