Hangman Game in HTML

This is a simple hangman game made with HTML, CSS, and JavaScript. It's a great way to learn about basic web development concepts and how to make interactive elements.

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title>Hangman Game</title>
	<style type="text/css">
		#word-container {
			margin-top: 20px;
			font-size: 30px;
			font-weight: bold;
			text-align: center;
		}
		#guess-container {
			margin-top: 20px;
			text-align: center;
		}
		#guess-input {
			padding: 10px;
			margin-right: 10px;
			font-size: 20px;
		}
		#guess-button {
			padding: 10px;
			font-size: 20px;
		}
		#result-container {
			margin-top: 20px;
			font-size: 30px;
			font-weight: bold;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>Hangman Game</h1>
	<div id='word-container'></div>
	<div id='guess-container'>
		<input id='guess-input' type='text' maxlength='1' autofocus>
		<button id='guess-button'>Guess</button>
	</div>
	<div id='result-container'></div>

	<script type='text/javascript'>
		// Define word list
		var words = ['apple', 'banana', 'cherry', 'durian', 'eggplant', 'fig', 'grape', 'honeydew', 'indigo', 'jicama', 'kiwi', 'lemon', 'mango', 'nectarine', 'orange', 'pear', 'quince', 'raspberry', 'strawberry', 'tangerine', 'ugli', 'vanilla', 'watermelon', 'xigua', 'yellow', 'zucchini'];
		
		// Choose a random word from word list
		var word = words[Math.floor(Math.random() * words.length)];
		
		// Create an array for the letters of the word
		var wordLetters = word.split('');
		
		// Create an array for the guessed letters
		var guessedLetters = [];
		
		// Create an array for the correct guesses
		var correctGuesses = [];
		
		// Create a variable for the number of incorrect guesses
		var incorrectGuesses = 0;
		
		// Create a function to display the word with underscores for unguessed letters
		function displayWord() {
			var wordDisplay = '';
			for (var i = 0; i < wordLetters.length; i++) {
				if (guessedLetters.includes(wordLetters[i])) {
					wordDisplay += wordLetters[i];
				} else {
					wordDisplay += '_';
				}
				wordDisplay += ' ';
			}
			document.getElementById('word-container').innerHTML = wordDisplay;
		}
		
		// Create a function to check if the guessed letter is in the word
		function checkGuess() {
			var guess = document.getElementById('guess-input').value.toLowerCase();
			if (wordLetters.includes(guess)) {
				guessedLetters.push(guess);
				correctGuesses.push(guess);
				displayWord();
				if (correctGuesses.length == wordLetters.length) {
					document.getElementById('result-container').innerHTML = 'You win!';
					document.getElementById('guess-input').disabled = true;
					document.getElementById('guess-button').disabled = true;
				}
			} else {
				guessedLetters.push(guess);
				incorrectGuesses++;
				displayWord();
				if (incorrectGuesses == 6) {
					document.getElementById('result-container').innerHTML = 'You lose! The word was ' + word + '.';
					document.getElementById('guess-input').disabled = true;
					document.getElementById('guess-button').disabled = true;
				}
			}
			document.getElementById('guess-input').value = '';
			document.getElementById('guess-input').focus();
		}
		
		// Call displayWord function to display the word with underscores for unguessed letters
		displayWord();
		
		// Add event listener for guess button click
		document.getElementById('guess-button').addEventListener('click', checkGuess);
		
		// Add event listener for guess input enter key press
		document.getElementById('guess-input').addEventListener('keyup', function(event) {
				if (event.keyCode === 13) {
					event.preventDefault();
					document.getElementById('guess-button').click();
				}
			});
	</script>
</body>
</html>

How to Play

When the game loads, a random word from the word list is chosen and displayed on the screen as underscores.
Type a letter into the box provided and click the 'Guess' button or press Enter.
If the letter is in the word, it is revealed in the word display.
If the letter is not in the word, the hangman figure is slowly drawn on the screen. (You'll need to add the hangman drawing logic in CSS or JavaScript)
Keep guessing letters until you either guess the word correctly (you win!) or the hangman figure is completed (you lose!).

CSS Code

The CSS code is included in the HTML code above. You can style the hangman figure and other elements using CSS.

JavaScript Code

The JavaScript code is included in the HTML code above. This code handles the game logic, including:

Choosing a random word
Displaying the word with underscores
Checking user guesses
Updating the game state based on guesses
Displaying the result (win or lose)

Hangman Game in HTML: Learn to Code Your Own

Hangman Game in HTML: Learn to Code Your Own

Hangman Game in HTML

HTML Code

How to Play

CSS Code

JavaScript Code