Wordle — Word Puzzle

A complete, production-ready HTML5 word-guessing game built for commercial distribution. Zero external JavaScript dependencies. Runs on any modern browser straight from a static file host with no build step required.

Overview

Word·le challenges players to guess a secret word within a limited number of tries, with each guess revealing which letters are correct, present, or absent. The game features three difficulty tiers plus a seeded Daily Challenge, a separate 5/6/7-letter word-length selector, five selectable board themes, an XP progression system with seven rank tiers, nine achievements, a local best-times leaderboard, a Hard Mode, a Custom Word pass-and-play mode, a limited-use hint system, and a full sponsor/ad integration framework — all in a single self-contained HTML5 package.

About the Game

• Entry point is index.html — no build step, no CLI tools, no package manager required
• Pure vanilla HTML5, CSS3, and ES6+ JavaScript — zero libraries, zero frameworks
• Game engine and UI are contained in a single IIFE in scripts/js/game.js
• Word lists (valid answers and valid guesses, for 5, 6, and 7-letter puzzles) live in scripts/js/words-data.js
• All CSS lives in scripts/css/style.css; sponsor/ad placeholder in scripts/sponsor/sponsor-placeholder.html
• Ads are switched on or off from a single file: config/ads.js
• One background image asset: scripts/images/background.jpg
• Procedural Web Audio API sound engine — no audio files bundled
• All game state persisted to localStorage with graceful degradation when storage is unavailable
• Browser support check on boot — displays a dedicated “Browser Not Supported” screen if requirements are not met

Difficulty Modes

• Easy — 7 guesses. Described in-game as “Relaxed pace”.
• Medium — 6 guesses. Described in-game as “Classic Wordle”.
• Hard — 5 guesses. Described in-game as “Expert only”.
• Daily Challenge — the same word for every player on a given calendar day, seeded from the current date (YYYY * 10000 + MM * 100 + DD). Always uses 6 guesses regardless of the difficulty tier last selected. The card is marked visually as done once the player completes that day’s word, until the next calendar day.

Word length is chosen separately from difficulty, on the same screen: 5 letters (“Classic Wordle”), 6 letters (“A bit tougher”), or 7 letters (“Expert challenge”). The selected word length applies to Easy/Medium/Hard, Daily, and Custom Word alike.

Words are drawn at random (or, for Daily, by date-seeded selection) from the built-in answer list for the chosen word length. There is no puzzle generator — the answer and valid-guess lists are pre-built word lists bundled in words-data.js.

Themes

Five board themes are selectable from the “Board · Style” screen. The active theme is saved to localStorage and restored on every visit. The default theme is Warm Paper.

• Warm Paper — classic parchment feel (default)
• Jungle — dense canopy darkness
• Neon City — electric arcade glow
• Midnight Ink — sleek deep universe
• Rose Gold — warm blush elegance (marked as new)

How to Play

1. From the lobby, press Play to go to the difficulty screen.
2. Select Easy, Medium, Hard, or Daily, and separately choose a word length (5, 6, or 7 letters).
3. Optionally use the Custom Word panel to set your own secret word for pass-and-play instead of pressing Start Puzzle.
4. Type letters on the on-screen keyboard or a physical keyboard to fill the current row, then submit the guess.
5. Each submitted guess (unless it’s a Custom Word puzzle) must be a real word from the built-in dictionary for the selected word length.
6. After submitting, each tile reveals green (correct letter, correct spot), yellow (correct letter, wrong spot), or gray (letter not in the word).
7. Solve the word before you run out of guesses.

Game Screen Controls

• Submit — submits the current row as a guess (same as pressing Enter)
• Hint — reveals one correct letter in its correct position; limited uses per puzzle based on difficulty (Easy: 2, Medium/Hard/Daily: 1)
• Clear — clears all letters typed into the current, not-yet-submitted row
• Reset — shows a confirmation popup, then restarts the same word from scratch, clearing all guesses and the timer
• New — shows a confirmation popup, then generates a fresh puzzle at the same difficulty
• Pause — pauses the timer and opens a popup with options to Resume, start a New Game, or Quit to lobby

