Description
Three Sided Box | Phaser 4 HTML5 Game
Three Sided Box | Phaser 4 HTML5 Game is a brain-teasing isometric puzzle game template (built with Phaser 4 + TypeScript) where players activate box faces by drawing connected paths across a 3D grid. Strategically navigate branching paths, avoid dead ends, and complete every level by activating all visible faces — all rendered in a stunning 2.5D isometric projection using purely 2D sprite assets (no 3D models or rendering required).
Core Gameplay
- Goal: activate every playable face (front, side, or top) on each box by drawing a continuous path from face to face.
- Click or drag across faces that visually share an edge — neighbor detection is based on visible edges, not grid adjacency.
- Face branching paths and dead ends — use Undo (Z) or Reset (R) to recover when stuck.
Levels + Generator
- Levels are defined as a 3D numeric grid, making it intuitive for designers to create and edit puzzle layouts.
- Each cell supports 8 face-enable codes (0–7), giving fine-grained control over which faces (front, side, top) are playable on every box.
- Built-in Level Generator CLI tool automatically produces unique, solvable levels with adjustable difficulty.
- 4 difficulty presets — Easy, Medium, Hard, Insane — controlling grid size (up to 12×14×10), block count (up to 95), and visible face count (up to 80).
- Insane mode includes a solvability-preserving post-processor that randomly disables faces for extra challenge.
- Optional hint steps can be assigned per level to guide players or serve as the intended solution path.
Template Features
- Reskin-ready with a dedicated reskin guide and comprehensive documentation.
- Complete documentation including architecture overview, gameplay rules, asset catalog, level generator guide, and reskin guide.
- Designed for 1080×1920 (9:16 portrait) mobile target resolution.
- 30 included levels ranging from simple 2×2 grids to complex multi-layered puzzles — all generated via the built-in CLI script.


