Three Sided Box | Phaser 4 HTML5 Game

Three Sided Box 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.

Supported Browsers

• Chrome
• Firefox
• Safari
• Edge
• Opera

Tech Stack

• Phaser 4 (HTML5 game framework).
• TypeScript 5.7
• Vite 6.3

Asset Credits

• Images: DevilsWork.shop (itch.io), Leo Red (itch.io)
• Sound Effects: Kenney (itch.io)