Cipher Sums | HTML5 Math Logic Puzzle Game

Cipher Sums: Arithmetic Logic Lab

Cipher Sums is a math logic puzzle game built in pure HTML5, CSS and JavaScript. Each level shows a network of connected number nodes joined by equations. Some nodes are empty sockets marked [ ? ]. The player selects a socket, then taps a number tile from the tray to fill it, and every equation on the board must balance. Tap a placed tile to recall it and try again.

The real challenge is the crossroads. Where a horizontal and a vertical equation meet, the socket is shared, so one number has to satisfy both equations at once. Levels use addition, subtraction, multiplication and division, and grow from a single sum into large multi-equation networks of up to 12 nodes and 8 equations.

The game has 35 hand-built levels in 3 sectors: Arithmetic Primer (levels 1-12), Equation Crossroads (13-24) and Master Cipher Matrix (25-35). Each level has a move limit, so players earn 3 stars for solving within it. Levels unlock in order, and stars and progress are saved automatically in the browser. Every level has a built-in Advisor hint and a short “Mathematical Insight” fact that appears on the victory screen, which makes the game a good fit for educational and family-friendly projects.

Visuals are drawn on HTML5 Canvas in a clean dark neon style, with color-coded operators and animated feedback. All sound effects are synthesized live with the Web Audio API, so there are no audio files to load.

Key Features:

• 35 handcrafted puzzle levels across 3 progression sectors
• Shared crossroad sockets where one number must balance two equations at once
• All four operators: addition, subtraction, multiplication and division
• Tap-to-place and tap-to-recall tile system (easy undo)
• Move limit with 3-star rating per level
• Built-in Advisor hint for every level
• Educational “Mathematical Insight” fact on each victory screen
• Sector-based level select screen with progress and star counters
• Auto-save of progress and stars using localStorage
• Settings screen with audio toggle and a progress reset option
• Sound effects (click, tile dock, recall, mismatch, balanced, victory) generated by Web Audio API, no audio files
• Responsive Canvas board with tap and click support for mobile, tablet and desktop
• Self-hosted PNG icon set, no external CDN or font dependencies
• Works fully offline, no server or database needed
• Clean, commented vanilla JavaScript with no frameworks and no build step
• Easy to extend: levels are plain data objects (nodes, equations, tray, hint, fact) in one file, and sectors and constants are in config.js

Perfect For:

• Math, STEM and educational game portfolios
• Brain-training and logic puzzle websites
• HTML5 game portals and licensing marketplaces
• Embedding into WordPress, Android WebView or Cordova/Capacitor apps
• Quick-session puzzle experiences for all ages

What’s Included:

• Complete source code (HTML, CSS, JavaScript)
• 35 levels with hints and math facts
• Self-hosted PNG icon set (menu, navigation, operator and victory icons)
• Procedural sound engine (no audio files)

Requirements: Modern browser (Chrome, Firefox, Safari, Edge). No server-side language or database required. Works on any static web host.