Fill and Flow | Neumorphic Puzzle HTML5 Game

Fill and Flow – Neumorphic HTML5 Puzzle Game

Fill and Flow is a high-quality, mobile-ready HTML5 puzzle game crafted in pure Vanilla JavaScript, HTML5, and CSS3. Featuring a soft, tactile Neumorphic UI, an infinite procedural stage generator, custom Web Audio API synth sounds, dynamic theme toggling, and an unlockable skin shop, this full-source game package is ready to deploy or monetize on game portals and web view applications.

Key Features

Pure Native Code Base: Built with pure HTML5, CSS3, and JavaScript without external heavy engine dependencies (No Phaser, No Canvas overhead, No jQuery).

Infinite Procedural Level Generator: Features a built-in Self-Avoiding Walk (SAW) algorithm that dynamically generates 100% solvable puzzle grids with scaling board sizes as players progress.

Modern Neumorphic Design: Soft 3D-embossed neumorphic UI styling with seamless Light and Dark mode switching.

Adaptive Color Palettes: Dynamic accent color system that smoothly shifts visual styling across stages and infinite procedural levels.

Built-In Synthesizer Audio: Procedural sound effects powered by the Web Audio API (pops, backtrack cues, victory chimes, and clicks) requiring zero external MP3/WAV assets.

Character Customization Shop: Built-in shop interface where players spend earned stars to unlock cute jelly faces and avatar skins.

Complete Controls & Smart Hints: Supports intuitive touch dragging, mouse interaction, keyboard navigation (WASD/Arrows), smart path backtracking, and visual step-by-step hints.

Responsive Mobile-First Layout: Designed for desktop browsers and fully optimized for iOS/Android web views, complete with smooth confetti animations.

Supported Browsers: Google Chrome, iOS Safari, Mozilla Firefox, Microsoft Edge, Opera, Brave

Technical Requirements:

Single standalone source file (fill_flow_game.html) with fully commented inline HTML5, CSS3, and JavaScript. Framework Dependencies: Zero (0) external dependencies or libraries—100% pure Vanilla JS engine. Supported Browsers: Chrome 88+, Safari 14+ (iOS/macOS), Firefox 85+, Edge 88+, and mobile webview browsers. Controls: Dynamic Touch drag, Mouse drag, Pointer Events, and physical WASD / Arrow Keyboard controls. Audio: Native Web Audio API support (synthesizes audio in real time with zero external .mp3 or .wav assets). Layout: Mobile-first responsive layout (optimized for 9:16 portrait viewports like 1080×1920) Hosting / Server: Runs on any basic static HTTP web server (Apache, Nginx, Node.js, Python, GitHub Pages) or directly from local file storage