Membuat Game Tebak Angka Sederhana Menggunakan Javascript

Halo semuanya apa kabar, kali ini saya akan memberikan cara bagaimana membuat game sederhana dengan javascript. Javascript sendiri adalah bahasa pemrograman web yang berjalan disisi client dan dapat dijalankan pada web browser seperti Firefox, Chrome, Opera dll.

Game tebak angka ini konsepnya adalah kita akan diberikan kesempatan sebanyak 3 kali untuk menebak angka random yang dibuat oleh komputer, apabila berhasil maka akan menampilkan output "Berhasil" dan apabila gagal maka akan tampil "Game Over".

Oke langsung saja kita mulai

Persiapan

Teks Editor (Rekomendasi pakai Visual Studio Code/Sublime Text)
Web Browser

Eksekusi

Buatlah 2 file dengan nama tebakangka.html dan script.js

Letakkan pada folder yang sama kedua file tersebut

Pada File script.js buatlah 3 variabel yaitu

angka (untuk menampung angka random)
kesempatan (untuk menampung jumlah kesempatan)
tebakan (untuk menampung angka tebakan user)

var angka;
var kesempatan;
var tebakan;

Lalu masukan angka random kedalam variabel angka, dan buat prompt untuk menampung nilai yang diinputkan user

angka=Math.random();
tebakan=prompt("Masukan tebakan anda dari angka 1-4 (kesempatan = 3 kali)");

Karena angka random yang dihasilkan javascript hanya dari rentang 0 sampai 1, maka kita akan membuat pembatas nilainya yaitu :

rentang 0.1 sampai 0.25 nilainya adalah 1
rentang 0.25 sampai 0.5 nilainya adalah 2
rentang 0.5 sampai 0.75 nilainya adalah 3
rentang 0.75 sampai 1 nilainya adalah 4


if(angka>=0,1 && angka <0 .25="" angka="" else="" if="">=0,25 && angka <0 .5="" angka="" else="" if="">=0,5 && angka

Sipp, sekarang setelah angka random didapatkan maka langkah selanjutnya adalah membandingkan antara angka random yang dihasilkan komputer dengan tebakan kita, kodenya adalah sebagai berikut


for(kesempatan=3;kesempatan>=1;kesempatan--)
{
    if(angka==tebakan)
    {
        //mengedit elemen html dengan ID="notice" yang akan diisi dengan value "Selamat Anda Berhasil"
        document.getElementById('notice').innerHTML="Selamat Anda Berhasil";
        break;
    }
    else
    {
        tebakan=prompt("Maaf tebakan anda salah, sisa kesempatan = "+kesempatan)
    }
}
if(kesempatan==0)
{
    document.getElementById('notice').innerHTML="Game Over";
}

Sekarang beralih ke file tebakangka.html dan buat struktur kode HTML dan import kode script.js kesini


<html>
     <head>
     </head>

     <body>
           //import kode javascript
           <script src="script.js"> </script>
     </body>
</html>

Terakhir buat elemen yang nantinya akan digunakan untuk menampilkan hasil tebakan, tambahkan ini dibawah body


<h1 id="notice"></h1>

Sekarang simpan file tersebut dan jalankan pada web browser kalian, gimana hasilnya ? Kalo misalkan error silahkan cek kembali kodingannya. Untuk memastikan kodingannya, nih source code fullnya

Full Code


var angka;
var kesempatan;
var tebakan;

angka=Math.random();
tebakan=prompt("Masukan tebakan anda dari angka 1-4 (kesempatan = 3 kali");

if(angka>=0,1 && angka <0 .25="" angka="" else="" if="">=0,25 && angka <0 .5="" angka="" else="" if="">=0,5 && angka <0 .75="" angka="4;" else="" for="" kesempatan="3;kesempatan">=1;kesempatan--)
{
    if(angka==tebakan)
    {
        document.getElementById('notice').innerHTML="Selamat Anda Berhasil";
        break;
    }
    else
    {
        tebakan=prompt("Maaf tebakan anda salah, sisa kesempatan = "+kesempatan)
    }
}
if(kesempatan==0)
{
    document.getElementById('notice').innerHTML="Game Over";
}


<html>
     <head>
     </head>

     <body>
           <h1 id="notice"></h1>

           //import kode javascript
           <script src="script.js"> </script>
     </body>
</html>