Pipecraft — Puzzle

A polished, fully featured HTML5 pipe-connection puzzle game built for commercial distribution. Zero external JavaScript dependencies. Works on any device, in any modern browser, straight from a static file host.

Overview

Pipecraft challenges players to connect matching colored endpoints on a grid by drawing pipe paths, then filling every cell of the board. Three difficulty tiers, 150 levels, a full coin economy, a daily streak system, an integrated ad framework, and four free selectable themes make Pipecraft a complete, ready-to-ship product.

About the Game

• Entry point is index.html — no build step required
• Pure vanilla HTML5, CSS3, and ES6+ JavaScript — no libraries, no frameworks, no package manager
• SVG-based game board — crisp rendering at every screen size and pixel density
• Procedural Web Audio API sound engine — no audio files bundled
• All game state persisted to localStorage with full graceful degradation when storage is unavailable
• Supports mouse, touch, and stylus input via the Pointer Events API

Themes

Four themes are available to all players at no cost, each with a matching background image. The active theme is saved to localStorage and applied instantly on every return visit.

• Purple — deep violet lobby with electric purple accents (default)
• Black — pure dark minimalism with silver-white accents
• Parrot — vivid jungle greens with neon lime highlights
• Pink — soft rose tones with warm blush highlights

Levels

• 150 total levels across three difficulty tiers
• 50 Easy levels, 50 Medium levels, 50 Hard levels
• All puzzle data is embedded directly in script/js/script.js — no external level files to load
• New levels can be added by appending entries to the LEVELS object in script.js
• Level progress and completion state are saved per-difficulty in localStorage
• A Level Select overlay with a progress bar lets players jump to any unlocked level

Difficulty Modes

• Easy — 5 × 5 grid: 25 cells, 3 to 5 color pipes per puzzle. Approachable for new players.
• Medium — 7 × 7 grid: 49 cells, more pipes, denser routing. Suitable for casual puzzle fans.
• Hard — 10 × 10 grid: 100 cells, maximum pipe count. Designed for experienced puzzle solvers.

How to Play

1. Select a difficulty and level from the lobby.
2. Tap and drag from one colored endpoint to its matching colored endpoint to draw a pipe path.
3. Pipes can be erased by dragging back over them or starting a new path from the same endpoint.
4. Connect all colored pairs and fill every cell of the grid to complete the level.
5. A star rating is awarded based on move efficiency (moves used vs. the optimal move count).

Controls

• Desktop: Click and drag to draw pipes. Click an existing pipe to erase and redraw.
• Mobile / Touch: Tap and drag to draw pipes. Touch controls use the Pointer Events API for precise, lag-free input.
• Undo: Step back one move at a time.
• Hint: Reveal the correct next step for one pipe. Uses the hint inventory (starts at 3; more can be purchased in the shop or earned by watching an ad).
• Reset: Clear all pipes and restart the current level.
• Pause: Pause the timer and access skip, lobby, and quit options.

Settings

All settings are accessible from the lobby settings button and are saved automatically to localStorage.

• Sound Effects: Toggle procedural game sounds on or off. (Note: no background music is included.)
• Show Timer: Toggle the elapsed-time counter in the game header.
• Particle Effects: Toggle the particle burst animation that plays on pipe connection.
• Auto-Fill Hint: When enabled, hints automatically complete one full cell step rather than just indicating the direction.
• Reset All Progress: Clears all saved progress, coins, and settings from localStorage.

Ad Monetization

Pipecraft ships with a fully integrated, configurable ad system ready to connect to any ad network.

• Ads are displayed in a full-screen overlay with a sandboxed iframe, a countdown timer, and a skip button that appears after 5 seconds (configurable).
• Ad content is loaded from script/ads/ad.html — the file contains clearly marked comment blocks that show exactly where to paste your ad network’s loader script and ad unit code (Google AdSense, AdMob Web, ironSource, Unity Ads, etc.).
• Ad completion is signaled from the ad slot via window.parent.postMessage('AD_COMPLETE', '*').
• Ad trigger points: game start, every third level completed (interstitial), quit/back-to-lobby, skip-level action, and the lobby “Earn Coins” button.
• Watching an ad rewards 50 coins. All reward amounts and trigger frequencies are configurable in script/js/script.js.
• Players can spend 300 coins in the shop to disable ads for their current session.

Tech Stack

• HTML5 — semantic markup, all screens in one file
• CSS3 — custom properties, flexbox, grid, keyframe animations, backdrop-filter
• Vanilla JavaScript (ES6+) — modules, arrow functions, optional chaining, Pointer Events API, Web Audio API
• SVG — scalable vector game board, all icons drawn inline
• Google Fonts CDN — Barlow Condensed, DM Sans, JetBrains Mono, Orbitron, Rajdhani, Space Grotesk, Bebas Neue, Share Tech Mono
• localStorage — all game persistence (progress, coins, settings, theme, streak, owned items)
• No canvas, no WebGL, no game engine, no npm dependencies

Requirements & Compatibility

• Any modern browser: Chrome 88+, Firefox 85+, Safari 14+, Edge 88+, Samsung Internet 14+
• No server-side code required — deploy to any static file host (GitHub Pages, Netlify, S3, cpanel, etc.)
• No installation, no build step, no CLI tools required
• Internet connection required for Google Fonts to render correctly; see documentation for offline font bundling instructions
• Fully responsive — adapts to desktop, tablet, and mobile screens
• Internet Explorer is not supported
• All localStorage operations are wrapped in try/catch for safe degradation in private browsing mode