Simple HTML Hangman Game

This is a simple hangman game built using HTML, CSS and JavaScript.

Game Rules

The computer selects a random word from a list of words.
The player has to guess the letters of the word one by one.
For each incorrect guess, a part of the hangman is drawn.
The player wins if they correctly guess all the letters of the word before the hangman is fully drawn.
The player loses if the hangman is fully drawn before they guess all the letters of the word.

Implementation

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Hangman Game</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<h1>Hangman Game</h1>
		<div class="word"></div>
		<div class="letters"></div>
		<div class="hangman"></div>
		<button id="reset">Reset</button>
	</div>

	<script src="script.js"></script>
</body>
</html>

CSS

.container {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.word {
	margin-bottom: 20px;
	font-size: 40px;
	font-weight: bold;
}

.letters {
	margin-bottom: 20px;
	font-size: 20px;
}

.hangman {
	margin-bottom: 20px;
}

.hangman img {
	max-width: 100%;
	height: auto;
}

button {
	font-size: 20px;
	padding: 10px 20px;
	margin-top: 20px;
}

JavaScript

// List of words
var words = ['javascript', 'html', 'css', 'hangman', 'game'];

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

// Word placeholders
var placeholders = [];

for (var i = 0; i < word.length; i++) {
	placeholders.push('_');
}

// Update word placeholders
function updateWord() {
	var wordElement = document.querySelector('.word');
	wordElement.innerText = placeholders.join(' ');
}

updateWord();

// Letters
var letters = 'abcdefghijklmnopqrstuvwxyz';

// Letter buttons
var letterButtons = [];

// Create letter buttons
function createLetterButtons() {
	var lettersElement = document.querySelector('.letters');

	for (var i = 0; i < letters.length; i++) {
		var letterButton = document.createElement('button');
		letterButton.innerText = letters[i];
		letterButton.disabled = letterButtons.includes(letters[i]);
		letterButton.addEventListener('click', function() {
			var letter = this.innerText;

			if (word.includes(letter)) {
				for (var i = 0; i < word.length; i++) {
					if (word[i] === letter) {
						placeholders[i] = letter;
					}
				}

				updateWord();

				if (!placeholders.includes('_')) {
					alert('You win!');
				}
			} else {
				letterButtons.push(letter);
				this.disabled = true;

				var hangmanElement = document.querySelector('.hangman');
				var hangmanImage = document.createElement('img');
				hangmanImage.src = 'hangman/' + (letterButtons.length + 1) + '.png';
				hangmanElement.appendChild(hangmanImage);

				if (letterButtons.length === 6) {
					alert('You lose!');
				}
			}
		});

		letterButtons.push(letters[i]);
		lettersElement.appendChild(letterButton);
	}
}

createLetterButtons();

// Reset button
var resetButton = document.querySelector('#reset');
resetButton.addEventListener('click', function() {
	// Reset word
	word = words[Math.floor(Math.random() * words.length)];
	placeholders = [];

	for (var i = 0; i < word.length; i++) {
		placeholders.push('_');
	}

	updateWord();

	// Reset letter buttons
	letterButtons = [];

	var lettersElement = document.querySelector('.letters');
	lettersElement.innerHTML = '';

	createLetterButtons();

	// Reset hangman
	var hangmanElement = document.querySelector('.hangman');
	hangmanElement.innerHTML = '';
});

Conclusion

This is a simple implementation of the classic hangman game using HTML, CSS and JavaScript. With some modifications, it can be made more challenging and visually appealing. Have fun playing!

Simple HTML Hangman Game: Learn to Code a Classic Game

Simple HTML Hangman Game: Learn to Code a Classic Game