Word Ladder Game — Free HTML CSS JS Snippet

A word ladder (also called a doublet or word golf) is a classic word puzzle invented by Lewis Carroll: transform a start word into an end word by changing exactly one letter at a time, with every intermediate step required to be a real word of the same length. This snippet implements a fully playable version — an input form, a running trail of accepted steps, per-letter diff highlighting, move counting, and a small built-in dictionary used to validate every guess — without any backend or external word-list API.

Representing a puzzle as a chain plus an accepted dictionary

Each entry in the PUZZLES array bundles two things: a known-solvable chain from the start word to the end word (used only to know the target and to power the hint button), and a small dict array of every word the puzzle will accept as a valid intermediate step, including the chain words themselves. Keeping the dictionary intentionally small and puzzle-specific — rather than shipping a full English word list — keeps the snippet self-contained while still letting players find alternate valid ladders beyond the exact one baked into chain, since any accepted word from dict that satisfies the one-letter rule is a legal move.

Validating a guess: length, single-letter diff, dictionary membership, no repeats

submitGuess() runs a guess through four checks in order before accepting it. First, the guessed word's length must match the current word's length — a word ladder never changes word length mid-chain. Second, diffCount() compares the guess to the current word character-by-character and counts how many positions differ; the guess is rejected unless exactly one letter changed, which is the entire rule that makes the puzzle a "ladder" rather than free-form guessing. Third, the guess must appear in the puzzle's dict Set (uppercased for case-insensitive matching) — this stops nonsense strings that happen to differ by one letter from being accepted as real words. Fourth, a repeat check via trail.includes(word) prevents padding the ladder by bouncing back and forth between two words already used.

The diff-highlighting trail

renderTrail() rebuilds the visible list of accepted words after every successful move. For every word after the first, it compares each character position against the previous word in the trail and wraps any differing character in a .diff-letter span, which is styled in the accent color. This turns an otherwise flat list of words into a readable record of exactly which letter changed at each step, reinforcing the puzzle's core mechanic visually rather than just verbally.

Move counting and a persisted best score

A moves counter increments on every accepted step and is shown live in the stats header. When the current word matches the puzzle's final target word, solved is set to true, the input is disabled, and if this run's moves total is lower than any previous best for the session, best updates — giving returning players on the same puzzle set a concrete number to beat, purely from in-memory state (no localStorage is used, so best resets on page reload).

Hints without giving away the whole solution

The hint button does not reveal the full chain at once. It looks at trail.length — the number of words already accepted, including the start word — and reveals only chain[trail.length], i.e. the next single step in the reference solution. Because players can legally deviate from the reference chain (any dictionary word satisfying the one-letter rule is accepted), the hint is best read as "a valid next word," not "the only correct next word."