Word Guess Game (Wordle-Style) with Daily Word & Levels
Word Guess Game (Wordle-Style) · Games · Plain HTML, CSS & JS · Live preview
For supporters
Source Code
Want the source code?
Play the game for free. Become a WebDevPuneet supporter to unlock the complete HTML, CSS and JavaScript source code, the exports (HTML, React, Vue, Angular, Tailwind) and Fork.
Extend with AI
Take This Snippet Further With AI
The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.
What's included
Features
About this UI Snippet
Word Guess — A Wordle-Style Game with a Daily Word, 20 Levels, Hard Mode, Hints and Shareable Results

Word Guess is a Wordle-style game: you have a limited number of tries to find a hidden word, and after each guess every letter is marked green (right letter, right place), yellow (the letter is in the word, but somewhere else) or grey (not in the word). This version is a complete game with real word lists, a Daily Word with a streak, 20 levels in four tiers, words of four, five and six letters, hard mode, hints, statistics and an emoji result you can copy and share. It is plain HTML, CSS and JavaScript with no libraries, images or audio files.
Scoring repeated letters correctly
The classic bug in word games is how repeated letters are coloured. scoreGuess() works in two passes. The first pass marks every exact match green and counts the letters of the answer that are still unmatched. The second pass then gives a yellow only while an unmatched copy of that letter remains. So guessing "SPEED" against "ABIDE" colours only one E, exactly as the original game does, and the on-screen keyboard keeps the best status each letter has ever had (green beats yellow beats grey).
Word lists that scale
The RAW object holds three lists, one per word length. Each has "answers" (common words that can be the hidden word) and "extra" words (valid guesses that will never be the answer, so rare words never feel unfair). A guess must be in the list, otherwise the row shakes and a message tells you. Plurals of the shorter answer lists are accepted as guesses automatically. words() normalises, de-duplicates and checks the length of every entry at start-up, so adding a word is just adding it to the string.
The same word for everyone
Levels and the Daily Word pick their answer with a small seeded random generator (mulberry32). Level i always uses the same seed, so level 7 is the same word for every player, and the Daily Word uses the day number, so everyone plays the same word on the same day. Clearing the daily word on consecutive days builds a streak, and the Practice buttons give you an endless supply of random words of any length.
Hard mode and hints
In hard mode, hardViolation() checks your guess against every earlier row: a green letter has to stay in its position, and a yellow letter has to appear in the guess (with the right number of copies). Four of the five-letter levels and the later six-letter levels force it. The Hint button tells you the letter at one position you have not found yet and shows it faintly in your next row. You get three hints per game and each one costs a star.
Stars, stats and sharing
Solving a level in the par number of guesses or fewer earns three stars, one more guess earns two, and any win earns one, minus one star when a hint was used. Solving a level unlocks the next. A statistics screen tracks games played, win rate, the current and best win streak and a guess-distribution chart that highlights your result. Copy result builds the familiar grid of green, yellow and black squares (orange and blue in high contrast mode) so you can share it without spoiling the word.
Feel and accessibility
Tiles pop as you type, the row shakes on an invalid word, tiles flip one by one to reveal their colours and bounce when you win, with matching sounds from a Web Audio synth. A high contrast colour option replaces green and yellow with orange and blue for colour-blind players. The game works with the physical keyboard and the on-screen keyboard, scales to short preview areas, and stacks on phones. Progress, statistics, the streak and your settings are saved to localStorage inside try/catch.
Step by step
How to Use
- 1Pick a level, the Daily Word or practiceThe menu shows 20 levels in four tiers: 4-letter words, 5-letter words, 5-letter words in hard mode, and 6-letter words with 7 tries. Level 1 is open at first and each solved level unlocks the next. The gold card is the Daily Word, and the Practice buttons give a random word of 4, 5 or 6 letters.
- 2Type a guessUse your keyboard or the on-screen keys, press Enter to submit and Backspace to delete. A guess has to be a real word from the list, otherwise the row shakes and a message tells you why.
- 3Read the coloursGreen means the right letter in the right place. Yellow means the letter is in the word but in a different place. Grey means it is not in the word (or all its copies are already accounted for). The on-screen keyboard keeps track of the best result for every letter.
- 4Use hard mode and hintsIn hard mode you must reuse the greens and yellows you have found. The Hint button (or the ? key) reveals one letter position and shows it faintly in the next row. You get three hints per game and each one costs a star.
- 5Earn stars and keep your streakSolve in the par number of guesses for three stars. Solve the Daily Word on consecutive days to build a streak. The result screen shows your guess-distribution chart and a Copy result button that makes a shareable emoji grid.
- 6Make it easier on the eyesThe colour button switches to a high contrast palette of orange and blue, and the sound button mutes the game. Your settings, stars and statistics are saved in this browser.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
scoreGuess() uses two passes. The first marks exact matches green and counts the letters of the answer that were not matched. The second pass marks a letter yellow only while an unmatched copy remains in that count, so a letter is never marked yellow more times than it appears in the answer. This is the same rule as the original game.
Yes. Add words to the strings in the RAW object: put common words in the "a" string for that length (they can become the hidden word) and rare words in the "x" string (they are only accepted as guesses). words() filters anything that is the wrong length or not lowercase letters, so a typo cannot break the game.
A guess must be in the word list for that length, which has several thousand words. Very rare words and some inflected forms are missing, and the game tells you "is not in the word list" instead of wasting a try. You can add more words to the "x" strings.
hardViolation() compares your new guess with every earlier guess and its colours. A letter that was green has to be in the same position, and a letter that was yellow has to appear in the guess, as many times as it was marked green or yellow. If a rule is broken the row shakes and a message names the letter. Some levels force hard mode, and you can switch it on yourself before your first guess.
Each level has a par pair, for example 3 and 4 guesses. Solving within the first number gives three stars, within the second gives two and any win gives one, minus one star if you used a hint. The daily streak goes up when you solve the Daily Word on the day after your last daily solve and resets after a missed day. Statistics (games played, win rate, win streak) count every finished game.
Yes. All localStorage access is wrapped in try/catch, so a blocked storage only means that your progress is not saved, and every sound call is wrapped too. The on-screen keyboard works by touch, and on narrow screens the layout stacks and the page scrolls.