🎮 Bikin Game Tebak Huruf Seru Pakai HTML, CSS, dan JavaScript!

 



Lagi belajar coding dan pengen bikin proyek kecil yang seru? Yuk cobain bikin game Tebak Huruf! Game ini sederhana tapi menyenangkan—kita akan menebak huruf yang dipilih secara acak oleh komputer.

Cuma butuh tiga file: HTML, CSS, dan JavaScript. Kamu bisa mainkan langsung di browser tanpa harus install apa pun!

✨ Kenapa Game Ini Menarik?

Game ini cocok banget buat:

  • Pemula yang belajar JavaScript
  • Melatih logika sederhana dalam coding
  • Eksperimen desain mode gelap (dark mode)
  • Ide proyek buat tugas atau portofolio

Kamu juga bisa kembangkan sendiri: tambahkan suara, level, waktu, atau animasi sesuai kreativitasmu.

🧱 Langkah 1: Kode HTML – Struktur Halaman

HTML adalah pondasi dari game ini. Di dalamnya ada elemen-elemen seperti input huruf, tombol tebak, dan skor.

🔤 Kode:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tebak Huruf</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Tebak Huruf 🔤</h1>
    <p>Komputer sudah memilih sebuah huruf dari A-Z.<br/>Coba tebak huruf apa itu!</p>
    <input type="text" id="inputLetter" maxlength="1" autofocus />
    <button onclick="checkLetter()">Tebak!</button>
    <p id="message"></p>
    <p id="score">Skor: 0</p>
    <button onclick="resetGame()">Main Lagi 🔁</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

📝 Penjelasan:

  • <input> digunakan untuk memasukkan huruf tebakan.
  • Tombol "Tebak!" memanggil fungsi checkLetter().
  • Tombol "Main Lagi" untuk memulai ulang skor dan huruf.

🎨 Langkah 2: Kode CSS – Mode Gelap yang Keren

CSS digunakan untuk mempercantik tampilan game dan memberi nuansa gelap (dark mode).

🧑‍🎨 Kode:

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

.container {
  background-color: #1e1e1e;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,255,255,0.2);
  text-align: center;
  width: 300px;
}

h1 {
  color: #00ffc3;
}

input[type="text"] {
  padding: 10px;
  font-size: 18px;
  width: 60px;
  text-align: center;
  border-radius: 6px;
  border: none;
  margin-top: 10px;
}

button {
  margin-top: 15px;
  padding: 10px 15px;
  font-size: 16px;
  background-color: #00ffc3;
  border: none;
  color: #000;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

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

#message {
  margin-top: 20px;
  font-size: 18px;
}

📝 Penjelasan:

  • Warna latar belakang #121212 memberikan efek gelap.
  • Warna tombol dan teks dibuat kontras agar tetap terbaca jelas.
  • Efek hover bikin tombol terasa lebih hidup saat disentuh.

🧠 Langkah 3: Kode JavaScript – Logika Game

JavaScript berfungsi untuk memilih huruf acak, memeriksa tebakan, menghitung skor, dan reset game.

⚙️ Kode:

let targetLetter = generateRandomLetter();
let score = 0;

function generateRandomLetter() {
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  return letters[Math.floor(Math.random() * letters.length)];
}

function checkLetter() {
  const input = document.getElementById("inputLetter").value.toUpperCase();
  const message = document.getElementById("message");

  if (input === "") {
    message.textContent = "Masukkan sebuah huruf!";
    return;
  }

  if (input === targetLetter) {
    message.textContent = `Benar! Hurufnya adalah ${targetLetter}`;
    score++;
    document.getElementById("score").textContent = "Skor: " + score;
    targetLetter = generateRandomLetter(); // generate huruf baru
  } else {
    message.textContent = `Salah! Coba lagi!`;
  }

  document.getElementById("inputLetter").value = "";
  document.getElementById("inputLetter").focus();
}

function resetGame() {
  score = 0;
  targetLetter = generateRandomLetter();
  document.getElementById("score").textContent = "Skor: 0";
  document.getElementById("message").textContent = "";
  document.getElementById("inputLetter").value = "";
  document.getElementById("inputLetter").focus();
}

📝 Penjelasan:

  • generateRandomLetter() memilih huruf secara acak dari A–Z.
  • checkLetter() membandingkan input user dengan huruf target.
  • Skor bertambah jika benar dan langsung lanjut ke huruf baru.
  • resetGame() mengulang semua dari awal.

🚀 Kesimpulan

Game ini sangat cocok sebagai proyek latihan coding untuk pemula. Selain melatih JavaScript dasar, kamu juga bisa belajar desain dan interaksi antarmuka. Tambahkan fitur baru seperti suara, timer, atau leaderboard untuk pengalaman lebih seru!

Komentar

Posting Komentar