Shade Type Water is a cultured, mobile-ready HTML5 puzzle recreation template. The purpose is easy: kind the coloured water between glass bottles till each bottle accommodates a single shade. Faucet to pick out, faucet to pour — however you’ll be able to solely pour matching colours!
That is NOT a static template. It’s a totally useful recreation with 80 pre-baked ranges, a standalone stage generator that may produce limitless solvable puzzles, Net Audio synthesized sound results and music, and a shocking glassmorphism darkish theme.
FEATURES YOU’LL LOVE
✓ 80 Pre-Baked Ranges — 4 problem tiers (Simple, Medium, Onerous, Knowledgeable)
✓ Standalone Stage Generator Instrument — Create limitless puzzles with one click on, play-test reside, and export
✓ Sensible Algorithm — Each generated puzzle is mathematically assured solvable (backward-scramble methodology)
✓ Canvas Rendering — Clean bottle animations, liquid waves, pour arcs, and splash particles
✓ Net Audio Synthesis — All sound results and ambient music generated in-browser (no audio information wanted)
✓ Glassmorphism UI — Darkish purple theme with animated bubbles, glowing orbs, and confetti celebration
✓ Cellular Optimized — Contact, mouse, and keyboard assist. Examined right down to 360px width
✓ Persistent Progress — localStorage saves greatest strikes, star scores (1-3★), and stage unlocks
✓ Undo System — Full undo stack with animated reverse-pour
✓ Trace System — Highlights the optimum subsequent transfer
✓ Auto-Tutorial — Seems for brand new gamers on early ranges after 12s of inactivity
✓ Keyboard Controls — Arrow keys, Enter/House, Z (undo), R (restart)
✓ Advert Prepared — Banner advert placeholder included, prepared for AdSense or any advert community
✓ Zero Exterior Dependencies — No frameworks, no construct instruments, no CDN hyperlinks. Simply add and play!
✓ Offline Prepared — Works fully offline as soon as loaded
✓ Cordova / Capacitor Prepared — Pure browser APIs, wrap as a local iOS/Android app
✓ Twin Orientation Help — Devoted panorama and portrait layouts, UI adapts robotically
✓ Totally Customizable — Change colours, sounds, theme, bottle sizes, problem, and star scores
BUILD AS A MOBILE APP — PUBLISH TO APP STORES
This recreation is NOT only a browser recreation. It’s constructed with pure browser APIs and 0 native dependencies, making it immediately wrappable as an actual cell app:
✓ iOS App Retailer — Wrap with Capacitor (free, open-source) and publish to the Apple App Retailer. Works with iPhone and iPad in each portrait and panorama.
✓ Google Play Retailer — Similar codebase builds for Android with Capacitor or Cordova.
✓ No Code Modifications — The sport runs 100% as-is inside a webview. localStorage works natively, contact controls work, vibration works.
✓ Advert Integration — The built-in banner advert placeholder works with AdMob, AdSense, or any advert SDK as soon as wrapped.
✓ Fast Setup — Takes about 5 minutes with Capacitor:
npm set up @capacitor/core @capacitor/cli
npx cap init “Shade Type Water” com.yourname.colorsort—web-dir=.
npx cap add ios
npx cap add android
npx cap copy && npx cap open ios
This can be a large promoting level — consumers get a recreation that works in browsers AND might be printed as a local cell app, all from the identical codebase.
LEVEL GENERATOR TOOL
The included stage generator (instruments/generator.html) is a visible device that:
– Creates limitless solvable puzzles with customized problem
– Presents 4 presets (Simple/Medium/Onerous/Knowledgeable) plus full customized controls
– Permits you to play-test ranges reside within the browser
– Exports straight as a ready-to-use ranges.js file
– Makes use of a mathematically confirmed backward-scramble algorithm guaranteeing 100% solvability
EASY CUSTOMIZATION
– Change all theme colours by enhancing CSS variables in css/type.css
– Substitute liquid colours by enhancing js/colours.js
– Regulate bottle sizes for any display in js/recreation.js
– Substitute sounds and music in js/audio.js
– Change the sport title and title in index.html
– Tune star ranking problem in js/recreation.js
– Allow banner adverts with one CSS change
WHAT YOU GET
– Full recreation supply code (index.html, css/, js/, instruments/)
– 80 pre-generated ranges able to play
– Standalone stage generator device
– Detailed documentation (documentation.html)
– README.txt and License file
– Full bundle supply with CLI construct instruments
BROWSER SUPPORT
Chrome 110+, Edge 110+, Firefox 115+, Safari 15+, Cellular Safari 14+, Chrome Android 105+
