Arrow Trace — Clear-Every-Arrow Puzzle

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

Overview

Arrow Trace is a tap-to-clear arrow puzzle: tap an arrow whose path is open and it clears off the board; clear every arrow to win. The game bundles two play modes — Classic Puzzle (476 hand-built levels across Easy, Medium, and Hard) and Skins Puzzle (300 levels playable with 2D or 3D Car / F1 Car skins, where tapping sends the vehicle driving off in its open direction). It features five selectable board themes, an optional Cartoonic Mode visual style, a custom puzzle importer, a shared XP progression system with seven rank tiers, a per-mode/per-difficulty local best-times leaderboard, a seven-achievement system, and a full sponsor/ad integration framework — all in a single self-contained HTML5 package.

About the Game

• Entry point is index.html — pure vanilla HTML5, CSS3, and ES6+ JavaScript, zero libraries/frameworks
• Game engine and UI in a single IIFE in scripts/js/game.js
• Classic levels ship in scripts/js/classic-levels.js, Skins levels in scripts/js/skin-levels.js
• Ads are switched on/off from scripts/config/ads.js; sponsor placeholder in scripts/sponsor/sponsor-placeholder.html
• All game state persisted to localStorage with graceful degradation when storage is unavailable

Puzzle Modes

• Classic Puzzle — tap an arrow to clear it, untangle every level. 476 levels (159 Easy, 159 Medium, 158 Hard). Optional Unlimited Hints toggle (default is 3 hints/level) and Chances Mode toggle (3 chances, game over if you run out).
• Skins Puzzle — same clearing rule, played with 2D or 3D Car / F1 Car skins; tap the open direction to drive/race the piece off. 300 levels, shared across the 2D/3D skin choice.

Each mode has its own level-select screen and its own separate level-progress save.

Themes & Skins

Five board themes, shared across both modes, saved to localStorage (default: Amber): Amber, Sky Meadow, Mint Confetti, Midnight, Rose Blush (new). A separate Cartoonic Mode toggle layers chunky sticker-style borders and a playful rounded font on top of any theme, and is on by default for first-time players.

How to Play

1. From the lobby, choose Classic Puzzle or Skins Puzzle.
2. Pick a difficulty (Easy/Medium/Hard) and a level from the grid — or paste a solved 81-digit puzzle string via Import Puzzle.
3. Tap arrows (or skin pieces) whose path is open to clear them. Use Hint, Undo, and Reset as needed.
4. Clear the board to see your time, moves, mistakes, and XP earned.

Game Screen Controls

Hint (limited to 3/level unless Unlimited Hints is on), Undo (reverses the last move, works in both modes), Reset (restarts the puzzle, with confirmation), New Game (returns to lobby, with confirmation), and Pause (Resume / New Game / Quit to Lobby). Esc opens/closes the pause popup.

XP, Rank & Achievements

Both modes award XP toward one shared rank system: a base amount per difficulty, plus a zero-mistake bonus, plus a par-time speed bonus. Seven rank tiers: Apprentice (0) → Solver (300) → Thinker (800) → Expert (1,800) → Master (3,500) → Sage (6,000) → Grand Master (10,000).

Seven achievements, shown as badges on the Achievements page: First Win, Perfect Solve (zero mistakes), Lightning Fast (under 3 minutes), 3-Day Streak, 7-Day Streak, Hard Mode, and 10 Puzzles.

Leaderboard

A local “Best Times” leaderboard is accessible from the lobby, with Classic/Skins tabs and Easy/Medium/Hard tabs within each. Ranked by fastest time. Records can be cleared from the leaderboard screen.

Settings

Board Theme, Skin choice, Cartoonic Mode, and Tutorials are saved to localStorage and restored on every visit. Sound Effects and Animated Particles are session-only — they reset to defaults on page reload.

Ad Monetization

The game ships with a fully integrated, configurable sponsor/ad system ready to connect to any ad network.

• Ads display in a popup with a 300×250 iframe that auto-receives the active theme’s colors and Cartoonic Mode state as URL parameters
• A configurable countdown (default 5s) gates the Skip button; the ad shows every frequency launches (default: every 3rd launch), with no special case for the very first launch
• Ad content loads from scripts/sponsor/sponsor-placeholder.html, with marked comment blocks showing exactly where to paste ad code
• The entire system is toggled via ads.enabled in scripts/config/ads.js. As shipped, ads.enabled: false, so the sponsor popup is off by default

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. Arrow Trace 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.EQUATION_CONFIG object. All values have built-in defaults so the game runs without any config. Configurable options include default theme, XP base/bonus values per difficulty, par times, hint limit, ad enable flags/countdown/frequency, and confetti/particle settings.

Tech Stack

• HTML5, CSS3 (custom properties, flexbox, keyframe animations), Vanilla JavaScript ES6+ (single IIFE)
• Canvas API for background particles, win confetti, and a theme-colored custom cursor
• Google Fonts CDN — Crimson Pro, DM Sans, and Baloo 2 (for Cartoonic Mode)
• localStorage for theme, skin, Cartoonic Mode, tutorials, stats/XP/achievements, level progress, 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, which is third-party, hosted and operated outside of this project and outside of the seller’s control.

• Google Fonts — loaded via @import in scripts/css/style.css (Crimson Pro, DM Sans, Baloo 2). Without an internet connection the game still runs normally — text falls back to the system font. Buyers needing a fully offline build can host the font files locally and replace the @import lines with local @font-face rules.

Requirements and Compatibility

• Any modern browser: Chrome, Firefox, Safari, Edge
• No server-side code required — deploy to any static file host
• Fully responsive across desktop, tablet, and mobile
• Internet Explorer is not supported (uses ES6+ features)
• Opening index.html via file:// may cause resource-loading issues in some browsers — serve via a local web server or static host for reliable access