Free Online Maze Generator and Pathfinding Solver

Overview

A high-performance, browser-based utility designed for educational visualization and logic puzzle generation. This application allows users to create custom-sized grid mazes and watch pathfinding algorithms traverse them in real-time.

Core Features

• Dynamic Grid Sizing: Adjust row and column counts to create mazes ranging from simple grids to complex, high-density networks.
• Algorithm Selection:
  • Generators: Recursive Backtracking (DFS).
  • Solvers: Breadth-First Search (BFS), Depth-First Search (DFS), and A* visualization.
• Speed Control: Adjustable playback speed for algorithm visualization, allowing users to watch the search process frame-by-frame or at full speed.
• Interactive Canvas: Click to set start and end points manually if desired.
• Export Capability: Generate a high-resolution PNG of the current maze state for printing or offline use.
• Responsive Controls: A sleek top-bar interface that adapts to tablets and desktop screens.

UI/Layout Specification

• Header: Contains the application title and a minimal help button.
• Control Panel: A sticky top section featuring inputs for Grid Size, Speed Slider, Selectors for Algorithm, and 'Generate' / 'Solve' action buttons.
• Canvas Area: A centralized, high-contrast grid area. Light background with subtle light-grey grid lines. Paths are rendered as distinct, crisp strokes.
• Status Bar: A small display showing the current algorithm being performed and the number of steps taken during the solve.

Visual Identity (Light Mode Only)

• Palette:
  • Background: #FFFFFF (Pure white)
  • Grid Lines: #E2E8F0 (Light Slate)
  • Walls: #1E293B (Dark Slate Blue)
  • Path/Highlight: #3B82F6 (Vibrant Azure)
  • Text: #334155 (Slate Gray)
• Typography: Sans-serif, geometric typeface (e.g., Inter or system UI stacks).
• Transitions: All UI interactions (buttons, sliders) utilize transition: all 0.2s ease-in-out for a smooth, high-end feel.

Implementation Guidelines (Crucial)

• Single-File Architecture: All HTML, CSS, and JavaScript must be contained within a single .html file. CSS should be in <style> tags, and logic in <script> tags.
• Stateless Design: Do not use localStorage, sessionStorage, or cookies. Maintain all algorithm states, grid dimensions, and history in standard JavaScript variables.
• No External Dependencies (Unless CDN): Use CDN links for any necessary icon sets (e.g., FontAwesome) or CSS frameworks (e.g., Tailwind CSS). Avoid any NPM or local installation requirements.
• Iframe Compatibility: The app is designed to run in a sandboxed iframe. Avoid prompt(), alert(), confirm(), or any attempts to access window.top or cookies, as these will trigger security errors.
• Performance: Use requestAnimationFrame for visualization loops to ensure smooth performance without blocking the main browser thread.