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 ... The post Membuat Game Tebak Angka Dengan JavaScript appeared first on Malas Ngo

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 filetebak_angka.html.

tebak_angka.html

<!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 

    <p id="pesan"></p>

</body>
</html>

Perhatikan pada contoh coding di atas.

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

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

<button >Dan terakhir kita sediakan sebuah element 
..
 yang kira beri id “pesan”. Segala pesan atau notifikasi pada game ini akan kita tampilkan di sini nantinya.
<p id="pesan"></p>
Kita lihat hasilnya. Jalankan file tebak_angka.html.
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.
<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.
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.
// 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.
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().
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.
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.
permainan tebak angka javascript
Sistem mengatakan bahwa tebakan angkanya terlalu tinggi/besar. Kita coba angka yang lebih kecil. yaitu 15.
game javascript
Angka 15 terlalu kecil. Kita coba angka lain antara 16 sampai 19. kita coba 16.
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.
<!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 

    <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.
The post Membuat Game Tebak Angka Dengan JavaScript appeared first on Malas Ngoding.

Sumber: Malas Ngoding

Membuat Game Tebak Angka

Latihan Membuat Permainan Tebak Angka Dengan JavaScript

Membuat Form Input Angka

Membuat Logika Permainan Dengan JavaScript

Hasil

Source Code Lengkap Game Tebak Angka Sederhana Dengan JavaScript

Penutup

Related Posts

Zayn Malik Returns to Stage with Jimi Hendrix’s “Angel” Cover

Zayn Malik Returns to Stage with Jimi Hendrix’s “Angel” Cover

Zayn Malik Returns to Stage with Jimi Hendrix’s “Angel” Cover

Comments (0)

Leave a Comment