Guess The Number Game Using JavaScript
By Saruque Ahamed MollickPost Views:983
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:
- 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.
- Store the number in a variable
- Take input from the user until 10 number of input reaches or until the right number has been guessed by the user.
- Compare the guessed number with the randomly chosen number by the machine
- 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.
- 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> <label for="guessField">Enter your guess: </label><input type="text"> <input type="submit" value="Submit guess"></div><div> <p></p> <p></p> <p></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>