Buat Game Sederhana dengan HTML
Anda mungkin berpikir bahwa HTML hanya untuk membuat halaman web statis. Namun, dengan sedikit kreativitas dan JavaScript, Anda dapat membuat game sederhana yang menghibur menggunakan HTML! Di artikel ini, kita akan membuat game "tebak angka" yang sederhana.
Langkah 1: Struktur HTML Dasar
Pertama, kita perlu membuat struktur HTML dasar untuk game kita. Buat file HTML baru (misalnya, game.html) dan tambahkan kode berikut:
Tebak Angka
Tebak Angka
Saya telah memilih angka antara 1 dan 100. Tebaklah!
Kode ini membuat halaman HTML dengan judul "Tebak Angka", sebuah paragraf untuk petunjuk, sebuah input untuk memasukkan tebakan, sebuah tombol untuk mengecek tebakan, dan sebuah paragraf dengan id pesan untuk menampilkan pesan kepada pemain.
Langkah 2: Menambahkan JavaScript
Sekarang, buat file JavaScript baru (misalnya, game.js) dan tambahkan kode berikut:
const tebakanInput = document.getElementById("tebakan");
const cekButton = document.getElementById("cek");
const pesan = document.getElementById("pesan");
let angkaRahasia = Math.floor(Math.random() * 100) + 1; // Angka acak antara 1 dan 100
let kesempatan = 10; // Kesempatan awal
cekButton.addEventListener("click", () => {
let tebakan = parseInt(tebakanInput.value);
if (kesempatan > 0) {
if (tebakan === angkaRahasia) {
pesan.textContent = "Selamat! Anda menebak dengan benar!";
kesempatan = 0; // Hentikan permainan
} else if (tebakan < angkaRahasia) {
pesan.textContent = "Terlalu rendah. Coba lagi.";
kesempatan--;
} else {
pesan.textContent = "Terlalu tinggi. Coba lagi.";
kesempatan--;
}
pesan.textContent += ` Sisa kesempatan: ${kesempatan}`;
} else {
pesan.textContent = `Anda kehabisan kesempatan. Angka rahasia adalah ${angkaRahasia}`;
}
});
Kode JavaScript ini:
- Mengambil elemen HTML yang diperlukan (input, tombol, dan pesan).
- Menentukan angka rahasia secara acak.
- Menentukan jumlah kesempatan awal.
- Menambahkan event listener ke tombol "Cek" yang akan dijalankan saat tombol diklik.
- Dalam event listener:
- Mendapatkan tebakan pemain dari input.
- Memeriksa apakah pemain masih memiliki kesempatan.
- Membandingkan tebakan dengan angka rahasia dan menampilkan pesan yang sesuai.
- Mengurangi kesempatan jika tebakan salah.
- Menampilkan sisa kesempatan.
- Menampilkan pesan akhir jika kesempatan habis.
Langkah 3: Menjalankan Game
Simpan kedua file (HTML dan JavaScript) dalam folder yang sama. Buka file HTML di browser Anda, dan Anda dapat mulai bermain game "tebak angka"!
Kesimpulan
Dengan HTML dan JavaScript sederhana, Anda dapat membuat game sederhana yang menghibur. Anda dapat mengembangkan game ini lebih lanjut dengan menambahkan fitur-fitur tambahan seperti level kesulitan, skor, dan visualisasi yang lebih baik.