Hangman Game

Hangman is a classic word guessing game. The objective of the game is to guess the secret word before the hangman is completely drawn.

How to Play

Press the 'Start' button to begin the game.
A secret word will be randomly selected from the list of words.
The word will be displayed as blank spaces representing each letter.
Guess one letter at a time by clicking on the corresponding letter button below the word.
If the letter is in the word, it will be revealed in the appropriate blank space.
If the letter is not in the word, a part of the hangman will be drawn.
Keep guessing until you have guessed the word correctly or the hangman is completely drawn.

The Game

<!DOCTYPE html>
<html>
<head>
	<title>Hangman Game</title>
	<style>
		body {
			font-family: Arial, sans-serif;
		}

		h1 {
			text-align: center;
		}

		#word {
			font-size: 2em;
			margin: 0.5em;
		}

		#buttons {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 1em;
		}

		.button {
			font-size: 1.5em;
			margin: 0.2em;
			padding: 0.2em 0.5em;
			border-radius: 0.2em;
			border: none;
			background-color: #ddd;
			cursor: pointer;
		}

		.button:hover {
			background-color: #ccc;
		}

		#hangman {
			display: flex;
			justify-content: center;
			margin: 1em;
		}

		.part {
			fill: transparent;
			stroke: #333;
			stroke-width: 5;
		}

		.visible {
			fill: #333;
		}
	</style>
</head>
<body>
	<h1>Hangman Game</h1>

	<div id='word'></div>

	<div id='buttons'></div>

	<svg id='hangman' viewBox='0 0 100 100' width='200' height='200'>
		<line class='part' x1='5' y1='95' x2='95' y2='95' />
		<line class='part' x1='25' y1='95' x2='25' y2='5' />
		<line class='part' x1='25' y1='5' x2='75' y2='5' />
		<line class='part' x1='75' y1='5' x2='75' y2='15' />
		<circle class='part' cx='75' cy='25' r='10' />
		<line class='part' x1='75' y1='35' x2='75' y2='60' />
		<line class='part' x1='75' y1='45' x2='60' y2='50' />
		<line class='part' x1='75' y1='45' x2='90' y2='50' />
	</svg>

	<script>
		// List of words
		var words = ['hangman', 'javascript', 'html', 'css', 'jquery', 'bootstrap'];

		// Randomly select a word
		var word = words[Math.floor(Math.random() * words.length)];

		// Initialize the word display
		var wordDisplay = '';
		for (var i = 0; i < word.length; i++) {
			wordDisplay += '_ ';
		}
		document.getElementById('word').innerHTML = wordDisplay;

		// Initialize the list of letters
		var letters = 'abcdefghijklmnopqrstuvwxyz'.split('');

		// Initialize the letter buttons
		var buttons = '';
		for (var i = 0; i < letters.length; i++) {
			buttons += '<button class="button" onclick="guess('' + letters[i] + '')">' + letters[i] + '</button>';
		}
		document.getElementById('buttons').innerHTML = buttons;

		// Initialize the hangman parts
		var parts = document.getElementsByClassName('part');
		for (var i = 0; i < parts.length; i++) {
			parts[i].classList.add('visible');
		}

		// Initialize the number of wrong guesses
		var wrongGuesses = 0;

		// Function to process a guess
		function guess(letter) {
			// Disable the button
			document.getElementById(letter).disabled = true;

			// Check if the letter is in the word
			if (word.indexOf(letter) == -1) {
				// Increment the number of wrong guesses
				wrongGuesses++;

				// Update the hangman display
				parts[wrongGuesses - 1].classList.remove('visible');
			} else {
				// Update the word display
				var newWordDisplay = '';
				for (var i = 0; i < word.length; i++) {
					if (word[i] == letter) {
						newWordDisplay += letter + ' ';
					} else {
						newWordDisplay += wordDisplay[2 * i] + wordDisplay[2 * i + 1];
					}
				}
				document.getElementById('word').innerHTML = newWordDisplay;
				wordDisplay = newWordDisplay;
			}

			// Check if the game is over
			if (wrongGuesses == parts.length || wordDisplay.indexOf('_') == -1) {
				// Disable all buttons
				var buttons = document.getElementsByClassName('button');
				for (var i = 0; i < buttons.length; i++) {
					buttons[i].disabled = true;
				}

				// Display the result
				if (wrongGuesses == parts.length) {
					alert('You lose! The word was ' + word + '.');
				} else {
					alert('You win! The word was ' + word + '.');
				}
			}
		}
	</script>
</body>
</html>

Conclusion

This simple HTML hangman game is a fun way to test your word guessing skills. Enjoy!

Simple HTML Hangman Game: Guess the Word and Beat the Hangman

Simple HTML Hangman Game: Guess the Word and Beat the Hangman

Hangman Game

How to Play

The Game

Conclusion