Simple HTML Guessing Game: Learn to Code a Fun Web Game

This is a simple HTML game that you can play in your browser. It's called 'Guess the Number' and the objective is to guess a random number between 1 and 100.

To play the game, follow these steps:

Open your web browser
Copy and paste the following code into a new file in your text editor:

<!DOCTYPE html>
<html>
<head>
	<title>Guess the Number Game</title>
</head>
<body>
	<h1>Guess the Number</h1>

	<p>Guess a number between 1 and 100:</p>
	<input type="text" id="guessField">
	<button onclick="checkGuess()">Submit Guess</button>

	<p id="guesses"></p>
	<p id="lastResult"></p>

	<script>
		var randomNumber = Math.floor(Math.random() * 100) + 1;
		var guesses = document.querySelector('#guesses');
		var lastResult = document.querySelector('#lastResult');
		var guessSubmit = document.querySelector('.guessSubmit');
		var guessCount = 1;
		var resetButton;

		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';
		    setGameOver();
		  } else if (guessCount === 10) {
		    lastResult.textContent = '!!!GAME OVER!!!';
		    setGameOver();
		  } else {
		    lastResult.textContent = 'Wrong!';
		    lastResult.style.backgroundColor = 'red';
		    if(userGuess < randomNumber) {
		      lastResult.textContent += ' Your guess was too low!';
		    } else if(userGuess > randomNumber) {
		      lastResult.textContent += ' Your guess was too high!';
		    }
		  }

		  guessCount++;
		  guessField.value = '';
		  guessField.focus();
		}

		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>

</body>
</html>

Save the file with a .html extension (e.g. game.html)
Open the file in your web browser
Start guessing the number!

Have fun playing the game!

Simple HTML Guessing Game: Learn to Code a Fun Web Game