Hangman Word Guessing Game — Free HTML CSS JS Snippet

Hangman is one of the oldest word-guessing games, and its core mechanic translates cleanly into a small, self-contained state machine: a hidden word, a limited number of wrong guesses, and a visual penalty that escalates with every mistake. This snippet builds a fully playable version with a real SVG-drawn gallows figure that reveals one new body part per wrong guess, a clickable on-screen QWERTY keyboard, and full physical-keyboard support, all driven by a small set of JavaScript functions with no external word-guessing library.

The gallows as layered, pre-drawn SVG

Rather than drawing the hangman figure with JavaScript canvas calls or swapping image files, the entire gallows and figure are pre-drawn once as a single SVG containing eight separate shape elements: the gallows post and beam (always visible), then seven body-part elements — the rope, head, body, both arms, and both legs — each given the class hm-part and starting at opacity: 0. A PART_ORDER array in JavaScript lists these seven part class names in the exact sequence they should appear. Every time a wrong guess is made, revealBodyPart(wrongCount - 1) looks up the next class name in that array and adds a .show class, which flips opacity to 1 with a CSS transition. This means the entire drawing logic is just an array index lookup plus a class toggle — no path recalculation, no redraw, and the reveal animation is handled entirely by the CSS transition: opacity 0.25s ease rule.

Word state and letter-slot rendering

The secret word is chosen once per game with WORDS[Math.floor(Math.random() * WORDS.length)] from a small hardcoded word list, and correctly-guessed letters are tracked in a Set called guessedLetters — a Set is used specifically because it gives O(1) has() lookups and naturally prevents duplicate guesses from being counted twice. renderWord() rebuilds the row of letter slots on every guess: it iterates each character of the secret word and, for characters present in guessedLetters, renders the actual letter with a .revealed class that switches its underline to the accent colour; otherwise it renders an underscore placeholder. Because a Set lookup is used rather than tracking revealed positions directly, a single correct guess of a repeated letter (for example guessing "A" in "GALAXY") reveals every occurrence of that letter simultaneously, exactly as the physical game works.

Dual input: on-screen keyboard and real keyboard

The on-screen keyboard is generated programmatically by looping character codes 65 through 90 (A-Z) and creating one button per letter, each wired to guessLetter(letter) via addEventListener. A parallel keydown listener on document normalises e.key to uppercase and, if it is a single A-Z character, calls the exact same guessLetter() function — so physical typing and on-screen clicking share one code path with no duplicated logic. Once a letter has been guessed, its corresponding button gets disabled = true plus either a .correct (green) or .wrong (red) class, which both greys it out via reduced opacity and blocks further clicks or accidental re-guesses of the same letter from the keyboard listener, since guessedLetters.has(letter) short-circuits guessLetter() at the top.

Win and loss detection

After every guess, checkGameEnd() runs two checks: [...secretWord].every(ch => guessedLetters.has(ch)) tests whether every unique character in the word has been guessed (a win), and wrongCount >= MAX_WRONG (set to 7, matching the seven gallows parts revealed after the always-visible frame) tests for a loss. On a loss, revealWordFully() forcibly renders every letter of the secret word regardless of what was guessed, so the player sees the answer. Either outcome disables the entire keyboard and reveals the "Play Again" button, which calls newGame() to pick a fresh random word, reset guessedLetters, hide all gallows parts, and rebuild the keyboard from scratch.