ExitMyMaze

Inspiration

The true inspiration behind ExitMyMaze was to create a game that enables anyone to build their own custom mazes easily and intuitively, with a heavy emphasis on an outstanding user experience. By giving creators the tools to design custom shapes like Triangles, Circles, and Hexagons, we wanted to unleash endless replayability. This creates a competitive space where players continuously challenge each other’s designs and race for the best times on the leaderboards.

What it does

ExitMyMaze is a 2.5D isometric puzzle game on Reddit.

• Design & Customize: Users can build custom-shaped mazes (Square, Circle, Triangle, Pentagon, or Hexagon) using a built-in grid editor.
• Interact & Survive: Creators can place items on their maps: a locked exit that requires finding a hidden key, portals for instant teleportation, and a time-saving treasure.
• Play & Compete: Players attempt to solve the maze as quickly as possible. Their best times are sent to a global leaderboard linked to the post.
• Community Discovery: Posts are automatically tagged with shape-based flairs, allowing members of the subreddit to filter and find their favorite layout styles easily.

How we built it

We developed ExitMyMaze using a modern web stack integrated with Reddit's Devvit platform:

• Frontend Game Engine: Powered by Phaser to handle the core game loop, camera perspective scaling, movement, and collision updates.
• UI/UX Layer: Built with React, TypeScript, and TailwindCSS for clean, premium styling, dark mode gradients, and micro-animations.
• Backend & Storage: Leveraged Devvit's Redis-backed KV store to persist custom maze layouts, global leaderboards, and user streaks.
• Visuals & Assets: Renders an isometric 2.5D canvas preview on the Reddit feed, with an animated Snoo character running through the actual maze corridors.

Here is a snippet showing how we initialize our Phaser scene config and translate the logical grid positions into screen coordinates for our 2.5D isometric projection:

const TILE_WIDTH = 18;
const TILE_HEIGHT = 18;
const WALL_HEIGHT = 8;

const gridToScreen = (row: number, col: number): { x: number; y: number } => {
  const x = col * TILE_WIDTH;
  const y = row * TILE_HEIGHT;
  return { x, y };
};

export class MazeScene extends Phaser.Scene {
  private playerSprite!: Phaser.GameObjects.Sprite | Phaser.GameObjects.Arc;
  private gameState!: GameState;

  // Smoothly moves player and animates between directional textures
  private movePlayerTo(target: Position, dir: 'up' | 'down' | 'left' | 'right') {
    const { x, y } = gridToScreen(target.row, target.col);
    this.tweens.add({
      targets: this.playerSprite,
      x: x + TILE_WIDTH / 2,
      y: y + TILE_HEIGHT / 2 - 2, // minor offset for 2.5D depth
      duration: 130,
      onComplete: () => {
        this.gameState.playerPos = target;
      }
    });
  }
}

Challenges we ran into

Building a 2.5D game within a sandboxed Devvit webview presented several unique challenges:

• Responsiveness & Cross-Device Alignment: Adjusting layouts and orientation settings so that controls and game viewports are aligned perfectly on both mobile screens and desktop monitors.
• Camera Perspective & Angles: Tuning the isometric camera angles and projection offsets (WALL_HEIGHT, TILE_HEIGHT) to render large-scale (25x25) custom shapes cleanly without creating optical overlapping or clipping.
• Animations: Syncing game engine sprite animations with browser-based micro-interactions, particularly getting the animated Snoo overlay on the preview screen to map out a random patrol path naturally.
• Platform Redirection: Bypassing webview navigation restrictions to reliably redirect users to their newly published maze posts.

Accomplishments that we're proud of

We are incredibly proud to have created a highly polished, responsive game complete with audio feedback and smooth, satisfying animations. Seeing the custom 2.5D isometric design come to life, along with the automated post flairs and interactive Snoo running through the actual maze corridors, makes ExitMyMaze feel like a premium, console-grade experience directly on Reddit.

What we learned

We gained valuable experience in optimizing games for constrained WebView environments:

• RPC Call Optimization: Minimizing calls between the React frontend and the Devvit backend to prevent lag during saves and leaderboard updates.
• Dynamic Pathfinding: Implementing BFS and random-walk path generation on the client-side to drive NPC animations naturally.
• Aesthetics Matter: Curating distinct color schemes (neon cyans, magentas, and rich dark blues) dramatically improves player retention compared to standard colors.

What's next for ExitMyMaze

• Real-time Multiplayer races: Allowing two players to run through the same maze simultaneously to see who escapes first.
• More Obstacles & Items: Introducing moving enemies, traps, and power-ups like speed boosts.
• Advanced Editor Tools: Adding copy-paste, undo/redo, and brush tools for more complex, grand-scale maze designs.

Built With

• devvit
• javascript
• node.js
• phaser.io
• phaser.js
• react
• reddit