📘 Membuat Game Tebak Kata Mode Gelap dengan Suara, Timer, dan Level Menggunakan HTML, CSS, dan JavaScript

Ingin belajar membuat game sederhana tapi menarik? Coba buat game Tebak Kata menggunakan HTML, CSS, dan JavaScript! Game ini cocok untuk pemula yang ingin melatih kemampuan web programming sambil bersenang-senang.

🎯 Fitur-Fitur Game:

✅ Mode gelap (dark mode) yang modern

⏱️ Timer otomatis 30 detik per soal

🔊 Suara online saat menjawab benar atau salah

🆙 Level bertambah setiap 3 jawaban benar

💡 Petunjuk soal yang memancing logika

🛠️ Langkah 1: Struktur HTML

File pertama yang perlu dibuat adalah index.html. Di dalam file ini terdapat struktur utama game seperti input, tombol, timer, level, dan skor.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tebak Kata - Mode Gelap</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="container">
    <h1 class="fade-in">🎮 Tebak Kata</h1>
    <p>Level: <span id="level">1</span></p>
    <p>Petunjuk: <span id="hint">...</span></p>
    <p>Sisa waktu: <span id="timer">30</span> detik</p>

    <input type="text" id="inputGuess" placeholder="Tebak katanya..." autocomplete="off" />
    <button onclick="checkAnswer()">Tebak</button>

    <p id="feedback"></p>
    <p id="score">Skor: 0</p>
    <button onclick="nextWord()">Lewati</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

🎨 Langkah 2: Styling CSS Mode Gelap

Gunakan file style.css untuk menciptakan tampilan mode gelap yang elegan dan responsif.

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

.container {
  text-align: center;
  background-color: #1e1e1e;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(0, 255, 180, 0.2);
  animation: zoomIn 1s ease;
}

input, button {
  padding: 10px;
  font-size: 1rem;
  margin: 10px;
  border: none;
  border-radius: 8px;
  outline: none;
}

input {
  width: 60%;
  background-color: #2c2c2c;
  color: #fff;
}

button {
  background-color: #00c897;
  color: #000;
  cursor: pointer;
  transition: background 0.3s ease;
}

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

.fade-in {
  opacity: 0;
  animation: fadeIn 1.5s forwards;
}

.fade-in.delay {
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#timer {
  font-weight: bold;
  color: #00f2a6;
}

🧠 Langkah 3: Logika JavaScript

File script.js berisi semua logika permainan, termasuk skor, level, suara online, dan timer otomatis.

const words = [
  { word: "pisang", hint: "Buah kuning melengkung" },
  { word: "komputer", hint: "Perangkat untuk mengolah data" },
  { word: "pelangi", hint: "Muncul setelah hujan, warna-warni" },
  { word: "sekolah", hint: "Tempat menuntut ilmu" },
  { word: "pantai", hint: "Tempat liburan dekat laut" },
  { word: "sepeda", hint: "Kendaraan tanpa mesin" },
  { word: "hujan", hint: "Air turun dari langit" },
  { word: "kucing", hint: "Hewan peliharaan yang lucu" },
];

let currentIndex = 0;
let score = 0;
let level = 1;
let correctStreak = 0;
let timer;
let timeLeft = 30;

// Suara online
const audioCorrect = new Audio("https://www.soundjay.com/button/beep-07.wav");
const audioWrong = new Audio("https://www.soundjay.com/button/beep-10.wav");

function showWord() {
  document.getElementById("hint").textContent = words[currentIndex].hint;
  document.getElementById("inputGuess").value = "";
  document.getElementById("feedback").textContent = "";
  resetTimer();
}

function checkAnswer() {
  const input = document.getElementById("inputGuess").value.trim().toLowerCase();
  const feedback = document.getElementById("feedback");

  if (input === words[currentIndex].word) {
    feedback.textContent = "✅ Benar!";
    feedback.style.color = "#00ff88";
    score++;
    correctStreak++;
    audioCorrect.play();
    updateScore();
    clearInterval(timer);
    setTimeout(nextWord, 1000);
  } else {
    feedback.textContent = "❌ Salah. Coba lagi!";
    feedback.style.color = "#ff5c5c";
    audioWrong.play();
  }
}

function nextWord() {
  currentIndex = (currentIndex + 1) % words.length;
  checkLevel();
  showWord();
}

function updateScore() {
  document.getElementById("score").textContent = `Skor: ${score}`;
}

function checkLevel() {
  if (correctStreak > 0 && correctStreak % 3 === 0) {
    level++;
    document.getElementById("level").textContent = level;
  }
}

function resetTimer() {
  timeLeft = 30;
  document.getElementById("timer").textContent = timeLeft;
  clearInterval(timer);
  timer = setInterval(() => {
    timeLeft--;
    document.getElementById("timer").textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(timer);
      document.getElementById("feedback").textContent = "⏰ Waktu habis!";
      document.getElementById("feedback").style.color = "#ffaa00";
      audioWrong.play();
      setTimeout(nextWord, 1500);
    }
  }, 1000);
}

window.onload = showWord;

💡 Penutup

Dengan memanfaatkan HTML, CSS, dan JavaScript secara kreatif, kamu bisa membangun game edukatif seperti ini dengan cepat. Cocok digunakan sebagai latihan coding atau untuk konten pendidikan anak dan remaja.

💾 Jangan lupa untuk menyimpan file menjadi:

index.html

style.css

script.js

Ingin menambahkan mode multiplayer, database skor, atau fitur ranking online? Yuk lanjutkan proyek ini ke tingkat selanjutnya!

CandraAndiP

Cari Blog Ini