Project Overview

Mind Labyrinth is an interactive maze exploration game built using React and the HTML5 Canvas API. The game procedurally generates unique mazes using the Recursive Backtracking algorithm and challenges players to navigate through fog-covered paths to find the exit. With smooth animations, particle effects, easing-based movement, fog-of-war mechanics, and progressive difficulty scaling, the game delivers a calm yet engaging experience inspired by minimalist zen aesthetics.

Screenshots

Key Features

• Procedural Maze Generation
  • Recursive Backtracking algorithm
  • Unique maze layout every level
  • Dynamic grid scaling based on level
• Fog of War System
  • Limited visibility radius around player
  • Progressive map reveal as player explores
  • Soft fog gradient blending
• Smooth Player Movement
  • Easing-based animated transitions
  • Grid-based movement with collision detection
  • Wall-boundary validation
  • Keyboard controls (WASD & Arrow Keys)
• Visual & UX Effects
  • Ink-style hand-drawn wall rendering
  • Particle trail effects on movement
  • Animated glowing player orb
  • Pulsating exit marker
  • Subtle paper texture & grain effect
  • Elegant start and win screens
• HUD System
  • Real-time move counter
  • Live timer
  • Level progression
  • Win statistics display
• Progressive Difficulty
  • Maze dimensions increase with level
  • Gradual challenge scaling
  • Multi-level gameplay system

Functionality

• User starts the journey from the start screen.
• Maze is procedurally generated based on current level.
• Player begins at top-left corner.
• Fog initially hides unexplored areas.
• Player moves using WASD or Arrow Keys.
• System:
  • Checks wall collisions
  • Validates movement
  • Animates smooth transitions
  • Reveals nearby fog tiles
• Particle effects trigger on movement.
• Move count increments per valid step.
• Timer tracks gameplay duration.
• When player reaches exit:
  • Win animation triggers
  • Stats are displayed
  • Option to proceed to next level or restart.
• Next level increases maze complexity.

Technology Used

• React.js
• JavaScript (ES6+)
• HTML5 Canvas API
• requestAnimationFrame
• React Hooks (useState, useEffect, useRef, useCallback)
• Procedural Generation Algorithm (Recursive Backtracking)
• Custom easing functions

Why This Project Is Useful

• Demonstrates knowledge of algorithmic maze generation
• Implements Canvas rendering inside React
• Shows strong understanding of game loop architecture
• Uses useRef for performance optimization
• Implements easing-based animation logic
• Demonstrates particle systems
• Shows fog-of-war implementation
• Demonstrates real-time rendering with requestAnimationFrame
• Excellent portfolio project for:
  • Frontend Developer roles
  • Game Development internships
  • UI/UX interactive roles
  • Technical interviews involving algorithms
• This project shows both creative design skills and technical depth.

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.