Javascript Game #10:
Proyek Game #1: Tebak Angka Ajaib!
Horee! Akhirnya kita sampai di proyek game pertama! Setelah belajar banyak jurus (variabel, fungsi, kondisi, event listener), sekarang saatnya kita bikin game beneran. Game ini sederhana: komputer memilih angka rahasia antara 1-100, dan kamu harus menebaknya! Setiap tebakan, komputer kasih petunjuk "terlalu besar" atau "terlalu kecil". Seru kan?
✨ TEBAK ANGKA AJAIB ✨
Komputer punya angka rahasia dari 1 sampai 100. Coba tebak!
PENJELASAN GAME (UNTUK KAMU YANG INGIN TAHU)
Yuk kita bedah kode game di atas! Tenang, nggak serumit yang dibayangkan.
1. Menyiapkan Variabel
let percobaan;
let gameSelesai = false;
Kita punya tiga kotak ajaib (variabel): angkaRahasia untuk menyimpan angka tebakan komputer, percobaan untuk menghitung berapa kali kita menebak, dan gameSelesai untuk tahu apakah game sudah berakhir (biar nggak bisa nebak lagi).
2. Fungsi Reset
angkaRahasia = Math.floor(Math.random() * 100) + 1;
percobaan = 0;
gameSelesai = false;
...
}
Math.random() itu jurus rahasia buat bikin angka acak. Kali 100, ditambah 1, jadilah angka 1-100. Fungsi ini juga mengatur ulang tampilan.
3. Fungsi Cek Tebakan
if (gameSelesai) { ... }
let tebakan = parseInt(...);
if (isNaN(tebakan)) { ... }
percobaan++;
if (tebakan === angkaRahasia) { ... }
else if (tebakan > angkaRahasia) { ... }
else { ... }
}
Ini adalah jantung game. Dia pakai if/else buat nentuin petunjuk. Kalau tebakan sama, tampilkan "SELAMAT". Kalau lebih besar, bilang "Terlalu BESAR". Kalau lebih kecil, "Terlalu KECIL".
4. Event Listener
document.getElementById('resetBtn').addEventListener('click', resetGame);
input.addEventListener('keypress', function(e) { if(e.key === 'Enter') cekTebakan(); });
Kita pasang telinga ke tombol tebak, tombol reset, dan juga ke kotak input (biar bisa tekan Enter).
MISI TAMBAHAN
Setelah berhasil membuat game ini, coba tantangan berikut:
- Ubah batas angka menjadi 1-1000 (lebih seru).
- Tambahkan pesan khusus kalau tebakanmu sangat panas (misal selisih kurang dari 5).
- Buat tombol hint yang memberikan petunjuk "Angka rahasia genap/ganjil".
- Simpan skor tertinggi (jumlah percobaan terkecil) pakai localStorage.
- Kasih suara (pakai
new Audio) kalau menang.
📸 Kembangkan game-mu dan tunjukkan ke teman-teman!
📝 RANGKUMAN SERU
- Kita berhasil membuat game pertama: Tebak Angka Ajaib!
- Menggunakan variabel, fungsi, if/else, dan event listener.
- Game ini bisa dikembangkan lebih seru lagi.
- Kamu sekarang sudah punya dasar untuk membuat game yang lebih kompleks!