Word Unscramble Puzzle Game — Free HTML CSS JS Snippet

Word unscramble puzzles are one of the oldest and most durable casual game formats because the core loop is instantly understandable — look at a jumble of letters, rearrange them mentally, type the word you see. This snippet implements a complete, replayable version of that loop entirely in vanilla JavaScript: a hardcoded word list, a real Fisher-Yates shuffle algorithm, a scoring system that rewards unaided solves, and a hint mechanic that trades points for help. There is no backend and no dependency — everything runs client-side against a plain JavaScript array.

How the scrambling actually works

The word pool is a flat array of 15 lowercase words of varying length (six to seven letters each, chosen so the puzzle is neither trivially short nor frustratingly long). scrambleWord() splits the target word into a character array and runs the classic Fisher-Yates shuffle: iterate from the last index down to the first, swapping each element with a randomly chosen earlier (or equal) element. This produces a mathematically uniform random permutation, unlike naive sort(() => Math.random() - 0.5) shuffles which are provably biased. Because a truly random shuffle can occasionally return the original word unchanged, the function retries up to ten times if the scrambled result matches the source word exactly.

Rounds, the word pool, and avoiding repeats

Rather than picking a random word from the full list on every round (which can repeat the same word twice in a row), the game shuffles the entire word list once per pass and walks through it sequentially with a poolIndex pointer. When the pointer reaches the end of the shuffled pool, refillPool() reshuffles the same 15 words into a fresh random order and resets the index to zero, so the game stays endlessly replayable while guaranteeing every word is seen once before any repeats.

The hint system and its effect on scoring

Clicking Hint does not spoil the puzzle outright — it reveals exactly one additional letter in its correct position, tracked in a hintedPositions Set keyed by character index. A separate row of boxes beneath the scrambled tiles mirrors the target word's length; unrevealed boxes stay blank while hinted ones display the letter with an accent-coloured underline. Crucially, the scrambled letter tiles themselves are never reordered by a hint — hints only affect the answer-key row, so the player still has to do the unscrambling work for the remaining letters. Because hintedPositions.size is read directly when a correct guess is submitted, scoring naturally and transparently reflects how much help was used.

Scoring formula and the shuffle button

A correct guess awards Math.max(100 - hintsUsed * 25, 25) points — a flawless, no-hint solve is worth 100 points, each hint costs 25, and the score floors at 25 so no correct answer is ever worth zero. The separate Shuffle button is purely cosmetic: it re-runs scrambleWord() on the same target word and re-renders the letter tiles in a new random order, giving players who feel visually "stuck" on one arrangement a fresh look at the same letters without changing the underlying answer or resetting any hint progress.

Feedback, state resets, and accessibility

Submitting the form (via the Submit button or pressing Enter) compares the trimmed, lowercased input against currentWord. A correct match adds a green .correct class to the input, disables further guessing, and reveals the full hint row as confirmation; an incorrect guess triggers a CSS shake keyframe animation on the input by removing and re-adding the class (forcing a reflow with void guessInput.offsetWidth so the animation restarts on consecutive wrong guesses) alongside a red error message. The aria-live="polite" attribute on the feedback paragraph means screen readers announce the result without needing focus to move. New game fully resets score, round count, and the word pool for a clean restart at any time.