🎮 Game Tebak Angka Neon: Tantangan Seru dengan Tampilan Mode Gelap yang Keren!

🧠 Penjelasan Kode Game Tebak Angka Neon (HTML, CSS, JavaScript)

Game Tebak Angka Neon adalah permainan sederhana berbasis web yang menantang pemain untuk menebak angka secara acak antara 1 hingga 100. Meskipun sederhana, game ini sudah dilengkapi dengan tampilan modern bergaya neon dalam mode gelap dan logika JavaScript interaktif.

📁 Struktur File

Game ini terdiri dari tiga file utama:

index.html → struktur tampilan game

style.css → desain visual dengan mode gelap dan efek neon

script.js → logika permainan dan interaksi pengguna

🧩 1. File `index.html`

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>🎯 Tebak Angka Neon</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="game-container">
    <h1>🎯 Tebak Angka</h1>
    <p class="description">Tebak angka rahasia antara <strong>1 - 100</strong></p>
    <input type="number" id="guessInput" placeholder="Masukkan angka..." />
    <button onclick="checkGuess()">Tebak</button>
    <p id="message"></p>
    <button onclick="resetGame()" class="reset">🔄 Main Lagi</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

✨ Penjelasan:

<input> untuk memasukkan angka tebakan

Tombol Tebak menjalankan fungsi checkGuess() dari JavaScript

Bagian <p id="message"> digunakan untuk menampilkan hasil tebakan

Tombol Main Lagi menjalankan fungsi resetGame() untuk memulai ulang

🎨 2. File `style.css`

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

body {
  background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
  color: #00ffcc;
  font-family: 'Orbitron', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.game-container {
  background-color: rgba(20, 20, 20, 0.95);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 0 25px #00ffcc, 0 0 10px #00ffaa inset;
  text-align: center;
  width: 90%;
  max-width: 420px;
  animation: fadeIn 1.2s ease-out;
}

h1 {
  font-size: 2.2rem;
  color: #00ffee;
  text-shadow: 0 0 10px #00ffee;
}

.description {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #dddddd;
}

input[type="number"] {
  padding: 0.7rem;
  font-size: 1rem;
  width: 80%;
  margin-top: 0.5rem;
  background-color: #222;
  color: #00ffcc;
  border: 2px solid #00ffaa;
  border-radius: 8px;
  outline: none;
  text-align: center;
  box-shadow: 0 0 5px #00ffaa inset;
}

button {
  margin-top: 1.2rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  background-color: #00c896;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 0 10px #00ffaa, 0 0 5px #00ffaa inset;
}

button:hover {
  background-color: #00a77e;
  box-shadow: 0 0 15px #00ffcc, 0 0 7px #00ffaa inset;
}

.reset {
  background-color: #333;
  margin-top: 1rem;
  color: #fff;
}

.reset:hover {
  background-color: #555;
}

#message {
  margin-top: 1.2rem;
  font-size: 1.2rem;
  color: #ffea00;
  min-height: 1.5rem;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

✨ Penjelasan:

Menggunakan mode gelap dengan warna latar belakang gelap dan efek gradasi

Font futuristik Orbitron dari Google Fonts

Efek neon ditambahkan melalui box-shadow di container dan tombol

Input dan tombol dibuat menarik dengan warna menyala, transisi halus, dan hover effect

⚙️ 3. File `script.js`

let targetNumber = Math.floor(Math.random() * 100) + 1;

function checkGuess() {
  const input = document.getElementById('guessInput');
  const guess = parseInt(input.value);
  const message = document.getElementById('message');

  if (isNaN(guess)) {
    message.textContent = "⚠️ Masukkan angka yang valid!";
    return;
  }

  if (guess < 1 || guess > 100) {
    message.textContent = "📏 Angka harus antara 1 dan 100!";
    return;
  }

  if (guess === targetNumber) {
    message.textContent = `🎉 Tepat! Angkanya ${targetNumber}`;
    message.style.color = "#00ff00";
  } else if (guess < targetNumber) {
    message.textContent = "🔼 Terlalu rendah!";
    message.style.color = "#ffae00";
  } else {
    message.textContent = "🔽 Terlalu tinggi!";
    message.style.color = "#ff5e5e";
  }
}

function resetGame() {
  targetNumber = Math.floor(Math.random() * 100) + 1;
  document.getElementById('guessInput').value = '';
  const message = document.getElementById('message');
  message.textContent = '';
  message.style.color = "#ffea00";
}

Program memilih angka acak antara 1 hingga 100 saat pertama kali dimulai

function checkGuess() {
  const guess = parseInt(document.getElementById('guessInput').value);
  ...
}

Fungsi checkGuess() dijalankan saat tombol Tebak ditekan

parseInt() digunakan untuk membaca dan mengubah input menjadi angka

if (guess === targetNumber) {
  message.textContent = `🎉 Tepat! Angkanya ${targetNumber}`;
  ...
} else if (guess < targetNumber) {
  message.textContent = "🔼 Terlalu rendah!";
} else {
  message.textContent = "🔽 Terlalu tinggi!";
}

Logika utama:
- Menampilkan pesan jika tebakan terlalu tinggi, terlalu rendah, atau tepat
- Warna pesan berubah sesuai status tebakan

function resetGame() {
  targetNumber = Math.floor(Math.random() * 100) + 1;
  ...
}

Fungsi resetGame() akan mengatur ulang angka rahasia dan membersihkan input serta pesan

🎮 Alur Permainan

Pemain memasukkan angka tebakan (1–100).

Sistem mengecek angka:
- Jika benar → Menang 🎉
- Jika salah → Diberi petunjuk (lebih tinggi atau lebih rendah)

Pemain bisa klik “Main Lagi” untuk mencoba angka baru

📌 Kesimpulan

Game ini adalah contoh proyek kecil yang sangat cocok untuk:

Belajar JavaScript dasar

Mengerti manipulasi DOM

Latihan membuat UI menarik dengan CSS

Dengan menambahkan sedikit gaya neon dan interaksi, game sederhana bisa berubah menjadi proyek yang menarik dan enak dilihat!

CandraAndiP

Cari Blog Ini