Frontend•Frontend Engineer•2026•Rubric Score: 4.43/5.0

Modern Pac-Man Arcade Engine

High-performance arcade recreation built with Next.js 14, TypeScript, and autonomous ghost AI state machines.

Interactive browser recreation of the classic arcade game Pac-Man built from scratch using Next.js 14 App Router, strict TypeScript, React Hooks, and Tailwind CSS. Features 4 distinct autonomous ghost AI behaviors, tile collision grid, wrap-around tunnels, and touch/keyboard controls.

4 Behaviors

Ghost AI Engines

<16ms

Frame Latency

0 External

Game Engines

View verified GitHub repo Open verified live demo

The Problem & Intended Users

Recreating responsive 60fps retro arcade mechanics, tile collision grids, direction buffering, and authentic multi-ghost behaviors in modern React without depending on heavyweight external canvas game engines.

Architecture & Implementation Decisions

Implemented a custom game loop state machine (`useGame`) using pure React hooks and requestAnimationFrame, coupled with deterministic tile coordinate mathematics, SVG scalable vector sprites, power pellet timers, and distinct ghost AI states.

Technical Architecture Pipeline:

Next.js 14 App Router component tree (`Maze.tsx`, `PacMan.tsx`, `Ghost.tsx`, `ScoreBoard.tsx`) powered by custom state hooks (`useGame.ts`), TypeScript models (`types/`), collision utilities (`utils/`), and CSS keyframe glowing effects.

Source-Verified Capabilities

Four autonomous ghost AI behavior patterns: Blinky (chaser), Pinky (ambusher), Inky (random), Clyde (defender)

Pixel-perfect grid collision detection and tunnel wrap-around mechanics

Power pellet mode triggering 6-second ghost vulnerability states and scoring multipliers

Direction input buffering ensuring fluid turn executions at intersections

Fully responsive layout with desktop keyboard controls (WASD / Arrows) and mobile touch interaction

SVG vector graphics ensuring razor-sharp rendering on high-DPI displays without raster pixelation

Measurable Results & Delivery

A fast, responsive, zero-dependency arcade game deployed live on GitHub Pages with authentic ghost pathfinding, mobile touch support, score tracking, lives management, and pause capabilities.

Validated across desktop browsers and mobile touchscreens with responsive viewport testing.

Verified Technologies & Tools

Next.js 14TypeScriptReactTailwind CSSSVGGame Development

Looking for this level of engineering rigor on your project?

I architect clean, accessible, and high-performance web systems and automated AI pipelines tailored to production standards.

Start a direct inquiry Back to all builds