🚗 Bikin Game Balapan Angka Seru dengan HTML, CSS, dan JavaScript




Pernah kepikiran bikin game sendiri cuma pakai HTML, CSS, dan JavaScript? Nah, kali ini kita akan bikin game Balapan Angka — di mana angka-angka muncul dan bergerak, dan kamu harus cepat-cepat klik sebelum mereka kabur!

Game ini tampil dalam mode gelap penuh warna, punya sistem skor otomatis, dan cocok banget buat latihan JavaScript dasar.

🧠 Kenapa Proyek Ini Seru untuk Dipelajari?

Selain seru dimainkan, proyek ini:

  • Cocok banget buat pemula yang ingin belajar logika game sederhana
  • Mengajarkan cara pakai DOM manipulation, event listener, dan animasi CSS
  • Bisa jadi modal awal untuk bikin game web lainnya!

💡 Langkah-Langkah Membuat Game

Kita akan membagi kode jadi 3 bagian:

  1. HTML (struktur halaman)
  1. CSS (tampilan dan animasi)
  1. JavaScript (logika permainannya)

🧱 1. Kode HTML – Struktur Game

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Game Balapan Angka</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>🎮 Game Balapan Angka</h1>
  <div id="info">
    ⏱️ Waktu: <span id="time">30</span> detik |
    🧮 Skor: <span id="score">0</span>
  </div>
  <div id="gameArea"></div>

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

Penjelasan:

  • <h1> untuk judul game
  • <div id="info"> menampilkan waktu dan skor
  • <div id="gameArea"> tempat angka-angka akan muncul
  • <script> menghubungkan file JavaScript kita

🎨 2. Kode CSS – Tampilan & Efek Warna

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #0a0a0a;
  color: #fff;
  overflow: hidden;
}

h1 {
  text-align: center;
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
  margin-top: 10px;
  font-size: 2.5em;
}

#info {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 15px;
}

#gameArea {
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: hidden;
  background: linear-gradient(to right, #1a1a1a, #0f0f0f);
  border-top: 3px solid #00ffff;
  border-bottom: 3px solid #00ffff;
}

.number {
  position: absolute;
  top: calc(10% + (50% * var(--randY))); /* lebih aman agar tidak keluar layar */
  left: 0;
  font-size: 3em;
  font-weight: bold;
  padding: 15px 25px;
  color: #fff;
  background-color: hsl(var(--hue), 80%, 50%);
  border-radius: 12px;
  animation: moveRight 8s linear forwards;
  cursor: pointer;
  box-shadow: 0 0 15px hsl(var(--hue), 80%, 60%);
  user-select: none;
}

.number.clicked {
  background-color: #00ff88 !important;
  box-shadow: 0 0 20px #00ff88;
  transform: scale(1.2);
  transition: 0.2s ease;
}

@keyframes moveRight {
  to {
    left: 100%;
    opacity: 0;
  }
}

Penjelasan:

  • body dan h1: gaya gelap dan warna neon
  • #gameArea: area tempat angka muncul dan bergerak
  • .number: tampilan angka, warna-warni pakai hsl(), dan bergerak dengan @keyframes
  • .clicked: gaya saat angka berhasil diklik (hijau + tanda centang)

⚙️ 3. Kode JavaScript – Logika Permainan

const gameArea = document.getElementById('gameArea');
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');

let score = 0;
let timeLeft = 30;
let gameInterval;

function startGame() {
  score = 0;
  timeLeft = 30;
  scoreDisplay.textContent = score;
  timeDisplay.textContent = timeLeft;

  gameInterval = setInterval(spawnNumber, 1500);

  const timer = setInterval(() => {
    timeLeft--;
    timeDisplay.textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(timer);
      clearInterval(gameInterval);
      alert('⏰ Waktu habis!\nSkor akhir kamu: ' + score);
      gameArea.innerHTML = '';
    }
  }, 1000);
}

function spawnNumber() {
  const number = document.createElement('div');
  const value = Math.floor(Math.random() * 10);
  const hue = Math.floor(Math.random() * 360);
  const randY = Math.random();

  number.textContent = value;
  number.classList.add('number');
  number.style.setProperty('--hue', hue);
  number.style.setProperty('--randY', randY);

  let clicked = false;

  number.addEventListener('click', () => {
    if (!clicked) {
      clicked = true;
      score++;
      scoreDisplay.textContent = score;
      number.classList.add('clicked');
      number.innerHTML = `${value} ✅`;
      setTimeout(() => number.remove(), 500);
    }
  });

  gameArea.appendChild(number);

  setTimeout(() => {
    if (!clicked && gameArea.contains(number)) {
      number.remove();
      score--; // penalti jika tidak diklik
      scoreDisplay.textContent = score;
    }
  }, 8000);
}

window.onload = startGame;

Penjelasan:

  • Fungsi startGame() memulai permainan dan mengatur waktu
  • Fungsi spawnNumber() membuat angka baru dengan posisi acak dan warna berbeda-beda
  • Skor bertambah jika angka diklik, dan berkurang jika angka lewat 8 detik tidak diklik

🎯 Kesimpulan

Game ini sederhana tapi menyenangkan! Kamu bisa memainkannya sendiri atau gunakan sebagai latihan belajar JavaScript. Cocok juga untuk proyek sekolah, portofolio, atau konten edukatif.

Kalau kamu tertarik.


Komentar

Posting Komentar