Logic · Grids — Three Puzzles, One Mind

A complete, production-ready HTML5 logic-puzzle 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.

Disclaimer: This item includes an optional sponsor/ad slot framework that can be connected to third-party ad networks or sponsor services (such as Google AdSense, AdMob, ironSource, or similar). These are external, third-party services outside of this product and outside of the seller’s control, and may involve their own separate costs, terms, or account requirements. Buyers are responsible for reviewing and agreeing to the terms of any ad network or sponsor service they choose to integrate.

Overview

Logic · Grids bundles three separate logic-puzzle types in one package: Futoshiki Equation (a 1–9 grid solved using < and > inequality clues), Kakuro / Cross Sums (a crossword-style grid where numeric runs must add up to their clue sums), and Number Match (a tile-clearing puzzle with three sub-modes of its own — Classic, Ladder Rush, and Sum Chain). Every puzzle is generated procedurally at play time — there is no bundled puzzle list. The game features Easy/Medium/Hard difficulty tiers plus a seeded Daily Challenge, five selectable board themes, a shared XP progression system with seven rank tiers, a local best-times leaderboard, an achievements system, a configurable 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 for all three puzzle types are contained in a single IIFE in scripts/js/game.js
There is no bundled puzzle or word-list file — Futoshiki grids, Kakuro grids, and Number Match boards are all generated algorithmically at runtime, for every difficulty tier
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: scripts/config/ad.js
Three bundled background images (scripts/images/background.jpg, background-horse.jpg, background-coast.jpg) and one favicon (favicon.jpg), selectable from Settings
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

Puzzle Types

The puzzle type is chosen right after the lobby, on its own dedicated screen, before difficulty.

Futoshiki Equation — Fill an N×N grid (size depends on difficulty) with 1–N so no row or column repeats a digit, obeying the < and > inequality clues printed between certain cells.
Kakuro (Cross Sums) — A crossword-style grid of numeric runs. Each run must contain digits that add up to its clue sum, with no digit repeated within a single run.
Number Match — Choosing this type opens a further Mode Select screen with three sub-modes:
- Classic — Clear the whole board by matching two numbers at a time (equal pairs, or pairs that sum to 10) that are linked — adjacent in reading order, or sharing a row/column with only cleared cells in between. Includes an “Add Numbers” action for when no matches are left, and an optional Custom Board Import.
- Ladder Rush — No pairs to find: hunt the digits 1 through 9 in order on the board before a mode-specific countdown runs out.
- Sum Chain — Tap any two cells that add up to the current target number, against the clock.

Custom Board Import (paste digits, even count) is specific to Number Match Classic mode; it builds a custom match board directly from the digits pasted. It is not available for Futoshiki, Kakuro, Ladder Rush, or Sum Chain.

Difficulty

Easy — smaller/looser grids across all types, unlimited hints.
Medium — bigger grids, 3 hints per puzzle.
Hard — largest grids, 1 hint per puzzle.
Daily — the same puzzle for every player on a given calendar day, built at a configurable difficulty (Medium by default). Available for Futoshiki, Kakuro, and Number Match Classic. Not available for Ladder Rush or Sum Chain. Marks itself done until the next calendar day and increments the daily streak.

Grid sizes and generation parameters differ per type and difficulty — see the Content Guide in documentation.html for the exact numbers.

Themes

Five board themes are selectable from the “Board · Style” screen, shared across all puzzle types. 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, green accents
Neon City — electric arcade glow with a scanline effect
Midnight Ink — sleek deep universe, violet accents
Rose Gold — warm blush elegance, pink accents (marked as new)

Separately, three background images (Default, Golden Mare, Coastal Peaks) can be chosen from Settings.

How to Play

