Pixel Maze Game

Play the Game

Overview

Pixel Maze Game is a browser-based maze game where players guide a pixelated character through procedurally generated mazes. Each time the player completes a maze, a new one is generated that is both larger and more difficult, creating an endlessly escalating challenge.

This was my first project built from the ground up, combining procedural generation algorithms with responsive game design.

Architecture

Framework: Next.js 16 + React 18 + TypeScript

• Single-page application rendered client-side with HTML5 Canvas
• Procedural maze generation using recursive backtracking with braided dead-end culling
• Responsive canvas sizing that adapts to any screen width
• Mobile touch controls alongside keyboard input (WASD / arrow keys)

Technical Details

Framework/Stack: Next.js, React, TypeScript, CSS

Rendering: HTML5 Canvas with custom pixel-art sprite rendering

Maze Algorithm: Recursive backtracking with directional bias and configurable braid percentage to remove dead ends at higher difficulty levels

Difficulty Scaling:

• Maze grid starts at 5×5 and grows by 2 per level (capped at 25×25)
• Braid percentage increases with level, opening alternate paths and making navigation harder
• Three difficulty tiers: Easy (levels 1–3), Medium (levels 4–7), Hard (levels 8+)

Game Features:

Feature	Description
Procedural Mazes	Every maze is uniquely generated using recursive backtracking
Progressive Difficulty	Mazes grow larger and more complex each level
Pixel Art Character	Custom 8×8 pixel sprite rendered on canvas
Move & Time Tracking	Tracks moves and elapsed time per level
Best Records	Stores personal best moves and time per level
Screen Shake	Visual feedback when the player hits a wall
Mobile Controls	On-screen directional buttons for touch devices
Neon Visual Theme	Glowing walls, floating particles, and cyberpunk aesthetic

Source Code

View Source on GitHub

How It Works

1. Maze Generation — A grid of cells is created and carved into a maze using recursive backtracking with a directional bias for longer corridors. Dead ends are then selectively removed (“braided”) based on the current difficulty level.
2. Player Movement — The player navigates using keyboard (WASD / arrows) or mobile touch controls. Wall collisions trigger a screen shake animation.
3. Level Progression — Reaching the bottom-right corner completes the level. The game records your stats, displays a win modal, and automatically generates the next (larger) maze.
4. Rendering — The maze walls, finish point, and pixel-art player character are drawn each frame on an HTML5 Canvas with a neon glow effect.