LIVE PREVIEWBUY FOR $29

Wordle — Phrase Puzzle

A whole, production-ready HTML5 word-guessing recreation constructed for business distribution. Zero exterior JavaScript dependencies. Runs on any trendy browser straight from a static file host with no construct step required.

Overview

Phrase·le challenges gamers to guess a secret phrase inside a restricted variety of tries, with every guess revealing which letters are right, current, or absent. The sport options three issue tiers plus a seeded Day by day Problem, a separate 5/6/7-letter word-length selector, 5 selectable board themes, an XP development system with seven rank tiers, 9 achievements, a neighborhood best-times leaderboard, a Exhausting Mode, a Customized Phrase pass-and-play mode, a limited-use trace system, and a full sponsor/advert integration framework — all in a single self-contained HTML5 bundle.

Concerning the Recreation

• Entry level is index.html — no construct step, no CLI instruments, no bundle supervisor required
• Pure vanilla HTML5, CSS3, and ES6+ JavaScript — zero libraries, zero frameworks
• Recreation engine and UI are contained in a single IIFE in scripts/js/recreation.js
• Phrase lists (legitimate solutions and legitimate guesses, for five, 6, and 7-letter puzzles) dwell in scripts/js/words-data.js
• All CSS lives in scripts/css/model.css; sponsor/advert placeholder in scripts/sponsor/sponsor-placeholder.html
• Advertisements are switched on or off from a single file: config/advertisements.js
• One background picture asset: scripts/photographs/background.jpg
• Procedural Internet Audio API sound engine — no audio recordsdata bundled
• All recreation state endured to localStorage with swish degradation when storage is unavailable
• Browser assist verify on boot — shows a devoted “Browser Not Supported” display screen if necessities will not be met

Issue Modes

• Straightforward — 7 guesses. Described in-game as “Relaxed tempo”.
• Medium — 6 guesses. Described in-game as “Traditional Wordle”.
• Exhausting — 5 guesses. Described in-game as “Professional solely”.
• Day by day Problem — the identical phrase for each participant on a given calendar day, seeded from the present date (YYYY * 10000 + MM * 100 + DD). All the time makes use of 6 guesses whatever the issue tier final chosen. The cardboard is marked visually as finished as soon as the participant completes that day’s phrase, till the following calendar day.

Phrase size is chosen individually from issue, on the identical display screen: 5 letters (“Traditional Wordle”), 6 letters (“A bit harder”), or 7 letters (“Professional problem”). The chosen phrase size applies to Straightforward/Medium/Exhausting, Day by day, and Customized Phrase alike.

Phrases are drawn at random (or, for Day by day, by date-seeded choice) from the built-in reply checklist for the chosen phrase size. There isn’t a puzzle generator — the reply and valid-guess lists are pre-built phrase lists bundled in words-data.js.

Themes

5 board themes are selectable from the “Board · Fashion” display screen. The lively theme is saved to localStorage and restored on each go to. The default theme is Heat Paper.

• Heat Paper — traditional parchment really feel (default)
• Jungle — dense cover darkness
• Neon Metropolis — electrical arcade glow
• Midnight Ink — smooth deep universe
• Rose Gold — heat blush class (marked as new)

Find out how to Play

1. From the foyer, press Play to go to the problem display screen.
2. Choose Straightforward, Medium, Exhausting, or Day by day, and individually select a phrase size (5, 6, or 7 letters).
3. Optionally use the Customized Phrase panel to set your individual secret phrase for pass-and-play as a substitute of urgent Begin Puzzle.
4. Kind letters on the on-screen keyboard or a bodily keyboard to fill the present row, then submit the guess.
5. Every submitted guess (until it’s a Customized Phrase puzzle) have to be an actual phrase from the built-in dictionary for the chosen phrase size.
6. After submitting, every tile reveals inexperienced (right letter, right spot), yellow (right letter, fallacious spot), or grey (letter not within the phrase).
7. Resolve the phrase earlier than you run out of guesses.

Recreation Display Controls

