Sudoku — Quantity Puzzle
An entire, production-ready HTML5 Sudoku sport constructed for industrial distribution. Zero exterior JavaScript dependencies. Runs on any trendy browser straight from a static file host with no construct step required.
Overview
Sudoku challenges gamers to fill a 9×9 grid so that each row, column, and three×3 field incorporates every digit 1–9 precisely as soon as. The sport options 4 issue modes together with a seeded Each day Problem, 5 selectable board themes, an XP development system with seven rank tiers, eight achievements, a neighborhood best-times leaderboard, pencil-mark candidate notes, and a full advert integration framework — all in a single self-contained HTML5 package deal.
Concerning the Recreation
- Entry level is
index.html— no construct step, no CLI instruments, no package deal 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/sport.js - All CSS lives in
scripts/css/type.css; advert placeholder inscripts/advertisements/ad-placeholder.html - One background picture asset:
scripts/pictures/background.jpg - Procedural Internet Audio API sound engine — no audio information bundled
- All sport state endured to
localStoragewith sleek degradation when storage is unavailable - Browser help examine on boot — shows a devoted “Browser Not Supported” display screen if necessities aren’t met
- Model 2.0 · © 2025 Saadie Lab
Issue Modes
- Simple — 36 clues pre-filled. Relaxed tempo, described in-game as “Relaxed tempo”.
- Medium — 28 clues pre-filled. Described in-game as “Wants thought”.
- Exhausting — 22 clues pre-filled. Described in-game as “Professional logic”.
- Each day Problem — identical puzzle for all gamers on a given calendar day, seeded from the present date (
YYYY * 10000 + MM * 100 + DD). The cardboard is marked visually as accomplished as soon as the participant completes that day’s puzzle. Each day issue clue depend defaults to Medium (28 clues) and is configurable.
Puzzles are generated procedurally at runtime — there are not any pre-stored degree information. A sound answer is generated first utilizing a seeded shuffle algorithm, then cells are eliminated all the way down to the goal clue depend whereas verifying uniqueness at every elimination step.
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 — basic parchment really feel (default)
- Jungle — dense cover darkness
- Neon Metropolis — electrical arcade glow
- Midnight Ink — modern deep universe
- Rose Gold — heat blush magnificence (marked as new)
How one can Play
- From the foyer, press Play to go to the issue choice display screen.
- Choose Simple, Medium, Exhausting, or Each day to begin a puzzle.
- Faucet or click on a cell to pick out it, then faucet a quantity on the numpad (or press a keyboard digit) to put it.
- Fill each empty cell so that every row, column, and three×3 field incorporates every digit 1–9 precisely as soon as.
- Use Pencil Mode to jot candidate numbers as small notes in a cell earlier than committing.
- The puzzle is full when all 81 cells are accurately stuffed.
Recreation Display screen Controls
- Verify — validates the present board state; reviews error depend or cells remaining
- Trace — reveals the right worth for the chosen cell (or a random empty cell if none is chosen); performs a short spotlight animation earlier than filling the cell
- Undo — steps again one transfer at a time utilizing a full transfer stack
- Reset — reveals a affirmation popup then clears all participant entries, restoring solely the unique given clues
- New Recreation — reveals a affirmation popup then generates a recent puzzle on the identical issue
- Pencil toggle (✏) — switches between regular entry mode and pencil/candidate-note mode
- Pause — pauses the timer and opens a popup with choices to Resume, begin a New Recreation, or Give up to foyer
- Present Errors toggle — inline toggle on the sport board to indicate/conceal incorrect quantity highlighting
- Spotlight Similar Numbers toggle — inline toggle to indicate/conceal matching-digit highlighting throughout the board
Keyboard Shortcuts
- 1–9 — place digit in chosen cell
- Backspace / Delete / 0 — erase chosen cell
- P — toggle pencil mode
- Ctrl+Z / Cmd+Z — undo final transfer
- Arrow keys (↑ ↓ ← →) — navigate between cells
- Escape — open or shut the pause popup
XP and Rank System
Gamers earn XP on every accomplished puzzle. XP is awarded as a base quantity per issue plus elective bonuses for finishing with zero errors and for beating 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 subsequent tier are proven as an XP bar within the foyer.
Achievements
Eight achievements are tracked routinely and displayed as gold badges within the foyer as soon as unlocked:
- First Win — full one puzzle
- Excellent Clear up — full a puzzle with zero errors
- Velocity Demon — set a greatest time beneath 3 minutes (180 seconds)
- 3-Day Streak — preserve a 3-day play streak
- 7-Day Streak — preserve a 7-day play streak
- Exhausting Mode — full at the very least one Exhausting puzzle
- 10 Puzzles — full 10 puzzles complete
- Each day Champ — full at the very least one Each 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 Simple, Medium, and Exhausting tabs. Every entry information time, errors, and depend. The leaderboard will be cleared from the leaderboard display screen. Each day Problem occasions aren’t tracked within the leaderboard.
Foyer Statistics
The foyer shows three at-a-glance stats: complete puzzles Performed, private Finest Time, and present each day Streak.
Customized Puzzle Import
Gamers can import any legitimate Sudoku puzzle by getting into an 81-digit string (digits 0–9, the place 0 represents an empty cell) utilizing the import panel on the issue choice display screen. The sport validates the string format and the given clues earlier than beginning. Imported puzzles are tracked individually from regular video games and show a “Customized” badge throughout play.
Mistake Monitoring
As much as three mistake dots are proven above the board. A configurable mistake restrict (mistakeLimit, default: 3) will be set to show a persistent error toast when the brink is reached — the sport continues regardless. When greater than three errors accumulate, an overflow indicator seems.
Time Assault Mode
An elective Time Assault mode is out there by way of configuration (timeAttackSeconds). When enabled with a non-zero worth, a countdown bar seems above the board. Time Assault will not be lively throughout Each day Problem video games. The bar turns crimson when beneath 20% time remaining.
Settings
All settings are accessible from the foyer settings button. There is no such thing as a persistent localStorage save of settings between periods — settings apply for the present session solely.
- Sound Results — toggle procedural Internet Audio API sounds (strikes, errors, win). No background music is included.
- Present Errors — spotlight incorrect numbers in crimson on the board
- Spotlight Similar Numbers — present matching digits throughout the board when a cell is chosen
- Animated Particles — toggle the floating background particle animation on the canvas layer
Advert Monetization
The sport ships with a completely built-in, configurable advert system prepared to connect 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 by way of
advertisements.preGame.countdown). The Skip button is disabled till the countdown reaches zero, then reveals “Skip Advert →” - Advert content material is loaded from
scripts/sponser/sponsor-placeholder.html. The file incorporates clearly markedAD REPLACEMENT STARTandAD REPLACEMENT ENDremark blocks exhibiting precisely the place to stick advert community code (e.g. Google AdSense embed snippet) - Your complete advert system will be disabled by setting
advertisements.enabledoradvertisements.preGame.enabledtofalsewithin the config object - Advert set off factors: earlier than every new sport begins (pre-game interstitial)
Configuration System
Recreation habits is managed by a window.SUDOKU_CONFIG object outlined earlier than sport.js masses. All values have built-in defaults so the sport runs with none config. Configurable choices embody:
- Clue counts per issue (
issue.straightforward.clues,issue.medium.clues,issue.exhausting.clues) - Issue descriptions and labels
- Each day Problem issue (
dailyDifficulty) - Present/conceal timer (
showTimer) - Default theme (
defaultTheme) - Time Assault period in seconds (
timeAttackSeconds) - Mistake restrict (
mistakeLimit) - Max hints per sport (
maxHintsPerGame; 0 = limitless) - XP values per issue and bonuses (
xp.straightforward,xp.medium,xp.exhausting,xp.noMistakeBonus,xp.speedBonus) - Par occasions per issue for velocity bonus (
parTime.straightforward, and many others.) - Leaderboard max entries (
leaderboardMaxEntries) - Advert system allow flags and countdown period
- Particle depend and velocity (
particles.depend,particles.velocity) - Confetti allow and depend (
confetti.enabled,confetti.depend)
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 features, Set/Map, elective chaining, template literals
- Internet Audio API — procedural sound results (place, erase, error, win, click on); no audio information
- 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, each day problem state
- No canvas-based sport board — the Sudoku grid is constructed from DOM parts
- No frameworks, no npm, no construct tooling
Necessities and Compatibility
- Any trendy browser: Chrome, Firefox, Safari, Edge (browser help is checked at boot and requires
localStorage,AudioContext,doc.querySelector,Promise,Set, andArray.from) - No server-side code required — deploy to any static file host (GitHub Pages, Netlify, S3, cPanel, and many others.)
- Web connection required for Google Fonts (Crimson Professional and DM Sans) to load accurately
- Absolutely responsive — structure adapts to desktop, pill, and cellular display screen sizes
- Web Explorer will not be supported
- All
localStorageentry is wrapped in strive/catch for secure degradation in personal looking mode