From the lobby, press Play to go to the Puzzle Type screen.
Choose Futoshiki Equation, Kakuro, or Number Match. Choosing Number Match opens a further Mode screen (Classic / Ladder Rush / Sum Chain).
Select Easy, Medium, Hard, or Daily on the difficulty screen. Number Match Classic also offers a Custom Board Import panel here.
In Futoshiki: place 1–N in every cell so rows and columns don’t repeat, honoring every </> clue.
In Kakuro: fill each run of white cells so its digits add up to its clue sum, with no repeats within a run.
In Number Match Classic: tap two linked matching numbers (equal, or summing to 10) to clear them; use Add Numbers if no matches remain.
In Ladder Rush: tap the current target digit (1 through 9, cycling) anywhere on the board before time runs out.
In Sum Chain: tap any two cells that add up to the shown target, against the clock.
Use Hint, Undo, and the other sidebar actions as needed, then complete the puzzle to see your time and XP earned.

Game Screen Controls

Futoshiki & Kakuro use a numpad (tap a cell, then tap 1–N) plus:

Hint — fills the selected (or an unrevealed) cell with its correct digit
Undo — reverts the last placed digit

Number Match uses a numpad plus a left-side action sidebar:

Check — as currently wired in the code, this button (checkmark icon, labeled “Check”) actually triggers the same shuffle behavior as the Shuffle keyboard shortcut, not a correctness check. Documented here as it actually behaves; worth reviewing before release.
Hint — highlights and clears a valid matching pair (mode-aware: works with the ladder target in Ladder Rush)
Undo — reverts the last move
Reset — restarts the same puzzle from scratch
New — returns to the lobby to start a new puzzle
Pause — pauses the timer with a popup to Resume, start a New Game, or Quit to lobby
Add Numbers (pencil-icon button, Classic mode) — copies every remaining number onto the end of the board again when stuck, up to an optional per-game cap

Keyboard Shortcuts

All puzzle types:

Esc — open/close the pause popup
Ctrl+Z (or Cmd+Z) — undo the last move
H — hint

Futoshiki & Kakuro only:

1–9 — place a digit in the selected cell
Backspace / Delete — clear the selected cell

Number Match only:

A — Add Numbers
S — Shuffle

Custom Board Import (Number Match Classic Only)

On the difficulty screen, in Number Match Classic mode, players can paste any even count of digits 1–9 (no zeros) into the Import Board panel. The game validates the string, then loads it directly as a custom board. The resulting puzzle displays a “Custom” badge in the game header and is not recorded on the leaderboard. This feature is specific to Number Match Classic — it is not available for Futoshiki, Kakuro, Ladder Rush, or Sum Chain.

XP and Rank System

All three puzzle types award XP toward a single shared rank system, but the way XP is calculated differs:

Number Match (any sub-mode) uses the configurable formula: a base amount per difficulty, plus a bonus for finishing with zero mistakes, plus a bonus for finishing under the par time. Ladder Rush and Sum Chain also add their own mode-specific bonus on top.
Futoshiki and Kakuro use a simpler, fixed formula: max(10, 40 − mistakes × 5) XP, not affected by the configurable XP settings below.

The seven rank tiers, shared across all types:

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

Eight achievements are tracked and displayed as gold badges in the lobby once unlocked (the lobby shows up to 4 at a time, with a “See More” button opening a full Achievements page for the rest):

First Win — complete your first Number Match puzzle
Perfect Clear — finish a Number Match puzzle with zero mistakes
Speed Runner — finish a Number Match puzzle in under 90 seconds (best time)
3-Day Streak — play 3 days in a row
7-Day Streak — play 7 days in a row
Hard Mode — complete a Number Match puzzle on Hard difficulty
10 Boards Cleared — complete 10 Number Match puzzles
Daily Champ — complete a Daily Challenge

Important: Achievement checks, the games-played count, best time, and win streak shown on the lobby are updated only by Number Match wins. Completing a Futoshiki or Kakuro puzzle awards XP toward the rank system, but does not increment these stats or unlock achievements.

Leaderboard (Best Times)