• Submit — submits the present row as a guess (identical as urgent Enter)
• Trace — reveals one right letter in its right place; restricted makes use of per puzzle based mostly on issue (Straightforward: 2, Medium/Exhausting/Day by day: 1)
• Clear — clears all letters typed into the present, not-yet-submitted row
• Reset — exhibits a affirmation popup, then restarts the identical phrase from scratch, clearing all guesses and the timer
• New — exhibits a affirmation popup, then generates a recent puzzle on the identical issue
• Pause — pauses the timer and opens a popup with choices to Resume, begin a New Recreation, or Stop to foyer

Keyboard Shortcuts

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

The on-screen keyboard additionally recolors every key inexperienced, yellow, or grey as letters are guessed, so gamers can monitor which letters have already been tried.

Exhausting Mode

An non-obligatory Exhausting Mode toggle is obtainable in Settings. When enabled, any letter revealed as right (inexperienced) in a earlier guess have to be positioned in the identical place in later guesses, and any letter discovered to be current (yellow) have to be reused someplace in later guesses. Guesses that don’t fulfill these constraints are rejected with an explanatory message.

Customized Phrase (Go-and-Play)

Gamers can set their very own secret phrase — matching the at present chosen phrase size — from the Customized Phrase panel on the problem display screen. The sport validates that the entered phrase is strictly the fitting variety of letters. A customized puzzle is at all times performed with 6 guesses and 1 trace (Medium-difficulty guidelines), shows a “Customized” badge within the recreation header, and isn’t recorded on the leaderboard.

XP and Rank System

Gamers earn XP on every puzzle they remedy. XP is a base quantity per issue, plus a bonus for each unused guess remaining, a bonus for utilizing zero hints, and a bonus for ending below the par time. The seven rank tiers are:

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

The present rank and progress towards the following tier are proven as an XP bar within the foyer.

Achievements

9 achievements are tracked mechanically and displayed as gold badges within the foyer as soon as unlocked:

• First Win — full one puzzle
• Solved Clear — win a puzzle with out utilizing any hints
• Genius — win a puzzle in 2 guesses or fewer
• Swift Solver — set a finest time below 90 seconds
• 3-Day Streak — keep a 3-day win streak
• 7-Day Streak — keep a 7-day win streak
• Exhausting Mode Win — win at the very least one Exhausting-difficulty puzzle
• 10 Puzzles — full 10 puzzles whole
• Day by day Champ — full at the very least one Day by day Problem

Leaderboard

A neighborhood best-times leaderboard is accessible from the foyer. It shops the highest outcomes (default: 10 entries per issue, configurable) throughout Straightforward, Medium, and Exhausting tabs, ranked by fewest guesses used after which by quickest time. Every entry data time, guesses used, and date. The leaderboard will be cleared from the leaderboard display screen. Day by day Problem and Customized Phrase outcomes will not be recorded on the leaderboard.

Foyer Statistics

The foyer shows three at-a-glance stats: whole puzzles Performed, private Greatest Time, and present win Streak.

Settings

All settings are accessible from the foyer settings button. There isn’t a persistent localStorage save of settings between classes — settings apply for the present session solely.

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

Advert Monetization

The sport ships with a totally built-in, configurable sponsor/advert system prepared to hook up with any advert community.

• Advertisements are displayed in a full-screen overlay popup containing a sandboxed iframe sized to the usual 300×250 Medium Rectangle format
• A countdown timer begins at 5 seconds (configurable through advertisements.preGame.countdown). The Skip button is disabled till the countdown reaches zero, then exhibits “Skip Advert →”
• Advert content material is loaded from scripts/sponsor/sponsor-placeholder.html. The file accommodates clearly marked AD REPLACEMENT START and AD REPLACEMENT END remark blocks exhibiting precisely the place to stick advert code
• All the advert system will be disabled by setting advertisements.enabled or advertisements.preGame.enabled to false in config/advertisements.js. As shipped, config/advertisements.js units advertisements.enabled: false, so the sponsor popup is off by default till switched on
• Advert set off factors: earlier than a puzzle begins, whether or not from Begin Puzzle, Play Once more, or Customized Phrase’s “Set & Play”

