Guess The Number Game Using JavaScript

By Saruque Ahamed Mollick

In this post, I am going to share a source code of “Guess The Number” game using JavaScript

At first, let’s see what kind of game is this and how does it work?

After that, we will go for the script/algorithm.

How does this game work?

At first, a random number will be picked when you start playing this game.

I will set the random number between 1 to 100. Thereafter you have to guess the number chosen by the computer.
For maximizing the fun I will give you chance to guess the number in 10 chances that means you are going to have 10 number of turns to guess the correct number.

Algorithm:

  1. Let the computer choose the random number by using this method Math.floor(Math.random() * 100) + 1;  it will let the machine choose a number between 1 to 100.
  2. Store the number in a variable
  3. Take input from the user until 10 number of input reaches or until the right number has been guessed by the user.
  4. Compare the guessed number with the randomly chosen number by the machine
  5. If the guessed number is greater than the randomly chosen number it will let you know if you have guessed a higher number or a lower number.
  6. And this process will go on until you reach 10 number of inputs or reach the right answer

For extra fun, you can use your own concept to add score function by using the concept of how many guesses user has used.

 

Source code of guess the number game

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Number guessing game</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>
     

<div class="form">
  <label for="guessField">Enter your guess: </label><input type="text" id="guessField" class="guessField">
  <input type="submit" value="Submit guess" 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;
  guessField.focus();
  function checkGuess() {
    var userGuess = Number(guessField.value);
    if(guessCount === 1) {
      guesses.textContent = 'Previous guesses: ';
    }
    guesses.textContent += userGuess + ' ';
    if(userGuess === randomNumber) {
      lastResult.textContent = 'Congratulations! You got it right!';
      lastResult.style.backgroundColor = 'green';
      lowOrHi.textContent = '';
      setGameOver();
    } else if(guessCount === 10) {
      lastResult.textContent = '!!!GAME OVER!!!';
      lowOrHi.textContent = '';
      setGameOver();
    } else {
      lastResult.textContent = 'Wrong!';
      lastResult.style.backgroundColor = 'red';
      if(userGuess < randomNumber) {
        lowOrHi.textContent = 'Last guess was too low!';
      } else if(userGuess > randomNumber) {
        lowOrHi.textContent = 'Last guess was too high!';
      }
    }
    guessCount++;
    guessField.value = '';
    guessField.focus();
  }
  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>

 

So here is the execution of this script :

Machine/computer has selected a number between  to 1 to 100,
Now let’s see how many turns you guess the right number. Best of Luck!

 





Leave a Reply

Your email address will not be published. Required fields are marked *