Skip to content
All templates
Chromaflow icon

Chromaflow

Liquid sort puzzle with 100 levels, daily puzzle, endless mode, solver hints and challenge modifiers, built with Phaser 3

HTML5 GamesPhaser 3liquid sortwater sortsort puzzlecolor sort
$29

Chromaflow is a complete HTML5 liquid-sort puzzle built with Phaser 3.80. All graphics are drawn programmatically (no image assets) and all audio is generated with the Web Audio API (no audio files). No build step, no dependencies, no backend - serve the folder and it runs, fully offline.

Highlights

  • 100 deterministic Classic levels with unlock progression, best-move tracking and 1-3 star ratings
  • Endless mode with unlimited generated puzzles across Easy, Medium, Hard and Expert
  • Daily Puzzle: one board per date, identical for every player
  • Challenge modifiers: Limited Moves, Time Attack and Hidden Colors - fully combinable
  • Hint button backed by a real built-in solver (computes a legal move), plus Undo and Restart
  • Animated pouring, liquid waves, bubbles, sparkles and confetti
  • Selectable tube styles and color themes - new entries in the data files appear automatically in the UI with generated previews
  • Responsive layout for desktop and mobile with touch play, vibration and fullscreen support
  • localStorage save system with a configurable save key

Technology

  • Phaser 3.80.1 (vendored, no build step), plain JavaScript ES modules
  • Programmatic graphics only - every visual is drawn in code
  • Web Audio API synthesis for all sound and music
  • Deterministic level generator + solver-based validator (same boards on every device)
  • Central config.js for every gameplay and visual tunable

Requirements

  • Any static web server (ES modules require HTTP(S) - a one-line python3 http.server command is included)
  • Any modern browser with HTML5 canvas and Web Audio - no accounts, no keys, 100% offline

What You Get

  • Complete source: 10 scenes, tube/liquid/pour objects, manager classes, generator and solver utils
  • Level, theme, tube-style and color data files for instant customization
  • icon.html for re-rendering the 1024px icon with CSS
  • documentation.html: running, configuration table, reskinning, themes, tube styles, level customization, renaming, publishing checklist and troubleshooting
  • README.md and 11 screenshots
  • Full rights to rebrand, reskin, extend and publish anywhere

Please note: this is a source code template, not a hosted game. Basic JavaScript knowledge is required to customize it. If you have questions, use the contact form on the site, I usually reply within 24 hours.

Related templates