Essential: Advert community integrations corresponding to Google AdSense, AdMob, and ironSource are third-party exterior companies not affiliated with or included on this product. Every community operates independently and has its personal account registration course of, eligibility necessities, approval insurance policies, and doubtlessly related prices. Wordle Puzzle gives the advert slot infrastructure solely — consumers are solely liable for acquiring their very own accounts, assembly every community’s necessities, and complying with their respective phrases of service.

Configuration System

Recreation conduct is managed by a window.WORDLE_CONFIG object, which config/advertisements.js creates and provides its advert settings to. Add additional keys to that very same object (or your individual script loaded earlier than recreation.js) to customise different conduct. All values have built-in defaults so the sport runs with none config. Configurable choices embody:

• Guess allowance and label textual content per issue (issue.straightforward.guesses, issue.medium.guesses, issue.arduous.guesses, and matching .label / .desc keys)
• Default theme (defaultTheme)
• Present/conceal timer (showTimer)
• Trace limits per issue (maxHints.straightforward, maxHints.medium, maxHints.arduous, maxHints.each day)
• XP values per issue and bonuses (xp.straightforward, xp.medium, xp.arduous, xp.spareGuessBonus, xp.noHintBonus, xp.speedBonus)
• Par instances per issue for the pace bonus (parTime.straightforward, parTime.medium, parTime.arduous)
• Leaderboard max entries (leaderboardMaxEntries)
• Advert system allow flags and countdown period (advertisements.enabled, advertisements.preGame.enabled, advertisements.preGame.countdown)
• Particle rely, pace, and allow flag (particles.enabled, particles.rely, particles.pace)
• Confetti allow and rely (confetti.enabled, confetti.rely)

Tech Stack

• HTML5 — all screens and markup in a single index.html
• CSS3 — customized properties for theming, flexbox, keyframe animations, canvas particle layer
• Vanilla JavaScript ES6+ — single IIFE module, arrow capabilities, Set/Map, non-obligatory chaining, template literals
• Internet Audio API — procedural sound results (kind, erase, error, win, lose, click on, and per-tile reveal tones for proper/current/absent); no audio recordsdata
• Canvas API — floating background particles and win confetti animation
• Google Fonts CDN — Crimson Professional (400, 600), DM Sans (300, 400, 500)
• localStorage — theme, stats, achievements, leaderboard, and each day problem state
• No frameworks, no npm, no construct tooling

Third-Social gathering / Exterior CDN Dependencies

This undertaking depends on an exterior CDN for one useful resource. This dependency is third-party, hosted and operated exterior of this undertaking and out of doors of the vendor’s management — its uptime, availability, and any future adjustments to its phrases are the duty of the supplier, not the vendor.

• Google Fonts — loaded from fonts.googleapis.com through an @import in scripts/css/model.css, offering the Crimson Professional (400, 600) and DM Sans (300, 400, 500) font households.

An lively web connection is required for the browser to succeed in this CDN and cargo these fonts. With out one, the sport nonetheless runs usually — textual content merely falls again to the browser’s default system font. Consumers who want a totally offline construct can obtain the font recordsdata, host them regionally, and exchange the @import line in model.css with native @font-face guidelines.

No different third-party or CDN-hosted libraries (corresponding to Chart.js, jsPDF, three.js, or html2canvas) are used anyplace on this codebase.

Necessities and Compatibility

• Any trendy browser: Chrome, Firefox, Safari, Edge (browser assist is checked at boot and requires localStorage, AudioContext, doc.querySelector, Promise, Set, and Array.from)
• No server-side code required — deploy to any static file host (GitHub Pages, Netlify, S3, cPanel, and so forth.)
• Web connection required for Google Fonts (Crimson Professional and DM Sans) to load accurately
• Absolutely responsive — format adapts to desktop, pill, and cellular display screen sizes
• Web Explorer just isn’t supported
• All localStorage entry is wrapped in attempt/catch for protected degradation in non-public looking mode

Source