Number Guessing Game in JavaScript

Number Guessing Game in JavaScript

Today, we will make a simple Number Guessing Game in JavaScript, where a random number will be generated and the human/player will make a guess. At the end of the 10th round, the player or computer with more correct guesses wins the game. The user can then restart the game if they wish to play again.

Requirements

  • Code Editor (VS Code Preferred)
  • Chromium Browser (Chrome Preferred)
  • Basic Knowledge of HTML, CSS, Javascript, and Bootstrap

Features

  • Showing basic numbers from 1 to 10
  • Playing against the computer
  • The game will continue for 10 rounds
  • The player with more right guesses wins the round
  • Restarting the game once finished

Folder Structure

We will be using HTML, BootStrap, and JavaScript for developing a Number Guessing Game in JavaScript. Check out this image for the folder structure of our project.

folder structure

index.html contains our Html code.

bootstrap has been used to style our web page.

main.js contains all the logic.

Coding the Number Guessing Game in JavaScript

First, we will create some variables to store the scores and round no of the game

let computerScore = 0;
let playerScore = 0;
let roundNumber = 1;

To generate a random number first we will use the random library that is inbuilt into the javascript

function generateRandomNumber() {
  return Math.floor(Math.random() * 10) + 1;
}

To write further logic we created a function called computerPlay(), this function will check the values guessed by the computer and the player. If the player guess is equal to the computer guess, we will increase the player score else we will increase the computer score. We will be using dom-manipulation to change the rendered in the webpage.

function computerPlay(number) {
    const crandomNumber = generateRandomNumber();
    if (crandomNumber == number) {
        playerScore++;
    } else {
        computerScore++;
    }
    document.getElementById("computerScore").innerHTML = computerScore;
    document.getElementById("playerScore").innerHTML = playerScore;
}

To reset the game, we will change all the values back to their initial phase

function reset() {
  computerScore = 0;
  playerScore = 0;
  roundNumber = 1;
  document.getElementById("computerScore").innerHTML = computerScore;
  document.getElementById("playerScore").innerHTML = playerScore;
  document.getElementById("round").innerHTML = roundNumber;
  document.getElementById("optionButtons").style.display = "flex";
  document.getElementById("result").innerHTML = "";

This is the driver function to play Number Guessing Game in JavaScript, this function runs every time a player clicks any number from 1 to 10. There are 10 rounds available for a user to play means a user guesses 10 times and if the clicks then the final score displays with an option to restart the game.

function playGame(number) {
    computerPlay(number);
    roundNumber++;
    randomNumber = generateRandomNumber();
    if (roundNumber != 11) {
        document.getElementById("round").innerHTML = roundNumber;
    }
    if (roundNumber == 11) {
        if (computerScore > playerScore) {
            document.getElementById("result").innerHTML = "Computer won the game";
        } else if (computerScore < playerScore) {
            document.getElementById("result").innerHTML = "Player won the game";
        } else {
            document.getElementById("result").innerHTML = "Game is draw";
        }
        document.getElementById("optionButtons").style.display = "none";
    }
}

HTML code:

The whole code for the UI in the index.html file is here, we used bootstrap to do the styling of the website so there is no need for an additional CSS file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <title>Number Guessing Game</title>
  </head>
 
  <body>
    <div class="container justify-content-md-center">
      <div class="col justify-content-md-center">
        <!--Simple computer vs player number guessing game  -->
        <h1
          class="row justify-content-md-center mt-1 text-danger font-weight-bold"
        >
          Number Guessing Game
        </h1>
 
        <!-- computer score -->
        <h2 class="row justify-content mt-1 text-info font-weight-bold">
          Computer Score: <span id="computerScore">&nbsp;0</span>
        </h2>
 
        <!-- player score -->
        <h2 class="row justify-content-md mt-1 text-info font-weight-bold">
          Player Score: <span id="playerScore">&nbsp;0</span>
        </h2>
 
        <!-- Round no -->
        <h2 class="row justify-content mt-1 text-info font-weight-bold">
          Round No: <span id="round">&nbsp;1</span><span>/10</span>
        </h2>
 
        <!-- Choose a number from these button -->
        <div class="row justify-content-md-center mt-3" id="optionButtons">
          <div>
            <h3
              class="row justify-content-md-center text-danger font-weight-bold"
            >
              Pick a number
            </h3>
            <div class="row justify-content-md-center mt-3">
              <div class="btn-group btn-group-lg">
                <button
                  id="1"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(1)"
                >
                  1
                </button>
                <button
                  id="2"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(2)"
                >
                  2
                </button>
                <button
                  id="3"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(3)"
                >
                  3
                </button>
              </div>
            </div>
            <div class="row justify-content-md-center mt-3">
              <div class="btn-group btn-group-lg">
                <button
                  id="4"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(4)"
                >
                  4
                </button>
                <button
                  id="5"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(5)"
                >
                  5
                </button>
                <button
                  id="6"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(6)"
                >
                  6
                </button>
              </div>
            </div>
            <div class="row justify-content-md-center mt-3">
              <div class="btn-group btn-group-lg">
                <button
                  id="7"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(7)"
                >
                  7
                </button>
                <button
                  id="8"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(8)"
                >
                  8
                </button>
                <button
                  id="9"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(9)"
                >
                  9
                </button>
              </div>
            </div>
            <div class="row justify-content-md-center mt-3">
              <div class="btn-group btn-group-lg">
                <button
                  id="10"
                  class="btn btn-outline-primary mx-3"
                  onclick="playGame(10)"
                >
                  10
                </button>
              </div>
            </div>
          </div>
        </div>
 
        <div class="row justify-content-md-center">
          <!-- Restart game -->
          <button
            id="restart"
            class="restartButton btn btn-primary btn-lg mt-3"
            onclick="reset()"
          >
            Restart
          </button>
        </div>
 
        <!-- Display the result -->
        <h3
          class="row justify-content-md-center mt-2 text-success"
          id="result"
        ></h3>
      </div>
    </div>
 
    <!-- add js connection -->
    <script src="index.js"></script>
  </body>
</html>

JavaScript code:

let computerScore = 0;
let playerScore = 0;
let roundNumber = 1;

function generateRandomNumber() {
    return Math.floor(Math.random() * 10) + 1;
}

function computerPlay(number) {
    const crandomNumber = generateRandomNumber();
    if (crandomNumber == number) {
        playerScore++;
    } else {
        computerScore++;
    }
    document.getElementById("computerScore").innerHTML = computerScore;
    document.getElementById("playerScore").innerHTML = playerScore;
}

function reset() {
    computerScore = 0;
    playerScore = 0;
    roundNumber = 1;
    document.getElementById("computerScore").innerHTML = computerScore;
    document.getElementById("playerScore").innerHTML = playerScore;
    document.getElementById("round").innerHTML = roundNumber;
    document.getElementById("optionButtons").style.display = "flex";
    document.getElementById("result").innerHTML = "";
}

function playGame(number) {
    computerPlay(number);
    roundNumber++;
    randomNumber = generateRandomNumber();
    if (roundNumber != 11) {
        document.getElementById("round").innerHTML = roundNumber;
    }
    if (roundNumber == 11) {
        if (computerScore > playerScore) {
            document.getElementById("result").innerHTML = "Computer won the game";
        } else if (computerScore < playerScore) {
            document.getElementById("result").innerHTML = "Player won the game";
        } else {
            document.getElementById("result").innerHTML = "Game is draw";
        }
        document.getElementById("optionButtons").style.display = "none";
    }
}

Output:

output 1
output 1
output 2
output 2
output 3
output 3

Also Read:

Share:

Author: Ayush Purawr