Simple HTML Hangman Game

Play a classic hangman game right in your browser! This simple HTML implementation lets you guess letters to uncover a hidden word. For each incorrect guess, a part of the hangman is drawn. If the hangman is fully drawn before the word is guessed, you lose!

HTML Code

Here's the HTML structure for the game:

<!DOCTYPE html>
<html>
<head>
	<title>Hangman Game</title>
</head>
<body>
	<h1>Hangman Game</h1>
	<p>Guess the word:</p>
	<div id='word'></div>
	<p>Letters guessed:</p>
	<div id='letters'></div>
	<p>Guess a letter:</p>
	<input type='text' id='guess' maxlength='1'>
	<button type='button' onclick='guessLetter()'>Guess</button>
	<p id='message'></p>

	<script src='hangman.js'></script>
</body>
</html>

We have a basic layout with a heading, a message to guess the word, a div to display the hidden word, another message to display the letters guessed, a div to display the letters guessed, an input field to guess a letter, a button to submit the guess, and a message to display the result of the guess.

JavaScript Code

The JavaScript code brings the game to life:

var words = ['hangman', 'javascript', 'computer', 'programming', 'web']; // list of words to choose from
var word = words[Math.floor(Math.random() * words.length)]; // choose a random word
var guessedLetters = []; // list of guessed letters
var hangmanParts = ['head', 'body', 'left arm', 'right arm', 'left leg', 'right leg']; // parts of the hangman
var hangman = 0; // number of hangman parts drawn
var message = document.getElementById('message'); // message element
var wordElement = document.getElementById('word'); // word element
var lettersElement = document.getElementById('letters'); // letters element

// display the hidden word
function displayWord() {
	var display = '';
	for (var i = 0; i < word.length; i++) {
		if (guessedLetters.indexOf(word[i]) >= 0) {
			display += word[i];
		} else {
			display += '_';
		}
	}
	wordElement.innerHTML = display;
}

// handle the guess
function guessLetter() {
	var guess = document.getElementById('guess').value.toLowerCase();
	if (guess.length !== 1) {
		message.innerHTML = 'Please enter a single letter.';
		return;
	}
	if (guessedLetters.indexOf(guess) >= 0) {
		message.innerHTML = 'You already guessed that letter.';
		return;
	}
	guessedLetters.push(guess);
	lettersElement.innerHTML = guessedLetters.join(', ');
	if (word.indexOf(guess) < 0) {
		hangman++;
		message.innerHTML = 'Incorrect guess.';
		if (hangman === hangmanParts.length) {
			message.innerHTML = 'You lost! The word was ' + word + '.';
			document.getElementById('guess').disabled = true;
		}
	} else {
		message.innerHTML = 'Correct guess!';
	}
	displayWord();
}

displayWord();

We start by defining a list of words to choose from, choosing a random word, and initializing variables for the guessed letters, hangman parts, and message and element variables for the word and letters.

The displayWord() function shows the hidden word with underscores for unguessed letters and the correct letters for guessed letters. The guessLetter() function handles player guesses, checking for valid input, updating the guessed letters, and determining if the guess is correct or incorrect. If the guess is incorrect, the hangman count increases, and if the hangman is fully drawn, the game is lost. If the guess is correct, a message is displayed and the word is updated.

Conclusion

This is a simple HTML hangman game that you can easily modify and customize. You can add more words to the list, modify the layout, or add more features to make it more challenging. Have fun playing!

Simple HTML Hangman Game: Play Online

Simple HTML Hangman Game

HTML Code

JavaScript Code

Conclusion