Keyboard Shortcuts

• A–Z — type a letter into the current row
• Enter — submit the current guess
• Backspace / Delete — erase the last letter typed
• Ctrl+Z — clear the current (unsubmitted) row

The on-screen keyboard also recolors each key green, yellow, or gray as letters are guessed, so players can track which letters have already been tried.

Hard Mode

An optional Hard Mode toggle is available in Settings. When enabled, any letter revealed as correct (green) in a previous guess must be placed in the same position in later guesses, and any letter found to be present (yellow) must be reused somewhere in later guesses. Guesses that don’t satisfy these constraints are rejected with an explanatory message.

Custom Word (Pass-and-Play)

Players can set their own secret word — matching the currently selected word length — from the Custom Word panel on the difficulty screen. The game validates that the entered word is exactly the right number of letters. A custom puzzle is always played with 6 guesses and 1 hint (Medium-difficulty rules), displays a “Custom” badge in the game header, and is not recorded on the leaderboard.

XP and Rank System

Players earn XP on each puzzle they solve. XP is a base amount per difficulty, plus a bonus for every unused guess remaining, a bonus for using zero hints, and a bonus for finishing under the par time. The seven rank tiers are:

• Apprentice — 0 XP
• Solver — 300 XP
• Thinker — 800 XP
• Expert — 1,800 XP
• Master — 3,500 XP
• Sage — 6,000 XP
• Grand Master — 10,000 XP

The current rank and progress toward the next tier are shown as an XP bar in the lobby.

Achievements

Nine achievements are tracked automatically and displayed as gold badges in the lobby once unlocked:

• First Win — complete one puzzle
• Solved Clean — win a puzzle without using any hints
• Genius — win a puzzle in 2 guesses or fewer
• Swift Solver — set a best time under 90 seconds
• 3-Day Streak — maintain a 3-day win streak
• 7-Day Streak — maintain a 7-day win streak
• Hard Mode Win — win at least one Hard-difficulty puzzle
• 10 Puzzles — complete 10 puzzles total
• Daily Champ — complete at least one Daily Challenge

Leaderboard

A local best-times leaderboard is accessible from the lobby. It stores the top results (default: 10 entries per difficulty, configurable) across Easy, Medium, and Hard tabs, ranked by fewest guesses used and then by fastest time. Each entry records time, guesses used, and date. The leaderboard can be cleared from the leaderboard screen. Daily Challenge and Custom Word results are not recorded on the leaderboard.

Lobby Statistics

The lobby displays three at-a-glance stats: total puzzles Played, personal Best Time, and current win Streak.

Settings

All settings are accessible from the lobby settings button. There is no persistent localStorage save of settings between sessions — settings apply for the current session only.

• Sound Effects — toggle procedural Web Audio API sounds (keystrokes, tile reveals, win/lose jingles). No background music is included.
• Hard Mode — require revealed hints and correct/present letters to be reused in later guesses
• Animated Particles — toggle the floating background particle animation on the canvas layer

Ad Monetization

The game ships with a fully integrated, configurable sponsor/ad system ready to connect to any ad network.

• Ads are displayed in a full-screen overlay popup containing a sandboxed iframe sized to the standard 300×250 Medium Rectangle format
• A countdown timer starts at 5 seconds (configurable via ads.preGame.countdown). The Skip button is disabled until the countdown reaches zero, then shows “Skip Ad →”
• Ad content is loaded from scripts/sponsor/sponsor-placeholder.html. The file contains clearly marked AD REPLACEMENT START and AD REPLACEMENT END comment blocks showing exactly where to paste ad code
• The entire ad system can be disabled by setting ads.enabled or ads.preGame.enabled to false in config/ads.js. As shipped, config/ads.js sets ads.enabled: false, so the sponsor popup is off by default until switched on
• Ad trigger points: before a puzzle starts, whether from Start Puzzle, Play Again, or Custom Word’s “Set & Play”

