Desert Sort | HTML5 Color Sorting Game

Color Sort Bottle Puzzle is an engaging, polished browser puzzle game built entirely with vanilla HTML5, CSS3, and modern JavaScript. Players sort vibrant colored liquids among glass bottles until every vessel contains a single uniform color or remains completely empty. Featuring 1,200 pre-computed solvable levels across three difficulty tiers, an intelligent A* pathfinding hint solver, an unlimited step-by-step undo system, dynamic fluid-pour particle physics on HTML5 Canvas, a dedicated background music engine, and a configurable pre-game sponsor ad modal, this package delivers a complete, production-ready gaming experience that runs smoothly on desktop, tablet, and mobile devices.Game ModesDesert Sort Classic Mode – The standard puzzle challenge. Each level provides a fixed set of bottles and empty sorting vessels. Players must carefully plan each transfer to avoid dead ends.Relaxed Mode – A stress-free, casual variation. Adds an extra empty bottle on Medium and Hard difficulty levels, giving players extra workspace to maneuver and sort tricky color combinations.Difficulty TiersEasy (400 Levels) –Desert Sort  3 distinct liquid colors with 2 empty bottles (5 bottles total). Perfect for casual play, quick sessions, and beginners learning color stacking logic.Medium (400 Levels) –Desert Sort  5 distinct liquid colors with 3 empty bottles (8 bottles total in a dual-row layout). Introduces deeper color interleaving and multi-step transfer planning.Hard (400 Levels) – Desert Sort 7 distinct liquid colors with 3 empty bottles (10 bottles total in a dual-row layout). Demanding puzzles requiring forward thinking and precise move sequences.Every single level across all 1,200 stages is mathematically verified as 100% solvable using an automated A* water-sort search algorithm. The first ten levels of each tier are specifically arranged in ascending order of optimal move count for a gentle learning curve. Unlocking is sequential: completing each level unlocks the subsequent puzzle in the tier.Key FeaturesDesert Sort 1,200 Solvable Levels – 400 Easy, 400 Medium, and 400 Hard levels stored in structured JSON, verified with an A* water-sort algorithm.Dedicated Background Music Engine – High-quality looping ambient soundtrack (scripts/music/bgm.mp3) with independent music toggle controls (.sd-music) in all settings menus, first-gesture audio unlock, and automatic tab visibility pause/resume listeners.Pre-Game Interstitial Sponsor Ad Modal – Sourced from the latest lobby architecture, featuring standard 300 × 250 Medium Rectangle iframe placement, configurable countdown skip button (default 2s in scripts/config/ads.js), and live theme color synchronization (--sponsor-text and --sponsor-acc).Comprehensive In-Game Modal System – Includes dedicated Pause / Resume modal (#popup-pause) with Quick Resume, Return to Levels, New Game, and Quit to Lobby buttons; New Game confirmation modal (#popup-newgame) with live elapsed time and move counters; and Reset Progress modal (#popup-reset).Sequential Level Progression – Progressive level unlocking ensures players solve stages in order, preventing accidental skips while saving all completed stages.In-Grid Difficulty Tier Switching – Interactive tier tabs on the Level Select screen enable instantaneous switching between Easy, Medium, and Hard grids without returning to the Mode Select menu.Dynamic Canvas Bottle Rendering – Realistic glass bottles, customizable cork stoppers, dynamic liquid layers with color gradients, curved menisci, and glass reflection highlights rendered via HTML5 Canvas 2D.Physics-Based Pouring Simulation – Dynamic bottle tilting, popping cork animations, and realistic liquid particle streams calculated with parabolic flight trajectory and splash particle effects.Two-Stage A* Hint Engine – When stuck, the first hint tap calculates and highlights the optimal source and target bottles. A second tap automatically executes the recommended pour.Full Undo System – Complete history stack allows players to step back any number of moves with animated bottle reset transitions.Paginated Level Select Screen – Clean 15-level grid per page (27 pages per tier) displaying completed levels, active levels, and locked stages.Dual-Layer Audio Engine – Web Audio API with decoded audio buffers for zero-latency sound effects (pouring, cork drop, glass tap, undo, hint, invalid move, win fanfare) plus an HTMLAudio fallback for local file execution.Local Progress Persistence – Player progression, unlocked levels, audio settings, and active modes automatically save to LocalStorage under color-sort-progress with a graceful in-memory fallback for private/incognito browsing.Zero Build Tools Required – Pure vanilla web architecture. Open main_file/index.html directly in any web browser or upload to any static hosting server with zero compilation steps.Controls & Gameplay MechanicsSelect Bottle – Click or tap any bottle containing liquid to select it. The bottle lifts upward with an audible glass chime.Pour Liquid – Click or tap a valid target bottle. The selected bottle flies to the destination, unplugs its cork, tilts, and pours matching top-layer liquid in a realistic fluid stream.Deselect Bottle – Click or tap the currently selected bottle again to lower it back to the table.Undo Move – Click or tap the Undo icon in the top header to reverse the last move and restore previous liquid layers.Hint – Click or tap the lightbulb Hint icon. The first click highlights the optimal source and destination bottles. Clicking again executes the move.Sound & Music Toggles – Independently mute or enable SFX and background music loops via header buttons and settings dropdown icons.Pause & Navigation – Access the Settings dropdown during gameplay and click Pause to open the Pause modal (Resume, Levels, New Game, Quit to Lobby) or click Restart to instantly reset the current puzzle.Technology StackMarkup & Styling – Semantic HTML5 with single-page architecture (Loading, Lobby, Mode Select, Level Select, Play, Complete, and modal screens) and responsive CSS3 with custom properties (CSS variables), Flexbox, and CSS Grid.Core Logic – Modern modular JavaScript (ES6+) organized into specialized modules: sort-core.js (rules and solver), tube-render.js (canvas bottle renderer), pour-fluid.js (fluid stream simulation), levels.js (level database), and sort-game.js (state management and UI).Graphics & Animation – HTML5 Canvas 2D for bottle surfaces, liquid menisci, fluid particles, and win-screen confetti.Audio Architecture – Web Audio API with AudioContext and buffer decoding for high-frequency SFX, combined with HTML5 Audio for looping background music.Data Storage – Browser LocalStorage for persistent player progress with in-memory fallback protection.Third-Party Services & Dependencies Color Sort Bottle Puzzle is built on pure vanilla web standards. The game contains no external JavaScript frameworks or charting libraries (no Chart.js, no Three.js, no jsPDF, no html2canvas, no jQuery, no React). The project relies on an external CDN for web font typography:Google Fonts (Bungee) – Loaded via external CDN (https://fonts.googleapis.com) for stylized arcade headings and game buttons. If offline, the game automatically falls back to system fonts (system-ui, sans-serif).