PAC-MAN,
Rebuilt for the Browser
A pixel-faithful port of the 1980 Namco arcade classic — no plugins, no dependencies, no server round-trips. Just a single HTML file, a Canvas context, and the Web Audio API.
Tech Stack
HTML5 Canvas
All visuals — walls, Pac-Man, ghosts, food dots — drawn entirely with the 2D Canvas API. No image assets required.
Web Audio API
Eat, die, win, and BGM sounds synthesised in real-time using oscillators and gain nodes — no audio files to load.
requestAnimationFrame
Game loop runs via rAF with a fixed 100 ms physics accumulator, matching the original 10 fps game tick.
Python origin
Ported from a Pygame implementation. All wall coordinates and ghost patrol tracks were carried over verbatim.
FastAPI + Jinja2
Served as a Jinja2 template extending a shared base layout — SEO metadata, breadcrumbs, and nav all in one place.
Responsive CSS
Canvas scales with the viewport on mobile. Navigation collapses to a hamburger menu below 700 px.
Meet the Ghosts
Blinky
Starts outside the cage, leads the pack immediately.
Pinky
Exits first from the cage, heading straight up.
Inky
Slides right to the gate before climbing out.
Clyde
Slides left to the gate, then follows a looping route.
A Brief History
1980
Original Arcade Release
Namco releases PAC-MAN in Japan as Puck Man. Midway licenses it for North America. It becomes the best-selling arcade game of all time.
1982
Home Console Ports
Atari 2600 port ships 12 million copies — the best-selling Atari title ever — despite its technical compromises.
2000s
Flash & Browser Era
Dozens of Flash clones appear. PAC-MAN becomes a canonical example for game-programming tutorials worldwide.
Today
This Port
Rebuilt from a Python / Pygame source into a zero-dependency HTML5 Canvas app served by FastAPI — no Flash, no plugins, playable on any modern browser.
A Note
PAC-MAN is a registered trademark of Bandai Namco Entertainment Inc. This project is an independent, non-commercial fan recreation built for educational purposes — to demonstrate how a classic game loop can be implemented using only web-native APIs.
All ghost patrol routes, maze geometry, and game-tick timing were reverse-engineered from the original Pygame source code and preserved as accurately as possible in JavaScript.