Cara Membuat Game Tebak Angka dengan JavaScript

Cara Membuat Game Tebak Angka dengan JavaScript – Game Tebak Angka JavaScript adalah sebuah permainan sederhana yang dibangun menggunakan bahasa pemrograman JavaScript. Konsepnya cukup sederhana, di mana pemain diminta untuk menebak angka yang telah dipilih secara acak oleh program.

Saat pemain berhasil menebak angka tersebut, akan muncul output “Berhasil”, namun jika gagal, akan muncul “Game Over”. Sekilas, permainan ini mungkin terdengar mudah, tetapi menyembunyikan keseruannya di dalam interaksi antara pemain dan program.

Fitur utama dari Game Tebak Angka JavaScript antara lain:

Angka Acak: Program akan memilih angka secara acak dari rentang tertentu sebagai angka yang harus ditebak oleh pemain.
Input Pemain: Pemain dapat memasukkan tebakannya melalui elemen input seperti kotak teks atau dropdown.
Pemberian Petunjuk: Program memberikan petunjuk apakah tebakan pemain terlalu rendah, terlalu tinggi, atau tepat.
Hitungan Tebakan: Program dapat melacak jumlah tebakan yang diperlukan oleh pemain untuk menebak angka yang benar.
Restart atau Keluar: Setelah pemain berhasil menebak angka yang benar, program memberikan opsi untuk memulai kembali permainan atau keluar dari permainan.

Game Tebak Angka ini adalah proyek yang menyenangkan untuk belajar JavaScript karena melibatkan konsep-konsep seperti manipulasi variabel, logika kondisional, dan penggunaan fungsi-fungsi JavaScript.

Untuk membuatnya cukup mudah, kamu bisa simak tutorial yang sudah kelasjava siapkan untuk membuat game tebak angka menggunakan JavaScript.

Alat yang Dibutuhkan untuk Membuat Game Tebak Angka dengan JavaScript

Untuk membuat Game Tebak Angka dengan JavaScript, kamu membutuhkan beberapa alat sebagai berikut:

Perangkat laptop.
Sublime Text (Editor kode teks).
Google Chrome (Peramban web).
Niat yang kuat untuk belajar dan berkreasi.

Cara Mudah Membuat Game Tebak Angka dengan JavaScript

1. Persiapan Folder dan File

Buka Sublime Text atau editor teks lainnya, lalu buat folder baru untuk proyek Game Tebak Angka. Untuk struktur foldernya, kamu bisa memberi nama folder “Game Tebak Angka JS” lalu didalamnya buat 3 fiile yaitu: index.html, style.css, script.js.

2. Coding HTML (index.html)

Buka file index.html dan tambahkan kode HTML yang diperlukan untuk struktur dasar permainan, kamu bisa menyalin kode dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Game Tebak Angka</h1>
        <p>Masukkan angka antara 1 dan 100:</p>
        <input type="text" id="guessField">
        <button id="guessSubmit">Submit</button>
        <p class="message" id="lowOrHi"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding CSS (style.css)

Buka file style.css dan tambahkan kode CSS untuk mempercantik tampilan permainan, kamu bisa menyalin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
}

.container {
    text-align: center;
    margin-top: 50px;
}

input[type="text"] {
    width: 30%;
    padding: 8px;
    margin: 10px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.message {
    font-size: 18px;
}

4. Coding JavaScript (script.js)

Buka file script.js dan tambahkan kode JavaScript untuk mengatur logika permainan, kamu bisa menyalin kode dibawah ini.

const randomNumber = Math.floor(Math.random() * 100) + 1;
const guessSubmit = document.getElementById('guessSubmit');
const guessField = document.getElementById('guessField');
const lowOrHi = document.getElementById('lowOrHi');
let guessCount = 1;
let resetButton;

function checkGuess() {
    let userGuess = Number(guessField.value);

    if (guessCount === 1) {
        lowOrHi.textContent = 'Tebakan sebelumnya: ';
    }

    lowOrHi.textContent += userGuess + ' ';

    if (userGuess === randomNumber) {
        lowOrHi.textContent = 'Selamat! Anda menebak dengan benar!';
        gameOver();
    } else if (guessCount === 10) {
        lowOrHi.textContent = '!!!GAME OVER!!!';
        gameOver();
    } else {
        lowOrHi.textContent = 'Salah!';
        if (userGuess < randomNumber) {
            lowOrHi.textContent += ' Tebakan terakhir terlalu rendah!';
        } else if (userGuess > randomNumber) {
            lowOrHi.textContent += ' Tebakan terakhir terlalu tinggi!';
        }
    }

    guessCount++;
    guessField.value = '';
    guessField.focus();
}

guessSubmit.addEventListener('click', checkGuess);

function gameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'Mulai permainan baru';
    document.body.appendChild(resetButton);
    resetButton.addEventListener('click', resetGame);
}

function resetGame() {
    guessCount = 1;
    const resetParas = document.querySelectorAll('.message p');
    for (let i = 0; i < resetParas.length; i++) {
        resetParas[i].textContent = '';
    }

    resetButton.parentNode.removeChild(resetButton);
    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    guessField.focus();
    randomNumber = Math.floor(Math.random() * 100) + 1;
}

5. Menjalankan Kode

Jalankan kode dengan membuka file index.html pada browser atau melalui klik kanan pada file tersebut dan pilih “Open in Browser”.

6. Menampilkan Hasil

Selamat! Kamu telah berhasil membuat Game Tebak Angka dengan JavaScript dan mempercantik tampilannya menggunakan CSS, kini permainanmu siap untuk dimainkan!

Akhir Kata

Sekian dulu tutorial mengenai Cara Membuat Game Tebak Angka dengan JavaScript yang mudah dibuat. Dengan sedikit kreativitas dan pemahaman tentang JavaScript, kamu dapat membuat permainan yang menarik dan menghibur. Selamat mencoba!