Math Flow | HTML5 Educational Game

Math Flow — A Node-Graph Math Adventure Through Space

Math Flow turns math practice into an arcade game your players will actually want to keep playing. Instead of static worksheets, players fly a trail of glowing question nodes through a procedurally generated space background — solving equations, racing the clock, building combos, and leveling up as the difficulty adapts to them in real time.

Built entirely in vanilla JavaScript (ES modules) with zero build step and zero external frameworks, it drops straight into any website, LMS, or Cordova/Capacitor shell and just runs.

✨ Key Features

• Adaptive difficulty engine — question types (addition, subtraction, multiplication, division, algebra, greater/less-than comparisons, and more) ramp in and retire automatically as the player levels up, so the challenge never feels flat or unfair.
• Node-trail gameplay — questions appear as sized, color-coded shapes along a path; node size and shape adapt to the question itself for a satisfying, readable flow.
• Score, XP & combo system — a continuous XP curve rewards speed and accuracy, with streak-based combo bonuses that make fast, correct answers feel great.
• Three difficulty modes — Easy, Normal, and Hard, each with its own countdown timer pacing.
• 75 unlockable achievements — one-off milestones that reward consistent play.
• Tiered skill badges — Bronze → Silver → Gold → Platinum badges that rank up as lifetime accuracy and volume improve.
• Daily streaks & 5-a-day tasks — a Duolingo-style daily task list and streak counter to keep players coming back.
• Rolling accuracy stat — accuracy is calculated from the player’s most recent answers (not a lifetime average), so the number shown always reflects current performance.
• Symbol Mode input — an on-screen keypad supporting both numeric and symbol entry, alongside full physical keyboard support.
• Procedural space visuals — parallax stars, nebulas, planets, and asteroids rendered live on canvas — no static background images, no two playthroughs look identical.
• Smooth camera system — auto-follow, zoom, and screen-shake feedback on every answer.
• Pooled particle effects — floating score/XP text, bursts, and shockwaves, optimized with object pooling for smooth performance.
• Background music with automatic fallback — ships with a background track and gracefully falls back to a generative ambient audio loop if the audio file can’t load, so there’s never silence.
• Local save & progress — all progress (level, XP, achievements, badges, streaks, history) is persisted automatically via localStorage.
• Fully responsive — playable on desktop and mobile, with layout and keypad positioning that adapt to smaller screens.
• Reduced-motion support — respects the player’s OS-level reduced-motion preference.

️ Technical Highlights

• 100% vanilla JavaScript — no React, no jQuery, no build tools required.
• Clean, modular ES module architecture (core / gameplay / managers / render / utils) — easy to read, easy to extend.
• Canvas 2D rendering for gameplay, DOM for UI chrome — best of both worlds for performance and easy restyling via CSS.
• Deterministic RNG utilities for reproducible daily content.
• Automated unit tests included (Node.js test runner) covering question generation and scoring logic.
• Well-commented source files throughout.

What’s Included

• Full game source code (HTML, CSS, JS)
• All game assets (icons, background music, artwork)
• Automated test suite
• Documentation covering project structure and how to customize the game

Perfect For

• Educational websites and math tutoring platforms
• Schools and e-learning portals looking for an engaging practice tool
• App developers wrapping the game into a mobile app shell
• Parents/educators wanting a customizable, ad-free math game

Requirements

• Any modern browser (Chrome, Firefox, Safari, Edge)
• No server-side requirements — runs as a static site
• Basic HTML/CSS/JS knowledge if you want to customize colors, question types, or difficulty pacing

Changelog

Version 1.0 — Initial release

Support

Questions before or after your purchase? Reach out through my CodeCanyon profile page and I’ll be happy to help.

If you enjoy Math Flow, please consider leaving a rating — it really helps!