Escape the Labyrinth

EscapeTheLabyrinth is a game where players design, share, and solve handcrafted mazes: edit levels, and race to escape solo or with friends in quick, creative, replayable runs.

Comment 1

About Escape the Labyrinth

Inspiration

Escape the Labyrinth was born from a desire to combine creative level design with instant playability. I wanted players to be both the architect and the explorer: sketch a maze, tweak it in an editor, then immediately jump in and try to escape or share the challenge with friends. The project takes cues from classic maze puzzles, teaching tools for spatial reasoning that favor quick, replayable sessions.

What it does

  • Provides a visual editor to design handcrafted mazes (place walls, set start and finish).
  • Lets players play through mazes
  • Offers previewing and simple validation (warn when there is no valid path).

Key user flows:

  • Design -> Preview -> Play -> Share

How we built it

  • Frontend: TypeScript + React with Vite for fast development.
    • Editor and game UI live under src/client/components/ (e.g., LabyrinthEditor.tsx, LabyrinthGame.tsx).
    • Small custom hooks manage core state (src/client/hooks/useLabyrinth.ts).
  • Backend: Minimal Node server for persistence and sharing endpoints (src/server/index.ts).
  • Tooling: Top-level tsconfig.json, Vite configs in src/client and src/server, and static assets under assets/.
  • Architecture: single-source-of-truth for the maze grid, with the editor and preview reading/writing through the same hook; server stores level data and returns shareable IDs.

Challenges we ran into

  • Editor UX: making painting and erasing walls feel natural across mouse and touch inputs required careful input handling and mode toggles.
  • Validation: user-created mazes sometimes had no valid path; we added a path-finding check and UI warnings.
  • Performance: rendering large grids can be slow. We mitigated this by capping default sizes, rendering only changed cells, and using lightweight data structures.
  • Syncing editor and play state: keeping preview and game state consistent without duplicate logic led us to centralize grid operations in useLabyrinth.

Accomplishments that we're proud of

  • A compact, usable editor that feels tactile on both desktop and touch devices.
  • Immediate preview/play loop so creators can iterate quickly.
  • A small, focused server API that enables sharing levels with minimal overhead.
  • Clear separation of responsibilities between the client (UI & interactivity) and the server (persistence & sharing).

What we learned

  • Small, focused hooks simplify state sharing between editor, preview, and game components.
  • Always validate user-created content; tools that help creators quickly diagnose problems (like “no path found”) improve the experience.
  • Complexity considerations: an $N\times N$ grid has $N^2$ cells, so naive full-grid algorithms are $O(N^2)$ in time and space. Keeping defaults modest and using incremental updates keeps the app responsive.

What's next for Escape the Labyrinth

  • Add automated tests for editor operations and the path-finder.
  • Implement undo/redo and version history for levels.
  • Add procedural generation modes and a difficulty metric based on shortest-path length and branching.
  • Consider collaborative editing or live multiplayer runs in shared mazes.
  • Bigger Maze

Built With

Share this project:

Updates