🎮 Bikin Game Tebak Angka Acak Sendiri Pakai HTML, CSS, dan JavaScript!

1. Pembuka: "Tebak-tebakan Seru, Buatan Sendiri!"

Pernah main game tebak angka? Nah, kali ini kita bakal bikin versi sederhananya sendiri hanya dengan HTML, CSS, dan JavaScript!

Cocok banget buat kamu yang lagi belajar ngoding dan pengen bikin project kecil tapi tetap seru dan menantang.

Game ini akan meminta pemain untuk menebak angka antara 1 sampai 100. Kalau tebakan terlalu kecil atau terlalu besar, akan ada petunjuknya. Dan tentu saja, tampilannya dibuat kece dalam mode gelap, biar makin kekinian!

2. Kenapa Game Ini Menarik untuk Dibuat?

✨ Cocok untuk Pemula — Struktur kodenya simpel dan mudah dipahami

🎯 Melatih Logika — Game ini mengajarkan kita cara kerja perbandingan dan logika

🎨 Bisa Dimodifikasi — Mau ditambah level? Timer? Efek suara? Semua bisa!

🌙 Dark Mode — Tampilannya udah keren, gak monoton!

3. Yuk Kita Bedah Kodenya Satu per Satu

🔤 HTML: Struktur Dasar Game

HTML berfungsi sebagai kerangka dasar tampilan. Di dalamnya ada input angka, tombol tebak, pesan, dan tombol untuk main ulang.

💻 Kode HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Game Angka Acak</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>🎲 Tebak Angka Rahasia</h1>
    <p class="description">Tebak angka dari 1 sampai 100!</p>

    <div class="input-area">
      <input type="number" id="guessInput" placeholder="Masukkan angka..." />
      <button id="guessButton">Tebak!</button>
    </div>

    <p id="message"></p>
    <p id="tries">Percobaan: <span id="attemptCount">0</span></p>
    <button id="resetButton">🔄 Main Lagi</button>
  </div>

  <!-- Suara -->
  <audio id="successSound" src="https://cdn.pixabay.com/audio/2022/03/15/audio_30416d7b1f.mp3"></audio>
  <audio id="failSound" src="https://cdn.pixabay.com/audio/2022/03/16/audio_86321f8cf2.mp3"></audio>

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

📌 Penjelasan Singkat:

<input>: tempat kita memasukkan angka tebakan

<button>: tombol untuk melakukan tebak dan reset

<p>: menampilkan pesan dan jumlah percobaan

<audio>: untuk efek suara saat benar atau salah

🎨 CSS: Tampilannya Biar Keren dan Gelap

CSS digunakan agar game ini tampil kece, gelap, dan punya nuansa modern dengan efek neon.

💻 Kode CSS

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

.container {
  text-align: center;
  background-color: #1a1a1a;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
  width: 90%;
  max-width: 400px;
}

h1 {
  font-size: 2rem;
  color: #00ffe7;
  margin-bottom: 10px;
}

.description {
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: #cccccc;
}

.input-area {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 15px;
}

input[type="number"] {
  padding: 10px;
  width: 120px;
  font-size: 16px;
  border-radius: 10px;
  border: none;
  background-color: #2a2a2a;
  color: #fff;
  text-align: center;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  background-color: #00ffc8;
  color: #000;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: #00bfa6;
}

#message {
  margin-top: 15px;
  font-size: 18px;
  min-height: 24px;
}

#tries {
  margin-top: 10px;
  font-size: 16px;
  color: #bbbbbb;
}

.success {
  color: #00ff88;
  animation: pulse 0.8s infinite alternate;
}

.fail {
  color: #ff5c5c;
}

@keyframes pulse {
  from {
    text-shadow: 0 0 5px #00ff88;
  }
  to {
    text-shadow: 0 0 20px #00ff88;
  }
}

📌 Penjelasan Singkat:

Warna dominan gelap (#0f0f0f) bikin nyaman di mata

Efek pulse bikin teks menang jadi hidup

Button punya hover transition biar terasa modern

⚙️ JavaScript: Logika Permainan

Di sinilah semua aksi terjadi! JavaScript menentukan angka acak, membandingkan input, dan memberi respon (menang/kalah).

💻 Kode JavaScript

let randomNumber;
let attemptCount = 0;

const guessInput = document.getElementById('guessInput');
const guessButton = document.getElementById('guessButton');
const resetButton = document.getElementById('resetButton');
const message = document.getElementById('message');
const attemptDisplay = document.getElementById('attemptCount');
const successSound = document.getElementById('successSound');
const failSound = document.getElementById('failSound');

function generateRandomNumber() {
  randomNumber = Math.floor(Math.random() * 100) + 1;
  attemptCount = 0;
  attemptDisplay.textContent = attemptCount;
  message.textContent = '';
  message.className = '';
  guessInput.disabled = false;
  guessButton.disabled = false;
  guessInput.value = '';
}

guessButton.addEventListener('click', () => {
  const guess = Number(guessInput.value);

  if (!guess || guess < 1 || guess > 100) {
    message.textContent = 'Masukkan angka valid antara 1 - 100!';
    message.className = 'fail';
    failSound.play();
    return;
  }

  attemptCount++;
  attemptDisplay.textContent = attemptCount;

  if (guess === randomNumber) {
    message.textContent = `🎉 Hebat! Angkanya adalah ${randomNumber}.`;
    message.className = 'success';
    guessInput.disabled = true;
    guessButton.disabled = true;
    successSound.play();
  } else if (guess < randomNumber) {
    message.textContent = '📉 Terlalu rendah!';
    message.className = 'fail';
    failSound.play();
  } else {
    message.textContent = '📈 Terlalu tinggi!';
    message.className = 'fail';
    failSound.play();
  }
});

resetButton.addEventListener('click', generateRandomNumber);

generateRandomNumber();

📌 Penjelasan Singkat:

Math.floor(Math.random() * 100) + 1: untuk membuat angka acak 1–100

Cek apakah angka yang ditebak terlalu kecil, terlalu besar, atau pas

Main ulang akan mereset angka dan tampilan

Penutup

Game ini bisa jadi latihan asyik untuk kamu yang sedang belajar JavaScript. Tinggal buka editor, salin kode ke tiga file (index.html, style.css, script.js), dan jalankan di browser — tadaa, gamenya langsung jalan!

CandraAndiP

Cari Blog Ini