Flowline – Addictive Color Pipe Puzzle Game

Flowline is a polished HTML5 puzzle game where players drag smooth paths to connect matching colored dots and fill every cell on the grid. Plan your moves, beat par, and unlock levels in a clean, modern interface with procedural sound and star ratings.

Game Features

✅ Bezier Pipe Paths – Draw flowing pipes with smooth curves; satisfying visuals and clear feedback as you connect pairs.
✅ 10 Hand-Crafted Levels – Grids from 5×5 up to 9×9 with multiple colors; each level is tuned and solvable.
✅ Choose Level Screen – Pick any unlocked stage from a dedicated level picker; locked levels show a clear key icon.
✅ Star Ratings & Par – Fewer moves than par earns up to three stars; your best score is tracked per level.
✅ Hints & Undo – Limited hints per level; full undo stack and reset so players can experiment without frustration.
✅ Keyboard & Touch – Drag on touch/mouse; arrow keys, Enter, and shortcuts for power users.
✅ Progress Saved – Completed levels and best move counts persist in localStorage across sessions.
✅ How to Play & Win Overlay – Built-in rules modal and celebratory screen with stats after each solve.
✅ Responsive Layout – Playable on desktop, tablet, and mobile browsers; landscape layouts supported.
✅ Vanilla HTML5 – Canvas 2D rendering, no heavy game engine; easy to read and customize.

Easy Setup

Upload the source folder to your web server (or open index.html via a local server) and play immediately. All logic is plain JavaScript, CSS, and assets—no build step required for basic deployment.

Perfect For

Fans of flow, pipe, and path-filling puzzle games.
️ Portals and sites that want a lightweight branded puzzle game.
‍ Developers who need readable source to reskin or extend.
Casual players who want short sessions on phone or desktop.

What’s Included

Complete HTML5 source (index.html, style.css, js/*.js)
UI styling with customizable colors and tiled background support
Procedural sound effects (Web Audio API—no external audio files required)
Level definitions in levels.js for easy editing

Customization Ideas

Swap fonts and CSS variables, replace the tile background image, add your logo on the splash screen, or extend LEVELS with new puzzles. The canvas renderer and game rules are separated for clarity.

Connect the colors, fill the grid, and master the flow—play Flowline today!