bermain tebak angka dengan menggunakan Javascript

Disini kita akan bermain sedikit dan simpleÂ tentunya, nantinya disini kita atau teman-teman di suruh menebak angka 1-100 dimana nantinya angka itu sudah di acak menggunakan javascript, tetapi nantinya teman-teman suruh menebaknya ya, dengan inputan yang telah di sediakan untuk menebak angka, saya sendiri pertama mencoba ini gagal pertama kali selanjutnya allhamdulillah berhasil, oke jika teman-teman penasaran teman-teman simak terus ya untuk belajar bermain tebak angka dengan menggunakan Javascript, jangan kemana-mana.

Cara bermain tebak angka dengan menggunakan Javascript, saya temukan atau saya dapatkan di mozila defeloper ya teman-teman, oke untuk bermain tebak angka dengan menggunakan Javascript, saya harap teman-teman sudah pernah belajar atau sudah mengerti konsep tentang javascriptnya ya, disini saya merandom angka dengan menggunakan Math.random, dan saya membuat sebuah kondisi dimana jika angka itu benar akan keluar apa, dan jika mendekati akan keluar apa. oke dari pada tambah penasaran dan teman-teman juga sudah ingin mencoba bermain, silahkan teman-teman salin, kode struktur HTML dan Javascriptnya:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bermain Tebak Angka dengan Menggunakan Javascript</title>
    <style>
        html {
            font-family: sans-serif;
        }
        
        body {
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }
        
        .lastResult {
            color: white;
            padding: 3px;
        }
    </style>
</head>

<body>
    <h1>Bermain Tebak Angka dengan Menggunakan Javascript</h1>
    <p>Disini Akan teracak nomor dengan javascript lalu teman-teman di minta menjawabnya, di berikan 10x kesempatan jika tebakan angka terlalu <strong>tinggi atau rendah</strong> akan di beritahukan dan jika <strong>"Benar akan muncul pemberitahuannya juga tentunya."</strong></p>
    <div class="form"> <label for="guessField">Masukan Nomor yang anda pilih <strong>1-100</strong>: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Pilih" class="guessSubmit"> </div>
    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
    </div>
</body>
<script>
    // Your JavaScript goes here
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    var guesses = document.querySelector('.guesses');
    var lastResult = document.querySelector('.lastResult');
    var lowOrHi = document.querySelector('.lowOrHi');
    var guessSubmit = document.querySelector('.guessSubmit');
    var guessField = document.querySelector('.guessField');
    var guessCount = 1;
    var resetButton;

    function checkGuess() {
      var userGuess = Number(guessField.value);
      if (guessCount === 1) {
        guesses.textContent = 'Anda Memasukan : ';
      }

      guesses.textContent += userGuess + ' ';

      if (userGuess === randomNumber) {
        lastResult.textContent = 'SELAMAT! Tebakan Anda Benar!';
        lastResult.style.backgroundColor = 'green';
        lowOrHi.textContent = '';
        setGameOver();
      } else if (guessCount === 10) {
        lastResult.textContent = '!!!Sayang sekali Anda Kurang Beruntung Permainan Selesai, Coba lagi !!!';
        lowOrHi.textContent = '';
        setGameOver();
      } else {
        lastResult.textContent = 'Wooo Salah!';
        lastResult.style.backgroundColor = 'red';
        if(userGuess < randomNumber) {
          lowOrHi.textContent='Angka yang anda masukan Terlalu Rendah!' ;
        } else if(userGuess > randomNumber) {
          lowOrHi.textContent = 'Angka yang anda masukan Terlalu Tinggi!';
        }
      }

      guessCount++;
      guessField.value = '';
    }

    guessSubmit.addEventListener('click', checkGuess);

    function setGameOver() {
      guessField.disabled = true;
      guessSubmit.disabled = true;
      resetButton = document.createElement('button');
      resetButton.textContent = 'Start new game';
      document.body.appendChild(resetButton);
      resetButton.addEventListener('click', resetGame);
    }

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

      resetButton.parentNode.removeChild(resetButton);
      guessField.disabled = false;
      guessSubmit.disabled = false;
      guessField.value='';
      guessField.focus();
      lastResult.style.backgroundColor='white';
      randomNumber=Math.floor(Math.random() * 100) + 1;
    }
</script>

</html>

Cukup panjang ya, saya harap teman-teman, mudah di pahami ya, oke bagaimana hasilnya seperti ini :

gambar pertama ya, sebelum kita input angkanya masih bersih:

dan ini adalah tampilan dimana angka terlalu rendah, dan jika terlalu tinggi pun sama akan menghasilkan inputan seperti itu.

Yee berhasil, ternyata hasilnya adalah 48 ya teman-teman, oke lalu bagaimana jika saya melebih batas yang di tentukan: hasilnya seperti ini:

Seperti ini lah tampilan jika anda menjawab dengan melebihi batas yang di tentukan, oke saya rasa cukup sudah kita bermain tebak angka dengan menggunakan Javascript, dan saya harap teman-teman paham ya, dan bermanfaat tentunya oke sampai jumpa pada artikel selanjutnya dan saya ucapkan terimakasih.

Bermain Tebak Angka dengan Menggunakan Javascript

Kategori