Important: Ad network integrations such as Google AdSense, AdMob, and ironSource are third-party external services not affiliated with or included in this product. Each network operates independently and has its own account registration process, eligibility requirements, approval policies, and potentially associated costs. Wordle Puzzle provides the ad slot infrastructure only — buyers are solely responsible for obtaining their own accounts, meeting each network’s requirements, and complying with their respective terms of service.

Configuration System

Game behavior is controlled by a window.WORDLE_CONFIG object, which config/ads.js creates and adds its ad settings to. Add further keys to that same object (or your own script loaded before game.js) to customize other behavior. All values have built-in defaults so the game runs without any config. Configurable options include:

• Guess allowance and label text per difficulty (difficulty.easy.guesses, difficulty.medium.guesses, difficulty.hard.guesses, and matching .label / .desc keys)
• Default theme (defaultTheme)
• Show/hide timer (showTimer)
• Hint limits per difficulty (maxHints.easy, maxHints.medium, maxHints.hard, maxHints.daily)
• XP values per difficulty and bonuses (xp.easy, xp.medium, xp.hard, xp.spareGuessBonus, xp.noHintBonus, xp.speedBonus)
• Par times per difficulty for the speed bonus (parTime.easy, parTime.medium, parTime.hard)
• Leaderboard max entries (leaderboardMaxEntries)
• Ad system enable flags and countdown duration (ads.enabled, ads.preGame.enabled, ads.preGame.countdown)
• Particle count, speed, and enable flag (particles.enabled, particles.count, particles.speed)
• Confetti enable and count (confetti.enabled, confetti.count)

Tech Stack

• HTML5 — all screens and markup in a single index.html
• CSS3 — custom properties for theming, flexbox, keyframe animations, canvas particle layer
• Vanilla JavaScript ES6+ — single IIFE module, arrow functions, Set/Map, optional chaining, template literals
• Web Audio API — procedural sound effects (type, erase, error, win, lose, click, and per-tile reveal tones for correct/present/absent); no audio files
• Canvas API — floating background particles and win confetti animation
• Google Fonts CDN — Crimson Pro (400, 600), DM Sans (300, 400, 500)
• localStorage — theme, stats, achievements, leaderboard, and daily challenge state
• No frameworks, no npm, no build tooling

Third-Party / External CDN Dependencies

This project relies on an external CDN for one resource. This dependency is third-party, hosted and operated outside of this project and outside of the seller’s control — its uptime, availability, and any future changes to its terms are the responsibility of the provider, not the seller.

• Google Fonts — loaded from fonts.googleapis.com via an @import in scripts/css/style.css, providing the Crimson Pro (400, 600) and DM Sans (300, 400, 500) font families.

An active internet connection is required for the browser to reach this CDN and load these fonts. Without one, the game still runs normally — text simply falls back to the browser’s default system font. Buyers who need a fully offline build can download the font files, host them locally, and replace the @import line in style.css with local @font-face rules.

No other third-party or CDN-hosted libraries (such as Chart.js, jsPDF, three.js, or html2canvas) are used anywhere in this codebase.

Requirements and Compatibility

• Any modern browser: Chrome, Firefox, Safari, Edge (browser support is checked at boot and requires localStorage, AudioContext, document.querySelector, Promise, Set, and Array.from)
• No server-side code required — deploy to any static file host (GitHub Pages, Netlify, S3, cPanel, etc.)
• Internet connection required for Google Fonts (Crimson Pro and DM Sans) to load correctly
• Fully responsive — layout adapts to desktop, tablet, and mobile screen sizes
• Internet Explorer is not supported
• All localStorage access is wrapped in try/catch for safe degradation in private browsing mode