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

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