A Pac-Man maze in blue on black, dots laid through every corridor

Personal

Pac-Man

Pac-Man rebuilt in the browser: the maze, the pellets, four ghosts with their own pursuit behaviour, and the frightened state that briefly reverses all of it. Canvas and plain JavaScript, no engine.

Play it kiara-vong.github.io/site/projects/pacman · source
RoleEverything
StackJavaScript, canvas
Year2023
NoteIf you want to know more, let me know!
Context

The game is the ghosts

Pac-Man is easy to describe and hard to reproduce, and almost all of the difficulty is in four characters who could have been identical and deliberately are not. The maze is a fixed grid, the pellets are a counter, and the player has one input. Everything anybody remembers about the game comes from how the ghosts behave.

So the interesting version of this project was never getting a yellow circle to move. It was giving four pursuers distinct personalities out of one shared movement system.

The maze before the first move: every corridor laid with pellets, the ghost house closed in the middle, score and lives along the bottom
the ghost house

Four pursuers start here sharing one movement system. All that separates them is which tile each one is aiming at.

Nothing has moved yet, and everything that matters is already on screen: a fixed grid, a pellet in every corridor, and the box in the middle that the whole game comes out of.
How it works

Four chase rules, one movement system

Each ghost runs the same loop: pick a target tile, then at every junction take the direction that most reduces the distance to it, without reversing. All four share that. What separates them is only which tile they choose, which is a remarkably cheap way to buy character.

Frightened mode then inverts the rule rather than replacing it: the same code picks the direction that INCREASES the distance. The state everyone remembers is four lines, because the movement system was built to be pointed at any target.

The countdown, a clean run past two ghosts, then a cornering none of the three chase rules were built to survive, and the restart that follows automatically.
Four boards side by side: the same player in each, one ghost each, and a different highlighted target tile every time
The part no screenshot of this game can show. Every frame of the clip above is four ghosts moving; the reason they move differently is four target tiles, and that only exists in the code until something draws it.
01Targets, not pathsNo pathfinding anywhere. A ghost only ever compares the distance from each legal exit of a junction, which is why it can be wrong in the specific ways that make it fun to dodge.
02No reversingOne rule, and it is what stops a ghost oscillating in a corridor. It is also why cornering works as an escape.
03Grid first, pixels secondMovement resolves on tile centres and is interpolated for drawing. Doing it the other way round makes turns feel mushy and lets a character clip a corner it should not.
What it taught me

Behaviour is cheaper than content

Four ghosts with four target rules produce more variety than four hand-authored patrol routes would have, and they keep producing it after the player has learned them. The system generates the content.

That has come up in interface work more than once. A rule that describes how something should behave outlasts a screen that shows what it should look like, and it survives the case nobody drew.