I Built Pac-Man in ~150 Lines of Vanilla JavaScript

#gamedev #webdev #javascript #beginners

Pac-Man looks like it needs serious AI and a physics engine. It needs neither — a maze stored as text, grid movement, and ghosts that just step toward you. About 150 lines of vanilla JavaScript.

🟡 Play it: https://dev48v.infy.uk/game/day11-pacman.html

1. The maze is a grid of text

const MAZE = ["#####","#...#","#.#.#"];  // # = wall, . = pellet

Everything — movement, collision, pellets, ghost moves — is a lookup into this grid. The whole level is data you can edit by typing.

2. Grid movement, blocked by walls

if (MAZE[pac.y+dy][pac.x+dx] !== "#") { pac.x += dx; pac.y += dy; }

That one check IS your collision system. No pixel math.

3. Buffered input feels right

Store a wanted direction separately; switch to it when that way opens. That tiny buffer is the difference between responsive and stiff controls.

4. Eat pellets = change the grid

if (grid[y][x] === ".") { grid[y][x] = " "; score += 10; pellets--; }

When pellets hits 0, the maze is cleared.

5. Ghosts: greedy chase

From a ghost's legal moves, pick the one closest to Pac-Man (plus a little randomness so you can escape). Greedy distance-minimising is surprisingly menacing.