Days
Hours
Minutes
Seconds
Tentu, berikut adalah artikel mengenai cara membuat game tebak angka sederhana menggunakan JavaScript.
Mari kita belajar membuat game tebak angka yang sederhana namun menarik menggunakan JavaScript. Dalam game ini, komputer akan memilih angka acak antara 1 dan 100, dan pemain harus menebak angka tersebut dalam beberapa percobaan. Permainan akan memberikan petunjuk apakah tebakan terlalu tinggi atau terlalu rendah.
Pertama, kita siapkan struktur HTML untuk game kita. Buat file baru bernama tebak_angka.html dan tambahkan kode berikut:
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Game Tebak Angka</title>
<style>
body { font-family: sans-serif; }
input { padding: 8px; margin-bottom: 10px; }
button { padding: 10px 15px; cursor: pointer; }
#pesan { margin-top: 15px; font-weight: bold; }
</style>
</head>
<body>
<h1>Tebak Angka!</h1>
<p>Saya telah memilih angka antara 1 dan 100. Coba tebak!</p>
<input type="number" id="tebakan" placeholder="Masukkan tebakan Anda">
<button onclick="cekTebakan()">Tebak!</button>
<p id="pesan"></p>
<p>Percobaan tersisa: <span id="percobaan"></span></p>
<script>
// Kode JavaScript akan ditempatkan di sini
</script>
</body>
</html>
Kita membuat judul, instruksi, input untuk tebakan, tombol, dan dua elemen paragraf untuk menampilkan pesan dan jumlah percobaan yang tersisa.
Sekarang, mari kita tambahkan kode JavaScript di dalam tag <script> untuk mengimplementasikan logika game.
<script>
let angkaRahasia = Math.floor(Math.random() * 100) + 1;
let jumlahPercobaan = 10;
const pesanElem = document.getElementById(‘pesan’);
const percobaanElem = document.getElementById(‘percobaan’);
const inputTebakan = document.getElementById(‘tebakan’);
const tombolTebak = document.querySelector(‘button’);
percobaanElem.textContent = jumlahPercobaan;
function cekTebakan() {
const tebakan = parseInt(inputTebakan.value);
if (isNaN(tebakan) || tebakan < 1 || tebakan > 100) {
pesanElem.textContent = 'Tebakan harus berupa angka antara 1 dan 100.';
return;
}
jumlahPercobaan--;
percobaanElem.textContent = jumlahPercobaan;
inputTebakan.value = '';
inputTebakan.focus();
if (tebakan === angkaRahasia) {
pesanElem.textContent = `Selamat! Anda benar. Angka rahasianya adalah ${angkaRahasia}.`;
aturAkhirPermainan();
} else if (tebakan < angkaRahasia) {
pesanElem.textContent = 'Terlalu rendah. Coba lagi.';
} else {
pesanElem.textContent = 'Terlalu tinggi. Coba lagi.';
}
if (jumlahPercobaan === 0) {
pesanElem.textContent = `Anda kehabisan percobaan. Angka rahasianya adalah ${angkaRahasia}.`;
aturAkhirPermainan();
}
}
function aturAkhirPermainan() {
inputTebakan.disabled = true;
tombolTebak.disabled = true;
}
</script>
Penjelasan Kode JavaScript:
let angkaRahasia = Math.floor(Math.random() * 100) + 1;: Menghasilkan angka acak antara 1 dan 100 (inklusif) dan menyimpannya di variabel angkaRahasia.let jumlahPercobaan = 10;: Menginisialisasi jumlah percobaan yang diberikan kepada pemain.document.getElementById() dan document.querySelector().percobaanElem.textContent = jumlahPercobaan;: Menampilkan jumlah percobaan awal.cekTebakan() Function: Fungsi ini dipanggil ketika tombol “Tebak!” diklik.
jumlahPercobaan setiap kali pemain menebak.angkaRahasia dan memberikan umpan balik.aturAkhirPermainan() Function: Menonaktifkan input dan tombol setelah permainan berakhir.
Simpan file tebak_angka.html dan buka di browser Anda. Anda akan melihat antarmuka game tebak angka. Coba masukkan tebakan Anda dan lihat umpan baliknya.
Anda bisa mengembangkan game ini lebih lanjut dengan menambahkan fitur-fitur berikut:
Selamat mencoba membuat game tebak angka sederhana ini! Ini adalah latihan yang baik untuk memahami dasar-dasar interaksi pengguna dan logika pemrograman dengan JavaScript.
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
