Membuat Game Tebak Angka Dengan JavaScript

Membuat Game Tebak Angka Dengan JavaScript adalah cara seru untuk belajar logika, DOM, dan handling event sekaligus. Pada artikel ini kodelyly.com akan membahas langkah-langkah praktis membangun game sederhana yang rapi, cepat dibuat, dan mudah dikembangkan.

Halo teman-teman, semoga kalian semangat ngoding hari ini! Kita akan membuat project mini yang bisa dimainkan langsung di browser dan cocok untuk portofolio pemula hingga menengah.

Membuat Game Tebak Angka Dengan JavaScript

Konsep Singkat

Target game: komputer memilih angka acak 1–100, pemain menebak dalam jumlah percobaan terbatas. Aplikasi memberi umpan balik apakah tebakan terlalu tinggi, terlalu rendah, atau benar, dan menghitung sisa percobaan.

Rencana Elemen UI

Struktur HTML Minimal

Cukup siapkan input bertipe number dengan id guess, tombol #checkBtn, paragraf #message, #tries, dan tombol #resetBtn. Kalian bisa menambahkan styling sesuka hati dengan CSS.

Logika Inti (JavaScript)

<script>
  const MAX_ATTEMPTS = 7;
  let secret = Math.floor(Math.random() * 100) + 1;
  let attempts = 0;

  const guessEl = document.getElementById('guess');
  const msgEl = document.getElementById('message');
  const triesEl = document.getElementById('tries');
  const checkBtn = document.getElementById('checkBtn');
  const resetBtn = document.getElementById('resetBtn');

  function updateTries() {
    triesEl.textContent = `Sisa percobaan: ${MAX_ATTEMPTS - attempts}`;
  }

  function endGame(text) {
    msgEl.textContent = text;
    guessEl.disabled = true;
    checkBtn.disabled = true;
    resetBtn.focus();
  }

  function checkGuess() {
    const val = parseInt(guessEl.value, 10);
    if (Number.isNaN(val) || val < 1 || val > 100) {
      msgEl.textContent = 'Masukkan angka 1–100.';
      return;
    }
    attempts++;
    if (val === secret) return endGame(`Benar! Angkanya ${secret}. 🎉`);
    if (attempts >= MAX_ATTEMPTS) return endGame(`Kalah! Angka yang benar ${secret}.`);
    msgEl.textContent = val < secret ? 'Terlalu rendah ⬇️' : 'Terlalu tinggi ⬆️';
    updateTries();
    guessEl.select();
  }

  checkBtn.addEventListener('click', checkGuess);
  guessEl.addEventListener('keyup', e => { if (e.key === 'Enter') checkGuess(); });
  resetBtn.addEventListener('click', () => {
    secret = Math.floor(Math.random() * 100) + 1;
    attempts = 0;
    guessEl.disabled = false;
    checkBtn.disabled = false;
    msgEl.textContent = 'Game dimulai! Tebak angka 1–100';
    guessEl.value = '';
    guessEl.focus();
    updateTries();
  });

  // inisialisasi awal
  msgEl.textContent = 'Game dimulai! Tebak angka 1–100';
  updateTries();
</script>

Praktik Baik & Peningkatan

Gunakan variabel MAX_ATTEMPTS agar mudah dikonfigurasi. Validasi input di awal supaya pesan lebih jelas. Tambahkan efek visual kecil seperti mengganti warna teks ketika salah/benar, dan tampilkan riwayat tebakan untuk pembelajaran statistik sederhana.

Optimasi SEO Sederhana

Gunakan judul halaman yang memuat kata kunci “Membuat Game Tebak Angka Dengan JavaScript”, deskripsi meta yang ringkas, serta atribut aria-label pada tombol agar aksesibilitas dan kualitas konten meningkat.

Baca Juga:
Memahami Statement di JavaScript

Kesimpulan

Sekarang kalian sudah memahami cara membuat game tebak angka berbasis JavaScript mulai dari konsep, struktur UI, sampai logika inti. Kalian bisa memperluas fitur seperti memilih rentang angka, mode waktu, atau papan skor lokal. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat bereksperimen!