Of Stack

Realization of guessing numbers game with pure JavaScript

  • 2021-11-10 08:51:35
  • OfStack

Develop a guessing number game, the game should randomly select a natural number within 100, and then invite players to guess this number within 10 rounds. After each round, the player should be told whether the answer is correct or not, and if something goes wrong, tell him whether the number is low or high. And the number guessed by the player in the first round should be displayed. 1 Once the player guesses correctly, or exhausts all opportunities, the game will end. After the game is over, you can let the player choose to start again.

Thinking:

1. Randomly generate a natural number within 100

2. Record the current number of rounds of the player. Start with 1

3. Provide players with a way to guess numbers

4, 1 Once a result is submitted, record it first so that users can see their previous guesses

5. Then check if he is correct

6. If correct:

STEP 1 Display congratulatory messages

2. Stop players from guessing

3. Show space perpetual players restart the game

7. If something goes wrong

1. Tell players they're wrong

2. Word order They enter another guess

3. Number of rounds plus 1

8. If there is an error and the player has no remaining rounds

1. Tell the player that the game is over

2. Stop players from continuing to guess

3. Display space allows players to restart the game

9, 1 once the game is restarted, ensure that the logic of the game and UI are fully recharged, and then return to step 1

html code: 


​<!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" />
    <title> Guess numbers game </title>
    <script type="text/javascript" src="./JS/ Guess numbers game .js" async></script>
/* Change according to one's own reality */
  </head>
  <body>
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
    <label for="guessField"> Please guess the number: </label>
    <input type="text" id="guessField" class="guessField" />
    <input type="submit" value=" Determine " class="guessSubmit" />
  </body>
</html>

js code: 


let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");
const guessSubmit = document.querySelector(".guessSubmit");
const guessField = document.querySelector(".guessField");
let guessCount = 1;
let resetButton;
/*  Game logic  */
function checkGuess() {
  /*  Gets the content entered by the user and casts it to a numeric value  */
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = " Last guess: ";
  }
  guesses.textContent += userGuess + " ";
 
  if (userGuess === randomNumber) {
    lastResult.textContent = " Congratulations! Guess right ";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = "";
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "!!! GAME OVER !!!";
    setGameOver();
  } else {
    lastResult.textContent = " You guessed wrong ";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = " You're guessing low ";
    } else {
      lowOrHi.textContent = " You guessed high ";
    }
  }
  guessCount++;
  guessField.value = "";
  guessField.focus();
}
/*  End the game  */
function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement("button");
  resetButton.textContent = " Start a new game ";
  document.body.appendChild(resetButton);
  resetButton.addEventListener("click", resetGame);
}
/*  Initialization  */
function resetGame() {
  guessCount = 1;
  const resetParas = document.querySelectorAll(".resultParas 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();
  lastResult.style.backgroundColor = "white";
  randomNumber = Math.floor(Math.random() * 100) + 1;
}
guessSubmit.addEventListener("click", checkGuess);
Related articles: