Word Guess Game (Wordle-Style) — Free JS Snippet

Building a Wordle clone is a popular exercise, but most naive implementations get one specific detail wrong: scoring a guess that contains a repeated letter. This snippet implements the real Wordle algorithm correctly — a two-pass, position-then-frequency scoring routine — alongside a 6x5 guess grid with flip-reveal animations, dual real-keyboard and on-screen keyboard input, and accurate color feedback that reflects actual letter availability rather than naive character presence checks.

The classic duplicate-letter bug and how this snippet avoids it

A naive scoring function checks, for each letter in the guess, whether that letter exists anywhere in the target word, and colors it yellow if so. This breaks the moment a letter is repeated: if the target word is CRANE and the guess is ERASE, a naive check would mark both E's in ERASE as present because "E" does exist in CRANE — but CRANE only has one E, so only one of the guessed E's should be colored, and the other should be gray. This snippet's scoreGuess() function solves this with two distinct passes and a shared consumed tracking array. Pass one walks the guess left to right and marks every position where the guessed letter exactly matches the target letter at that same index as 'correct' (green), immediately marking that target letter's index as consumed so it cannot be claimed again. Pass two then walks the guess again, and for every letter not already marked correct, searches the target word for an *unconsumed* occurrence of that letter using targetLetters.findIndex((t, idx) => t === letter && !consumed[idx]). If one is found, that position is marked 'present' (yellow) and the matched target index is consumed; if none is found, the letter remains 'absent' (gray) by the array's default fill. Because consumption is shared across both passes and tracked per target-letter-index rather than per unique-letter, a target with exactly one E will correctly color at most one guessed E as green or yellow combined — matching real Wordle behavior exactly.

Grid, flip animation, and staggered reveal

The board is a 6-row by 5-column grid of .cell divs built dynamically by buildGrid(). As the player types, updateCurrentRow() fills the active row's cells with letters and toggles a .filled class for a subtle border highlight before submission. On submit, applyResult() staggers each cell's reveal using setTimeout(..., c * 120), so the five tiles flip left to right in sequence rather than all at once — a small but important detail that gives each guess a satisfying cascading reveal instead of an abrupt color change. The flip itself is a CSS rotateX keyframe animation that rotates the tile through 90 degrees (momentarily edge-on) and back to 0, with the color class applied at the animation's midpoint conceptually — in practice both the .flip and status classes are added together so the color appears as the tile rotates back into view.

Dual input: real keyboard and on-screen keyboard

Two input paths funnel into the same handleKey() function. A document-level keydown listener maps physical key presses (e.key) to letters, Enter, and Backspace, calling handleKey() directly — this is how most players will interact with the game. Separately, buildKeyboard() renders a full on-screen QWERTY layout from the KEY_ROWS array, with each rendered <button> also wired to call handleKey() with its own key value on click, supporting touch devices with no physical keyboard. Both paths converge on identical logic, so there is only one code path to validate for guess length, letter matching, and submission — no duplicated state machine.

Keyboard color feedback with rank-based upgrades

As guesses are scored, updateKeyStatus() colors each on-screen key to reflect the best status ever observed for that letter, using a numeric rank map (absent: 0, present: 1, correct: 2) to ensure a key already shown green from an earlier guess is never downgraded to yellow or gray by a later guess that scores that same letter differently in a different position. This mirrors the letter-priority display convention used in the original Wordle and gives players a persistent, at-a-glance summary of every letter's status across all their guesses so far — similar in spirit to how a Tic-Tac-Toe win-line highlight persists to summarize the final board state.