A local best-times leaderboard is accessible from the lobby, with Easy / Medium / Hard tabs, ranked by fastest time (up to 10 entries per tab by default, configurable). Each entry records time, mistake count, and date. The leaderboard only records Number Match wins — Futoshiki and Kakuro completions are not added to it. Daily Challenge puzzles and Custom-imported boards are also excluded. The leaderboard can be cleared from its own screen.

Settings

All settings are accessible from the lobby settings button. The Background choice is saved to localStorage (like the board Theme) and restored on every visit. The four toggles below it are session-only — they reset to defaults on page reload and are not written to localStorage.

Background — choose between Default, Golden Mare, and Coastal Peaks background images. Persisted.
Sound Effects — toggle procedural Web Audio API sounds for matches, errors, and win sounds. Can also be toggled from the lobby’s sound icon. Session-only.
Show Errors — flashes wrong matches in red. Session-only.
Highlight Matches — shows every valid match when a number is selected. Off by default. Session-only.
Animated Particles — toggle the floating background particle animation on the canvas layer. Session-only.

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 by default (configurable via ads.preGame.countdown). The Skip button is disabled until the countdown reaches zero
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 scripts/config/ad.js. As shipped, scripts/config/ad.js sets ads.enabled: true, so the sponsor popup is on by default — set it to false to turn it off
Ad trigger points: before a puzzle starts, whether from Start Puzzle/Start Board, Play Again, or the Custom Board Import panel

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. Logic · Grids 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.

Ad Network Approval FAQ

Do I need to register with the ad network first? Yes — every ad network requires its own account, registered and approved by that network, before real ads will show in the sponsor slot.
Who approves my account? The third-party ad network itself, entirely on its own terms. This product only provides the ad placement/integration infrastructure — it has no role in, and no control over, that decision.
Is approval guaranteed? No. Approval is not guaranteed by this product or its author; each network reviews applications against its own eligibility requirements and policies.
How long does approval take? Review and approval times vary by provider and are set entirely by that provider.
What is the buyer responsible for? Meeting the ad network’s eligibility requirements, agreeing to its terms of service, and maintaining the account — this product cannot guarantee eligibility on the buyer’s behalf.

Configuration System

Game behavior is controlled by a window.NUMMATCH_CONFIG object, which scripts/config/ad.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:

Default theme (defaultTheme) and default background (defaultBackground)
Show/hide timer (showTimer)
Mistake threshold before the “keep going” toast appears (mistakeLimit, 0 = never shown, default)
Difficulty used to build the Daily Challenge puzzle (dailyDifficulty, default “medium”)
Optional Time Attack countdown for Number Match Classic/Sum Chain (timeAttackSeconds, 0 = disabled by default; Ladder Rush always runs on its own built-in per-difficulty countdown regardless of this setting)
Cap on Add Numbers uses per game (maxAddsPerGame, 0 = unlimited, default)
XP values per difficulty and bonuses, Number Match only (xp.easy, xp.medium, xp.hard, xp.noMistakeBonus, xp.speedBonus)
Par times per difficulty for the speed bonus, Number Match only (parTime.easy, parTime.medium, parTime.hard)
Difficulty label and description text per puzzle type (difficulty.easy.label/.desc, and matching keys for medium/hard)
Leaderboard max entries (leaderboardMaxEntries, default 10)
Ad system enable flags and countdown duration (ads.enabled, ads.preGame.enabled, ads.preGame.countdown)
Confetti and particle enable/count/speed (confetti.enabled, confetti.count, particles.enabled, particles.count, particles.speed)

Tech Stack

HTML5 — all screens and markup for all puzzle types 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, template literals
Procedural puzzle generator — Futoshiki grids, Kakuro grids, and Number Match boards are all built algorithmically at runtime; a seeded RNG makes the Daily Challenge deterministic
Web Audio API — procedural sound effects; 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, background, stats, XP, achievements, and leaderboard 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

Logic Grids | HTML5 Puzzle Game