Membuat Game Tebak Angka Dengan JavaScript


membuat game tebak angka 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

Perhatikan pada contoh coding di atas.

Pada bagian awal kita membuat form input angka menggunakan tag <input>. dan memberikan atribut id dengan nama “inputan”.

Kita juga membuat sebuah tombol yang kita beri event onclick(). Sehingga saat tombol ini diklik, maka kita perintahkan untuk menjalankan function periksaInputan().

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.

Kita lihat hasilnya. Jalankan file tebak_angka.html.

membuat game tebak angka dengan javascript
membuat game tebak angka dengan javascript

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.

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.

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.

Kita juga menyimpan setiap percobaan yang dilakukan pengguna pada variabel percobaan.

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().

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.

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.

permainan tebak angka javascript
permainan tebak angka javascript

Sistem mengatakan bahwa tebakan angkanya terlalu tinggi/besar. Kita coba angka yang lebih kecil. yaitu 15.

game javascript
game javascript

Angka 15 terlalu kecil. Kita coba angka lain antara 16 sampai 19. kita coba 16.

tebakan angka berhasil
tebakan angka berhasil

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.

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.


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

Membuat fungsi terbilang dengan javascript
Membuat fitur show hide password di HTML
Menghitung Jumlah Kata Dengan Javascript
Menghitung Jumlah Karakter Menggunakan Javascript

Diskusi

Belum Ada Diskusi
Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD