htmlcssjavascriptgamePemula9 mnt baca

Game Tebak Angka

Game tebak angka 1-100 dengan petunjuk terlalu besar/kecil dan hitungan percobaan.

Game Pertama yang Sempurna untuk Pemula

Tebak angka adalah game logika paling sederhana: komputer menyimpan angka rahasia, pemain menebak, komputer memberi petunjuk. Di balik kesederhanaannya ada konsep penting: random, perbandingan, state percobaan, dan feedback loop.

Langkah Membangun

HTML: Tampilan game: judul, input angka + tombol "Tebak", area petunjuk, daftar tebakan sebelumnya, tombol "Main Lagi".

CSS: Nuansa game: background gelap playful, angka besar, petunjuk berwarna (biru "kekecilan", oranye "kebesaran", hijau "benar!"). Animasi goyang saat tebakan salah.

JS: Logikanya:

  1. rahasia = Math.floor(Math.random() * 100) + 1 (angka 1-100).
  2. Setiap tebakan: bandingkan. Jika sama -> menang, tampilkan jumlah percobaan. Jika kurang -> "Terlalu kecil!". Jika lebih -> "Terlalu besar!".
  3. Catat semua tebakan ke array, tampilkan sebagai riwayat.
  4. Validasi: tolak angka di luar 1-100 atau bukan angka.
  5. Tombol Main Lagi: acak angka baru, reset state.

Strategi Menang (Bonus Logika)

Tebak 50 dulu: kalau "kekecilan", tebak 75; kalau "kebesaran", tebak 25. Ini binary search, dan selalu menang dalam maksimal 7 tebakan untuk rentang 1-100. Komputer memakai strategi yang sama di banyak algoritma.

Kesalahan Umum

  • Math.random() * 100 menghasilkan 0-99 (tambah 1 untuk 1-100).
  • Tidak mencegah tebakan ganda yang sama (beri tahu "sudah ditebak!").
  • Angka rahasia dibuat ulang setiap tebakan karena ditaruh di dalam fungsi tebak (harus di luar, sekali saja).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Level Kesulitan

Tambahkan pilihan level: Mudah (1-50, 10 kesempatan), Sedang (1-100, 7 kesempatan), Sulit (1-200, 6 kesempatan). Jika kesempatan habis, pemain kalah dan angka rahasia dibuka.