hauntarea

You find your self in a dream where everything is dark and the only way out is to find the exit. But WAIT, there are traps and random ghost keep appearing all around you. Can you make it out?

Comment

HauntArea - Project Details

Inspiration

HauntArea was inspired by the desire to create a unique multiplayer experience where players don't just compete on leaderboards—they actively haunt each other. We wanted to capture that eerie feeling of being "watched" by ghosts of past players while navigating deadly mazes. The concept draws from roguelike dungeon crawlers and adds a social twist: every move you make becomes part of the danger for future players. It's a game where your strategies, mistakes, and creativity literally come back to haunt others.

What it does

HauntArea is a tactical stealth puzzle game built for Reddit where players navigate procedurally dangerous mazes while being haunted by replays of real player movements:

Core Gameplay:

  • Navigate 12x12 grid-based levels filled with hidden walls, mines, pits, and obstacles
  • Destroy walls with your axe to forge new paths
  • Escape through the exit while managing HP and stamina
  • Ghost System: Every 5 seconds, a ghost spawns that replays 7 consecutive moves from a real player's run—at the exact position where that player was. Ghost attacks can damage you!

Game Modes:

  • Challenge Mode: Random unplayed levels in succession
  • New Mode: Browse only areas you haven't played yet
  • Arcade Mode: Progress through all levels in ascending difficulty order (★ to ★★★★★)

Community Features:

  • Level Editor: Create and publish your own deadly mazes with walls, hidden traps, mines, and strategic layouts
  • Per-Area Leaderboards: Ranked by move efficiency and deaths (fewer = better)
  • Dynamic Difficulty: Automatically calculated from obstacle count + average player deaths + average moves
  • Real Player Stats: Play counts, escape rates, and community-driven difficulty ratings

Progression System:

  • Track played vs. unplayed areas
  • Watch your strategies become ghosts that haunt future players
  • Compete on area-specific scoreboards

How we built it

Tech Stack:

  • Frontend: React 19, Phaser 3 (game engine), Tailwind CSS 4, Vite
  • Backend: Node.js v22 serverless (Devvit), Hono, tRPC v11
  • Database: Redis (via Devvit)
  • Testing: Vitest with property-based testing (fast-check)

Architecture:

  • Client-Server Communication: End-to-end type-safe tRPC for all data fetching
  • Game Scenes: Phaser scene manager handles MenuScene, PlayModeScene, BrowserScene, ChallengeScene (gameplay), EditorScene, LeaderboardScene, StatsScene
  • Ghost System:
    • Server-side: Random selection of 7-move sequences from stored runs
    • Position calculation: Applies all previous moves to find exact spawn location
    • Client-side: Ghost sprites with 0.7x speed, translucent rendering, event-based damage system
  • Run Recording: Every move, attack, death, and respawn is timestamped and stored
  • Data Flow: Player actions → Redis storage → Random selection → Ghost replay

Key Implementation Details:

  • Fog of war visibility system (3.5-tile radius)
  • Responsive grid layout with touch controls (virtual joystick + attack button)
  • Tile-based collision and pathfinding
  • Real-time difficulty calculation based on play data
  • Played area tracking via localStorage

Challenges we ran into

  1. Ghost Position Accuracy: Initially, ghosts spawned at the life's starting position, not where the sequence began. We had to implement position calculation by applying all preceding moves to find the exact tile where the 7-move sequence started.

  2. Type Safety with tRPC: Ensuring end-to-end type safety between client and server required careful type definitions, especially for complex nested structures like run recordings with multiple lives and action sequences.

  3. Responsive Grid Scaling: Making the 12x12 grid work across desktop and mobile while maintaining touch controls and visual clarity required extensive layout calculations and resize handling.

  4. Test Infrastructure: Phaser scene mocking for unit tests proved challenging. We focused on integration testing and property-based testing for core game logic instead.

  5. Real-Time Data Consistency: Balancing between showing fresh stats (play counts, escape rates) and caching for performance, especially when ghosts are fetching data every 5 seconds.

  6. Mode-Based Progression: Implementing three different play modes (Challenge, New, Arcade) with different filtering and progression logic while keeping the codebase maintainable.

