LIVE PREVIEWBUY FOR $39

Equation · Cages — Equation Puzzle

A whole, production-ready HTML5 math-puzzle 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

Equation · Cages bundles three separate math-puzzle modes in a single bundle: Cage Puzzle (a Sudoku-style grid the place cages of cells should clear up a printed equation), Equation Match (a tile-swapping grid the place equations and solutions have to be paired up), and Quantity Crossword (a crossword grid stuffed in by fixing Throughout/Down equations). Each puzzle in all three modes is generated procedurally at play time — there is no such thing as a bundled puzzle checklist. The sport options Straightforward/Medium/Exhausting problem tiers plus a seeded Each day Problem (shared throughout all three modes), 5 selectable board themes, an XP development system with seven rank tiers, eight achievements, an area best-times leaderboard, an optionally available Time Assault countdown for Cage Puzzle mode, a Cage Puzzle solved-grid import device, a configurable trace system, and a full sponsor/advert integration framework — all in a single self-contained HTML5 bundle.

In regards to the Sport

• 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
• Sport engine and UI for all three modes are contained in a single IIFE in scripts/js/sport.js
• There is no such thing as a bundled puzzle or word-list file — cage layouts, match tiles, and crossword grids are all generated algorithmically at runtime, for all three modes and all problem tiers
• 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
• Two bundled picture belongings: scripts/pictures/background.jpg (shared background texture) and scripts/pictures/favicon.jpg
• Procedural Net Audio API sound engine — no audio recordsdata bundled
• All sport state persevered to localStorage with sleek degradation when storage is unavailable
• Browser assist verify on boot — shows a devoted “Browser Not Supported” display if necessities should not met

Sport Modes

Mode is chosen proper after the foyer, by itself devoted display, earlier than problem. Every mode has its personal generator and grid renderer, however all three share the identical header, sidebar actions, themes, XP system, and full display.

• Cage Puzzle (flagship mode) — A 9×9 grid the place each row and column should comprise the digits 1–9 precisely as soon as (there is no such thing as a 3×3 sub-box constraint, in contrast to basic Sudoku). The grid is split into bold-outlined “cages” — irregular teams of 1 to 4 adjoining cells — and every cage carries a small equation in its nook (e.g. 20+, 294×) that the digits positioned inside it should clear up. Single-cell cages are pre-filled “givens.”
• Equation Match — A grid of sq. tiles (3×3 on Straightforward, 4×4 on Medium, 5×5 on Exhausting). Each inside edge between two neighboring tiles reveals a two-step linear equation on one aspect (e.g. “4x + 9 = 5”) and its numeric reply on the opposite (e.g. “x = -1”). Tiles begin shuffled; clicking two tiles swaps their positions. Clicking a single unselected tile first opens a element popup displaying all 4 of its edges.
• Quantity Crossword — A crossword-style grid of intersecting numeric entries, listed as Throughout and Down clues in a panel under the grid. Every clue is a two-step linear equation (e.g. “6n + 7 = 529”); fixing for the unknown and typing its digits into the matching run of cells shares digits at each intersection with a crossing entry.

The Import Puzzle area on the issue display (paste an 81-digit solved grid, digits 1–9, no zeros) is barely out there for Cage Puzzle mode — it builds a contemporary cage format on high of the grid you present. Equation Match and Quantity Crossword are at all times freshly generated.

Issue Modes

• Straightforward — Cage Puzzle: small cages, addition/subtraction solely. Equation Match: 3×3 tiles. Quantity Crossword: 6 clues on an 11×11 grid.
• Medium — Cage Puzzle: larger cages, provides multiplication. Equation Match: 4×4 tiles. Quantity Crossword: 8 clues on a 13×13 grid.
• Exhausting — Cage Puzzle: larger cages nonetheless, all 4 operators together with division. Equation Match: 5×5 tiles. Quantity Crossword: 10 clues on a 15×15 grid.
• Each day Problem — the identical puzzle for each participant on a given calendar day, chosen by a date-based seed, for whichever mode the participant has chosen. Constructed on the problem configured for the Each day Problem (Medium by default). The cardboard is marked visually as executed as soon as the participant completes that day’s puzzle, till the following calendar day, and increments the each day streak. Excluded from the leaderboard.

