Driblio

Driblio is a complete draw-and-fill water physics puzzle built with Phaser 3 and Matter.js. Draw solid ink strokes with your mouse or finger - the strokes become real physics colliders - then open the tap and watch rigid-body water droplets follow your line into the glass. Fill the glass to the dotted target line to win, and use as little ink as possible to earn 3 stars. 30 hand-designed levels, procedural Web Audio and SVG artwork, all in plain JavaScript with no build step required to play.

Highlights

• Draw solid ink strokes with mouse or touch - strokes become real Matter.js colliders
• Openable tap that pours realistic rigid-body water droplets
• 30 hand-designed levels with progressive difficulty
• Limited ink per level: every pixel you draw is budgeted
• 1 to 3 star rating per level based on how little ink you used
• Fill detection with a per-level target line drawn on the glass
• Animated glass character with normal, happy and sad expressions
• Level select grid with locks, earned stars and progress saved in localStorage
• Hint system: shows a dashed suggested path per level
• Pause menu with resume, restart level and main menu
• Level complete / try again overlays with replay, next and hint actions
• Sound effects with a mute toggle (persisted between sessions)
• Confetti celebration on winning
• Responsive scaling: fits any screen in landscape (960x640 design resolution)
• Keyboard-free, mouse and multi-touch friendly

Technology

• Phaser 3.80 with built-in Matter.js physics, loaded via import map
• Vanilla JavaScript ES modules - clean, commented, no frameworks
• Optional esbuild production bundling (one command, Phaser stays external so the bundle stays ~34 KB)
• SVG artwork and procedural textures, no large image assets
• Web Audio API sound, procedurally generated (no audio files)
• One-file theming: all colors and tuning constants live in src/config.js

Requirements

• Any modern browser and any static host (or a local static server for testing)
• Optional: Node.js 18+ only for the production build step
• No API keys, no accounts, no third-party services - 100% offline

What You Get

• Full source code: 30 levels, 5 scenes, modular systems (drawing, water, fill detection, stars, hints, save, audio)
• Ready-to-serve production build in dist/ - upload it to any static host and play
• npm test level validator: checks supply, fill targets and ink budgets for all 30 levels
• documentation.html: setup, structure, customization, re-skin, build and publishing guide
• README.md with a quick-start, level format and editing rules of thumb
• 5 gameplay screenshots
• Full rights to rebrand, reskin, extend and publish on any website or app store wrapper

Please note: this is a source code template, not a compiled app. Basic knowledge of HTML and JavaScript is recommended for customization. If you have questions, use the contact form on the site, I usually reply within 24 hours.