Accomplishments that we're proud of

  1. The Ghost System Works! Watching real player movements replay as ghosts with accurate positions and timing feels magical and creates genuine tension during gameplay.

  2. Full Type Safety: Complete type safety from client to server with tRPC means fewer runtime bugs and better developer experience.

  3. Comprehensive Testing: 143 tests covering game logic, scene transitions, data validation, and edge cases using both traditional and property-based testing.

  4. Level Editor: A fully functional in-game editor where players can design, test, and publish levels—driving community-created content.

  5. Dynamic Difficulty: The difficulty system adapts based on real player data (obstacles + deaths + moves), making ratings meaningful and accurate.

  6. Mobile Support: Full touch controls with virtual joystick, swipe gestures, and responsive layout that works seamlessly on phones.

  7. Clean Architecture: Separation of concerns with shared types, server-side business logic, and client-side presentation makes the codebase maintainable and extensible.

What we learned

  1. Event-Driven Architecture: Using Phaser's event system for ghost attacks taught us how decoupled systems can communicate elegantly without tight coupling.

  2. Async Data Flow in Games: Managing async tRPC calls within a game loop requires careful state management and null checking to prevent race conditions.

  3. Position Calculation is Hard: Accurately replaying player movements required deep understanding of coordinate systems and move application order.

  4. Redis for Game Data: Redis's sorted sets and hash structures are perfect for leaderboards and run storage, making queries fast even with lots of data.

  5. Property-Based Testing: Using fast-check for game logic validation (grid operations, level validation) caught edge cases we never would have thought of.

  6. Community-Driven Difficulty: Letting real play data determine difficulty creates more accurate ratings than any manual system could.

  7. Responsive Game Development: Building a game that works on both desktop and mobile requires thinking about input methods, screen sizes, and UI scaling from day one.

What's next for HauntArea

Short Term

  1. Ghost Variety: Add visual variations to ghosts (different colors, effects) based on player levels or achievement unlocks
  2. Sound Effects: Audio feedback for moves, attacks, ghost spawns, and damage
  3. Daily Challenges: Curated levels that change daily with special rewards
  4. Social Features: Comment on levels, favorite creators, share replays

Medium Term

  1. Power-Ups: Collectible items in levels (speed boost, shield, reveal fog)
  2. Ghost Filtering: Successful run ghosts vs. failed run ghosts with visual indicators
  3. Replays: Watch full playthrough replays of top leaderboard runs
  4. Level Themes: Visual tile sets (dungeon, forest, tech) for editor variety
  5. Achievement System: Unlock ghost styles, tile themes, and badges

Long Term

  1. Co-op Mode: Two players navigate the same level simultaneously
  2. PvP Mode: Race mode where players compete in real-time on the same level
  3. Level Campaigns: Sequential story-driven level chains
  4. Ghost AI: Ghosts that adapt behavior based on player strategies
  5. Level Generation: Procedural generation with difficulty parameters
  6. Mobile App: Standalone mobile version with push notifications for challenges

Technical Improvements

  1. Performance Optimization: Sprite pooling, ghost culling beyond viewport
  2. Improved Test Coverage: Fix ChallengeScene mock infrastructure
  3. Analytics Dashboard: Track player behavior, popular levels, retention metrics
  4. Level Moderation: Community reporting and admin tools for inappropriate content
  5. WebSocket Support: Real-time multiplayer features when Devvit adds support

HauntArea turns every player into both protagonist and antagonist—your gameplay creates the hazards others must survive. It's not just a game; it's a living, breathing maze of player memories that grows more dangerous (and interesting) with every run.

Share this project:

Updates