Themes

5 board themes are selectable from the “Board · Type” display, shared throughout all three sport modes. The energetic 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 you can Play

1. From the foyer, press Play to go to the mode-select display.
2. Select Cage Puzzle, Equation Match, or Quantity Crossword.
3. Choose Straightforward, Medium, Exhausting, or Each day on the issue display. Optionally, in Cage Puzzle mode, paste a solved 81-digit grid into the Import Puzzle panel as a substitute of urgent Begin Puzzle.
4. In Cage Puzzle: fill each row and column with 1–9 as soon as every, so that each cage’s cells fulfill its nook equation. Use Pencil Mode to jot candidate digits as a substitute of inserting a ultimate reply.
5. In Equation Match: click on two tiles to swap them, working towards each edge displaying a matched equation/reply pair.
6. In Quantity Crossword: clear up every Throughout/Down clue’s equation and sort its digits into the matching cells.
7. Use Verify, Trace, Undo, Reset, or New from the sidebar as wanted, then full the puzzle to see your time, strikes, and any newly unlocked achievements.

Sport Display Controls

• Verify — validates the present board and flags incorrect entries
• Trace — mode-aware: in Cage Puzzle it fills a cell with its appropriate digit; in Equation Match it swaps one tile into its appropriate place; in Quantity Crossword it reveals one appropriate digit. Limitless by default, however may be capped per puzzle through config.
• Undo — reverts the final transfer
• Reset — reveals a affirmation popup, then restarts the identical puzzle from scratch, clearing all entries and the timer
• New — reveals a affirmation popup, then returns to the foyer so a brand new puzzle may be began
• Pause — pauses the timer and opens a popup with choices to Resume, begin a New Sport, or Give up to foyer
• Pencil Mode (Cage Puzzle) — faucet the pencil button, or press P, to jot candidate notes in a cell as a substitute of inserting a ultimate reply

Keyboard Shortcuts

• 1–9 — place a digit within the chosen cell
• Backspace / Delete — erase the chosen cell
• P — toggle Pencil Mode
• Ctrl+Z (or Cmd+Z) — undo the final transfer
• Arrow keys — navigate between cells

Time Assault (Non-compulsory, Off by Default)

A configurable countdown for Cage Puzzle mode solely. When timeAttackSeconds is ready above 0 within the configuration, a shrinking progress bar seems above the board and the puzzle ends in a loss if time runs out earlier than it’s solved. Disabled by default and never utilized to the Each day Problem.

Import Puzzle (Cage Mode)

On the issue display, gamers can paste any full, legitimate 81-digit solved 9×9 grid (digits 1–9, no zeros) into the Import Puzzle panel. The sport validates the string for row/column conflicts, then generates a contemporary Medium-complexity cage format on high of it. The ensuing puzzle shows a “Customized” badge within the sport header and isn’t recorded on the leaderboard. This characteristic is out there for Cage Puzzle mode solely.

XP and Rank System

Gamers earn XP on every puzzle they clear up: a base quantity per problem, plus a bonus for ending with zero errors, plus a bonus for ending below the par time. The seven rank tiers are:

• Apprentice — 0 XP
• Solver — 300 XP
• Thinker — 800 XP
• Knowledgeable — 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, shared throughout all three modes.

Achievements

Eight achievements are tracked routinely and displayed as gold badges within the foyer as soon as unlocked:

• First Win — full your first puzzle
• Good Clear up — end a puzzle with zero errors
• Velocity Demon — end a puzzle in below 3 minutes
• 3-Day Streak — play 3 days in a row
• 7-Day Streak — play 7 days in a row
• Exhausting Mode — full a puzzle on Exhausting problem
• 10 Puzzles — full 10 puzzles
• Each day Champ — full a Each day Problem

Leaderboard

