Hangman Game using HTML, CSS & JavaScript

Relive a classic word puzzle with this Hangman Game, built entirely in HTML, CSS, and JavaScript. Players must guess the hidden word one letter at a time. Each incorrect guess adds a new part to the stickman drawing—guess the word before the full hangman is drawn!

Great for improving spelling skills and practicing JavaScript logic.

🧰 Technologies Used:

• HTML5 – Game layout, alphabet buttons, and word display

• CSS3 – Styling for layout, hangman drawing, animations

• JavaScript – Random word selection, input logic, drawing progression, win/loss detection

🎮 Features:

• Random word generation from predefined list

• Alphabet buttons to choose letters

• Hangman graphic updates with each incorrect guess

• Win and loss detection

• Restart functionality

• Responsive UI for mobile and desktop

🕹️ How to Play the Hangman Game

1. A random hidden word is selected.

2. Choose letters by clicking on the alphabet buttons.

3. If the letter is in the word, it appears in the correct position(s).

4. If the letter is not in the word, a part of the hangman figure is drawn.

5. You win if you guess the word before the drawing is complete.

6. You lose if all parts of the hangman are drawn before the word is guessed.

💡 Tip: Start by guessing common vowels like A, E, O!

🧠 Learning Highlights:

• Handling user input with event listeners

• Conditional logic for word checking

• DOM updates for dynamic gameplay

• Game state management and visual feedback

🛠 Customization Ideas:

• Add multiple word categories (animals, tech, movies)

• Allow keyboard input in addition to button clicks

• Add hints or difficulty levels

• Animate the hangman drawing with CSS