Simple HTML Game: I Spy

Overview

I Spy is a classic guessing game where one player chooses an object within sight and says 'I spy with my little eye something that is...' and gives a clue about the object's color or shape. The other player(s) then try to guess the object.

In this simple HTML game version, we will have a computer-generated object that the player will try to guess based on a clue.

Instructions

Open a new HTML file in your preferred text editor.
Create a text input field for the player to enter their guess.
Create a 'Guess' button for the player to submit their guess.
Create a 'Clue' button that will generate a clue about the object.
Generate a random object from a list of objects and store it in a variable.
When the player clicks the 'Clue' button, display a clue about the object (e.g. 'It's red').
When the player clicks the 'Guess' button, compare their guess to the randomly generated object and display whether or not they are correct.
If the player is correct, congratulate them and generate a new object for the next round.
If the player is incorrect, encourage them to try again.

Example Code

<!DOCTYPE html>
<html>
<head>
	<title>I Spy Game</title>
</head>
<body>
	<h1>I Spy</h1>

	<p>Can you guess what I'm thinking of?</p>

	<input type="text" id="guessInput">
	<button onclick="guess()">Guess</button>
	<button onclick="generateClue()">Clue</button>

	<script>
		var objects = ['tree', 'car', 'apple', 'book', 'chair'];
		var randomObject = objects[Math.floor(Math.random() * objects.length)];
		var clue = '';

		function generateClue() {
			if (randomObject == 'tree') {
				clue = 'It's green';
			} else if (randomObject == 'car') {
				clue = 'It's silver';
			} else if (randomObject == 'apple') {
				clue = 'It's red';
			} else if (randomObject == 'book') {
				clue = 'It's rectangular';
			} else if (randomObject == 'chair') {
				clue = 'You can sit on it';
			}

			document.getElementById('clueOutput').innerHTML = clue;
		}

		function guess() {
			var guess = document.getElementById('guessInput').value;

			if (guess == randomObject) {
				alert('Congratulations! You guessed it!');
				randomObject = objects[Math.floor(Math.random() * objects.length)];
			} else {
				alert('Sorry, that's not it. Try again!');
			}
		}
	</script>

	<p id="clueOutput"></p>
</body>
</html>

Conclusion

This simple HTML game provides a fun way for players to practice their guessing skills. It can also be customized with different objects and clues to make it more challenging. Happy guessing!

Simple HTML I Spy Game: Guess the Object

Simple HTML I Spy Game: Guess the Object

Simple HTML Game: I Spy

Overview

Instructions

Example Code

Conclusion