A neighborhood best-times leaderboard is accessible from the foyer. It shops the highest outcomes (default: 10 entries per problem, configurable) throughout Straightforward, Medium, and Exhausting tabs, ranked by quickest time. Every entry information time, mistake rely, and date. The leaderboard may be cleared from the leaderboard display. Each day Problem and imported Customized puzzles should not recorded on the leaderboard.

Foyer Statistics

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

Settings

All settings are accessible from the foyer settings button. There is no such thing as a persistent localStorage save of settings between classes — settings apply for the present session solely and reset to defaults on web page reload.

• Sound Results — toggle procedural Net Audio API sounds for strikes, errors, and win jingles. Can be toggled from the foyer’s sound icon. No background music is included.
• Present Errors — highlights incorrect digits in crimson as quickly as they’re positioned. Applies to Cage Puzzle mode.
• Spotlight Similar Numbers — reveals matching digits throughout the grid when a cell is chosen, in Cage Puzzle mode. Off by default.
• Animated Particles — toggle the floating background particle animation on the canvas layer. Disabling it could actually enhance efficiency on lower-end gadgets.

Advert Monetization

The sport ships with a completely 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
• 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 displaying precisely the place to stick advert code
• The whole advert system may 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 the Import Puzzle panel — for any of the three modes

Necessary: Advert community integrations resembling 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. Equation · Cages gives the advert slot infrastructure solely — patrons are solely answerable for acquiring their very own accounts, assembly every community’s necessities, and complying with their respective phrases of service.

Configuration System

Sport habits is managed by a window.SUDOKU_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 sport.js) to customise different habits. All values have built-in defaults so the sport runs with none config. Configurable choices embody:

• Default theme (defaultTheme)
• Present/disguise timer (showTimer)
• Trace restrict per puzzle (maxHintsPerGame, 0 = limitless)
• Mistake threshold earlier than the “preserve going” toast seems (mistakeLimit, 0 = by no means proven)
• Issue used to construct the Each day Problem puzzle, for any mode (dailyDifficulty)
• Time Assault countdown size for Cage Puzzle mode (timeAttackSeconds, 0 = disabled)
• XP values per problem and bonuses (xp.straightforward, xp.medium, xp.arduous, xp.noMistakeBonus, xp.speedBonus)
• Par instances per problem for the velocity bonus (parTime.straightforward, parTime.medium, parTime.arduous)
• Issue label and outline textual content (problem.straightforward.label/.desc, and matching keys for medium/arduous)
• Leaderboard max entries (leaderboardMaxEntries)
• Advert system allow flags and countdown period (advertisements.enabled, advertisements.preGame.enabled, advertisements.preGame.countdown)
• Confetti allow and rely (confetti.enabled, confetti.rely)

Tech Stack

• HTML5 — all screens and markup for all three modes 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, optionally available chaining, template literals
• Procedural puzzle generator — cage layouts (flood-fill area progress over a random 9×9 Latin sq.), Equation Match tile units, and Quantity Crossword grids are all constructed algorithmically at runtime; a seeded RNG makes the Each day Problem deterministic throughout all three modes
• Net Audio API — procedural sound results (inserting a digit, erasing, errors, and win jingles); 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, XP, achievements, leaderboard, and each day problem state
• No frameworks, no npm, no construct tooling

Third-Get together / Exterior CDN Dependencies

This mission depends on an exterior CDN for one useful resource. This dependency is third-party, hosted and operated outdoors of this mission and outdoors 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 energetic 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. Patrons who want a completely offline construct can obtain the font recordsdata, host them regionally, and substitute the @import line in model.css with native @font-face guidelines.

No different third-party or CDN-hosted libraries (resembling Chart.js, jsPDF, three.js, or html2canvas) are used wherever 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 on.)
• Web connection required for Google Fonts (Crimson Professional and DM Sans) to load appropriately
• Absolutely responsive — format adapts to desktop, pill, and cell display sizes
• Web Explorer is just not supported
• All localStorage entry is wrapped in strive/catch for secure degradation in personal searching mode

Source