Color Sort Water | Liquid Sorting Puzzle HTML5 Game

Color Sort Water is a polished, mobile-ready HTML5 puzzle game template. The goal is simple: sort the colored water between glass bottles until every bottle contains a single color. Tap to select, tap to pour — but you can only pour matching colors!

This is NOT a static template. It’s a fully functional game with 80 pre-baked levels, a standalone level generator that can produce unlimited solvable puzzles, Web Audio synthesized sound effects and music, and a stunning glassmorphism dark theme.

✓ 80 Pre-Baked Levels — 4 difficulty tiers (Easy, Medium, Hard, Expert) ✓ Standalone Level Generator Tool — Create unlimited puzzles with one click, play-test live, and export ✓ Smart Algorithm — Every generated puzzle is mathematically guaranteed solvable (backward-scramble method) ✓ Canvas Rendering — Smooth bottle animations, liquid waves, pour arcs, and splash particles ✓ Web Audio Synthesis — All sound effects and ambient music generated in-browser (no audio files needed) ✓ Glassmorphism UI — Dark purple theme with animated bubbles, glowing orbs, and confetti celebration ✓ Mobile Optimized — Touch, mouse, and keyboard support. Tested down to 360px width ✓ Persistent Progress — localStorage saves best moves, star ratings (1-3★), and level unlocks ✓ Undo System — Full undo stack with animated reverse-pour ✓ Hint System — Highlights the optimal next move ✓ Auto-Tutorial — Appears for new players on early levels after 12s of inactivity ✓ Keyboard Controls — Arrow keys, Enter/Space, Z (undo), R (restart) ✓ Ad Ready — Banner ad placeholder included, ready for AdSense or any ad network ✓ Zero External Dependencies — No frameworks, no build tools, no CDN links. Just upload and play! ✓ Offline Ready — Works completely offline once loaded ✓ Cordova / Capacitor Ready — Pure browser APIs, wrap as a native iOS/Android app ✓ Dual Orientation Support — Dedicated landscape and portrait layouts, UI adapts automatically ✓ Fully Customizable — Change colors, sounds, theme, bottle sizes, difficulty, and star ratings

This game is NOT just a browser game. It’s built with pure browser APIs and zero native dependencies, making it instantly wrappable as a real mobile app:

✓ iOS App Store — Wrap with Capacitor (free, open-source) and publish to the Apple App Store. Works with iPhone and iPad in both portrait and landscape. ✓ Google Play Store — Same codebase builds for Android with Capacitor or Cordova. ✓ No Code Changes — The game runs 100% as-is inside a webview. localStorage works natively, touch controls work, vibration works. ✓ Ad Integration — The built-in banner ad placeholder works with AdMob, AdSense, or any ad SDK once wrapped. ✓ Quick Setup — Takes about 5 minutes with Capacitor: npm install @capacitor/core @capacitor/cli npx cap init “Color Sort Water” com.yourname.colorsort—web-dir=. npx cap add ios npx cap add android npx cap copy && npx cap open ios

This is a massive selling point — buyers get a game that works in browsers AND can be published as a native mobile app, all from the same codebase.

The included level generator (tools/generator.html) is a visual tool that: - Creates unlimited solvable puzzles with custom difficulty - Offers 4 presets (Easy/Medium/Hard/Expert) plus full custom controls - Lets you play-test levels live in the browser - Exports directly as a ready-to-use levels.js file - Uses a mathematically proven backward-scramble algorithm guaranteeing 100% solvability

- Change all theme colors by editing CSS variables in css/style.css - Replace liquid colors by editing js/colors.js - Adjust bottle sizes for any screen in js/game.js - Replace sounds and music in js/audio.js - Change the game name and title in index.html - Tune star rating difficulty in js/game.js - Enable banner ads with one CSS change

- Complete game source code (index.html, css/, js/, tools/) - 80 pre-generated levels ready to play - Standalone level generator tool - Detailed documentation (documentation.html) - README.txt and License file - Full package source with CLI build tools

Chrome 110+, Edge 110+, Firefox 115+, Safari 15+, Mobile Safari 14+, Chrome Android 105+