Membuat Game Tebak Angka Dengan JavaScript
Setelah teman-teman mempelajari materi belajar JavaScript di malasngoding.com, teman-teman bisa mencoba latihan untuk membuat proyek-proyek kecil. Misal seperti membuat game sederhana dengan JavaScript.
Salah satunya seperti pada tutorial ini, yaitu kita akan mencoba membuat game tebak angka dengan menggunakan JavaScript.
Membuat Game Tebak Angka
Jadi model game atau permainan yang akan kita buat adalah sejenis permainan untuk menebak angka yang sudah ditetapkan oleh sistem.
Misal sistem menetapkan angka 12 sebagai jawaban, kemudian pengguna mengisi angka 5, maka akan muncul output bahwa angka yang dimasukkan terlalu kecil.
Begitu juga jika pengguna memasukkan angka 70, maka akan muncul output pesan bahwa angka yang dimasukkan terlalu besar.
Begitu seterusnya sampai angka yang ditebak oleh pengguna sesuai dengan yang sudah ditetapkan oleh sistem di awal, yaitu angka 12.
Jika pengguna berhasil menebak angka 12, maka akan ditampilkan juga berapa kali pengguna telah mencoba menebak.
Latihan Membuat Permainan Tebak Angka Dengan JavaScript
Silahkan persiapkan sebuah file HTML baru. Pada contoh ini saya membuat file dengan nama tebak_angka.html.
Membuat Form Input Angka
Tahap pertama yang kita lakukan adalah membuat form input angka. dan sebuah tombol untuk memerintahkan pemeriksaan angka yang diinput.
Kita akan membuat form input angka pada file tebak_angka.html.
tebak_angka.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Game Tebak Angka by Malasngoding.com</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>Game Tebak Angka</h1> <h3>by <a href="https://www.malasngoding.com">Malasngoding.com</a></h3> <p>Masukkan angka antara 1 dan 100:</p> <input type="text" id="inputan"> <button onclick="periksaInputan()">Tebak!</button> <p id="pesan"></p> </body> </html> |
Perhatikan pada contoh coding di atas.
Pada bagian awal kita membuat form input angka menggunakan tag <input>. dan memberikan atribut id dengan nama “inputan”.
|
1 |
<input type="number" id="inputan"> |
Kita juga membuat sebuah tombol yang kita beri event onclick(). Sehingga saat tombol ini diklik, maka kita perintahkan untuk menjalankan function periksaInputan().
|
1 |
<button onclick="periksaInputan()">Tebak!</button> |
Dan terakhir kita sediakan sebuah element <p>..</p> yang kira beri id “pesan”. Segala pesan atau notifikasi pada game ini akan kita tampilkan di sini nantinya.
|
1 |
<p id="pesan"></p> |
Kita lihat hasilnya. Jalankan file tebak_angka.html.
Oke, persiapan selesai. Sangat sederhana kan.
Selanjutnya kita akan masuk ke proses pembuatan logika permainannya dengan menggunakan JavaScript.
Membuat Logika Permainan Dengan JavaScript
Agar game ini bisa berjalan dan dimainkan, kita akan membuat logika dan operasinya dengan JavaScript.
Silahkan tulis script JavaScript berikut pada file tebak_angka.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script> // buat angka random dan simpan dalam variabel angkaRandom const angkaRandom = Math.floor(Math.random() * 100) + 1; // menyimpan element id inputan dan pesan dalam variabel const inputan = document.getElementById('inputan'); const pesan = document.getElementById('pesan'); // menghitung jumlah tebakan let percobaan = 0; // Function untuk memeriksa inputan pengguna function periksaInputan() { // menambah jumlah inputan percobaan percobaan++; // menyimpan inputan angka dari user const inputan_user = parseInt(inputan.value); if (inputan_user === angkaRandom) { // membuat isi pesan pesan.textContent = `Selamat! Anda menebak angka yang benar (${angkaRandom}) dengan ${percobaan} tebakan.`; // mengubah warna pesan menjadi hijau pesan.style.color = 'green'; // menonaktifkan form input inputan.disabled = true; } else if (inputan_user < angkaRandom) { // membuat isi pesan pesan.textContent = 'Tebakan Anda terlalu kecil, coba lagi.'; // mengubah warna pesan menjadi hijau pesan.style.color = 'red'; } else if (inputan_user > angkaRandom) { // membuat isi pesan pesan.textContent = 'Tebakan Anda terlalu tinggi, coba lagi.'; // mengubah warna pesan menjadi hijau pesan.style.color = 'red'; } // kosongkan form inputan inputan.value = ''; // fokus pada form inputan inputan.focus(); } </script> |
Perhatikan pada script di atas.
Pertama kita buat angka random terlebih dulu. yaitu angka random antara 1 sampai 100. Kemudian angka tersebut kita simpan pada variabel angkaRandom.
|
1 |
const angkaRandom = Math.floor(Math.random() * 100) + 1; |
Angka random ini menjadi jawaban dari permainan. misal angka random yang dibuat oleh sistem adalah angka 30, maka pengguna harus berhasil menebak angka 30 pada form input.
Kemudian kita deklarasikan form input dan element pesan pada variabel masing-masing.
Tujuannya agar memudahkan kita dalam pemanggilan dan manipulasi ke depannya.
|
1 2 3 |
// menyimpan element id inputan dan pesan dalam variabel const inputan = document.getElementById('inputan'); const pesan = document.getElementById('pesan'); |
Kita juga menyimpan setiap percobaan yang dilakukan pengguna pada variabel percobaan.
|
1 |
let percobaan = 0; |
Percobaan yang dilakukan oleh pengguna yang kita simpan dalam variabel percobaan ini akan terus bertambah. karena kita sudah memerintahkannya dalam function periksaInputan() dengan perintah percobaan++;.
Selanjutnya kita masuk ke intinya.
Yaitu pada function periksaInputan().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
function periksaInputan() { // menambah jumlah inputan percobaan percobaan++; // menyimpan inputan angka dari user const inputan_user = parseInt(inputan.value); if (inputan_user === angkaRandom) { // membuat isi pesan pesan.textContent = `Selamat! Anda menebak angka yang benar (${angkaRandom}) dengan ${percobaan} tebakan.`; // mengubah warna pesan menjadi hijau pesan.style.color = 'green'; // menonaktifkan form input inputan.disabled = true; } else if (inputan_user < angkaRandom) { // membuat isi pesan pesan.textContent = 'Tebakan Anda terlalu kecil, coba lagi.'; // mengubah warna pesan menjadi hijau pesan.style.color = 'red'; } else if (inputan_user > angkaRandom) { // membuat isi pesan pesan.textContent = 'Tebakan Anda terlalu besar, coba lagi.'; // mengubah warna pesan menjadi hijau pesan.style.color = 'red'; } // kosongkan form inputan inputan.value = ''; // fokus pada form inputan inputan.focus(); } |
Saat tombol “Periksa!” diklik, maka sistem akan menjalankan function ini untuk memeriksa inputan pengguna apakah sama dengan angka random yang dibuat sistem (angkaRandom).
Dalam function ini kita juga memeriksa jawaban pengguna dengan menggunakan kondisi if else.
Contoh, angka random yang dibuat oleh sistem adalah 30, Maka jika pengguna menginput angka yang lebih besar dari 30, maka kita tampilkan pesan “Tebakan Anda terlalu besar, coba lagi.”.
Sebaliknya jika pengguna menginput angka yang lebih kecil dari 30, maka kita tampilkan pesan “Tebakan Anda terlalu kecil, coba lagi.”.
Begitu seterusnya sampai pengguna berhasil menebak angka yang benar, yaitu angka 30.
Jika pengguna berhasil menebak angka 30. maka permainan selesai, dan kita tampilkan berapa kali pengguna mencoba menebak.
|
1 |
pesan.textContent = `Selamat! Anda menebak angka yang benar (${angkaRandom}) |
Hasil
Mari kita lihat hasil dari game tebak angka yang kita buat.
Silahkan jalankan file tebak_angka.html. dan silahkan tebak angka berapa.
Kita diminta untuk memasukkan angka antara 1 sampai 100. kita coba masukkan angka 20.
Sistem mengatakan bahwa tebakan angkanya terlalu tinggi/besar. Kita coba angka yang lebih kecil. yaitu 15.
Angka 15 terlalu kecil. Kita coba angka lain antara 16 sampai 19. kita coba 16.
Mantap, tebakan kita benar. yaitu angka 16. dan kita sudah mencoba menebak sebanyak 3 kali.
Source Code Lengkap Game Tebak Angka Sederhana Dengan JavaScript
Berikut adalah source code lengkap dari game atau permainan tebak angka yang berhasil kita buat dengan javascript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Game Tebak Angka by Malasngoding.com</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>Game Tebak Angka</h1> <h3>by <a href="https://www.malasngoding.com">Malasngoding.com</a></h3> <p>Masukkan angka antara 1 dan 100:</p> <input type="number" id="inputan"> <button onclick="periksaInputan()">Tebak!</button> <p id="pesan"></p> <script> // buat angka random dan simpan dalam variabel angkaRandom const angkaRandom = Math.floor(Math.random() * 100) + 1; // menyimpan element id inputan dan pesan dalam variabel const inputan = document.getElementById('inputan'); const pesan = document.getElementById('pesan'); // menghitung jumlah tebakan let percobaan = 0; // Function untuk memeriksa inputan pengguna function periksaInputan() { // menambah jumlah inputan percobaan percobaan++; // menyimpan inputan angka dari user const inputan_user = parseInt(inputan.value); if (inputan_user === angkaRandom) { // membuat isi pesan pesan.textContent = `Selamat! Anda menebak angka yang benar (${angkaRandom}) dengan ${percobaan} tebakan.`; // mengubah warna pesan menjadi hijau pesan.style.color = 'green'; // menonaktifkan form input inputan.disabled = true; } else if (inputan_user < angkaRandom) { // membuat isi pesan pesan.textContent = 'Tebakan Anda terlalu kecil, coba lagi.'; // mengubah warna pesan menjadi hijau pesan.style.color = 'red'; } else if (inputan_user > angkaRandom) { // membuat isi pesan pesan.textContent = 'Tebakan Anda terlalu tinggi, coba lagi.'; // mengubah warna pesan menjadi hijau pesan.style.color = 'red'; } // kosongkan form inputan inputan.value = ''; // fokus pada form inputan inputan.focus(); } </script> </body> </html> |
Penutup
Aplikasi game tebak angka ini cukup sederhana. dimana pertama kita membuat angka random. yaitu salah satu angka dari angka 1 sampai 100. kemudian kita simpan dalam variabel angkaRandom.
Selanjutnya kita cocokkan angka yang diinput oleh pengguna.
Jika angka yang diinput oleh pengguna lebih besar dari angka random yang dibuat oleh sistem, maka kita tampilkan pesan “Tebakan Anda terlalu besar, coba lagi.”. begitu juga sebaliknya.
Sampai pengguna berhasil menebak angka yang benar.
Jika tebakan pengguna benar, kita tampilkan juga pengguna berhasil menebak dalam tebakan ke berapa (jumlah tebakan).
Semoga bisa bermanfaat.
Tutorial Menarik Lainnya
Fungsi Terbilang Dengan JavaScript
Membuat Show Hide Password Di HTML
Menghitung Jumlah Kata Menggunakan Javascript
Menghitung Jumlah Karakter di Javascript
