Build Pac-Man with Phaser: Ghost AI, Tile Mazes, and the Game That Ate the Browser

game-buildphaserpac-manarcadetutorialretro-gamingai-game-devbuild-log

Remember when the entire office stopped working to chase a pixelated yellow circle through a maze? When Google’s 2010 Pac-Man Doodle turned the search engine into an arcade cabinet, it proved something profound: browser games weren’t just for kids anymore. That same year, Phaser launched, and suddenly the browser became the most exciting game platform on Earth.

Pac-Man wasn’t just a game—it was the perfect storm of simple mechanics, addictive gameplay, and surprisingly sophisticated AI. And today, we’re going to build it from scratch with Phaser 3. Welcome to the game that ate the browser.

Why Pac-Man for the 2010s Slot

The 2010s gave us browser games that could do anything. But Pac-Man? Pac-Man is the perfect starting point because it packs a complete game design curriculum into a single screen:

  • Tile-based movement for grid-perfect controls
  • Procedural maze generation via string arrays
  • Four distinct AI personalities that create emergent behavior
  • State machines for scatter, chase, and frightened modes
  • Tight difficulty curves through level progression

And here’s the kicker: you can build all of it in under 500 lines of code with Phaser.

A Brief History of the Yellow Circle

Toru Iwatani designed Pac-Man in 1980 to appeal to a wider audience than the space shooters that dominated arcades. His inspiration? A pizza with a slice missing. The game’s original name was “Puck-Man,” but Namco changed it for Western markets to prevent vandalism of the “P” (you can guess why).

The game became a cultural phenomenon, spawning the Pac-Man Championship Edition series and cementing itself as the highest-grossing arcade game of all time. But what really made it special wasn’t the dots—it was the ghosts.

The Ghost AI: Four Personalities, One Brain

Here’s what most people don’t realize about Pac-Man’s ghosts: they’re not random. The Ghost AI follows a deterministic targeting system that creates the illusion of intelligence. Each ghost has a specific targeting tile and a distinct personality.

Blinky (Red) - The Chaser

Blinky targets Pac-Man’s current tile directly. He’s the “shadow” that relentlessly pursues you. When you eat enough dots, Blinky goes into “Cruise Elroy” mode, speeding up to become nearly unstoppable.

Pinky (Pink) - The Ambusher

Pinky targets the tile four tiles ahead of Pac-Man’s current direction. This means Pinky doesn’t chase you—she predicts where you’re going and cuts you off. It’s why running down a corridor with Pinky behind you is a death sentence.

Inky (Cyan) - The Flanker

Inky’s targeting is more complex: he takes the vector from Blinky to Pac-Man, doubles it, and targets that point. This creates a pincer movement where Blinky pushes you into Inky’s trap.

Clyde (Orange) - The Fool

Clyde targets Pac-Man’s tile, but only when he’s more than eight tiles away. When he gets closer, he retreats to his corner of the maze. He’s the “gentleman” ghost who gives you breathing room—until you forget he exists and he corners you.

The Scatter/Chase Cycle

Every few seconds, the ghosts switch between two modes:

  • Scatter: Each ghost targets a corner of the maze, giving you a window to clear dots
  • Chase: The ghosts use their targeting logic to hunt you

The cycle starts with 7 seconds of scatter, then 20 seconds of chase, repeating with shorter scatter periods. The Pac-Man Dossier by Jamey Pittman is the definitive breakdown of these mechanics.

The AI Prompt That Built the Core

Here’s the prompt I used to generate the core game logic with an AI assistant:

Build a Pac-Man game with Phaser 3 that includes:
1. A 28x31 tile maze as a string array where # = wall, . = dot, o = energizer
2. Pac-Man with smooth tile-to-tile movement and chomp animation
3. Four ghosts (Blinky, Pinky, Inky, Clyde) with distinct targeting AI:
   - Blinky: targets player position
   - Pinky: targets 4 tiles ahead of player
   - Inky: uses Blinky's position + vector from Blinky to player, doubled
   - Clyde: targets player if >8 tiles away, else corner
4. Scatter/chase mode cycling (7s scatter, 20s chase initially)
5. Frightened mode when player eats energizer (ghosts turn blue, reverse direction)
6. Score display, 3 lives, game over state
7. Arrow keys + WASD + touch controls
8. Scale.FIT with CENTER_BOTH for responsive design
9. Procedural Graphics for all textures (no image assets)

The AI generated the maze layout, ghost logic, and movement system in one pass. The result? A fully playable Pac-Man in about 400 lines of code.

Code Walkthrough

The Maze: A String Array Masterpiece

The maze is defined as an array of strings, where each character represents a tile type:

const maze = [
  "############################",
  "#............##............#",
  "#.####.#####.##.#####.####.#",
  "#o####.#####.##.#####.####o#",
  "#.####.#####.##.#####.####.#",
  "#..........................#",
  "#.####.##.########.##.####.#",
  "#.####.##.########.##.####.#",
  "#......##....##....##......#",
  "######.##### ## #####.######",
  "     #.##### ## #####.#     ",
  "     #.##          ##.#     ",
  "     #.## ###--### ##.#     ",
  "######.## #      # ##.######",
  "      .   #      #   .      ",
  "######.## #      # ##.######",
  "     #.## ######## ##.#     ",
  "     #.##          ##.#     ",
  "     #.## ######## ##.#     ",
  "######.## ######## ##.######",
  "#............##............#",
  "#.####.#####.##.#####.####.#",
  "#.####.#####.##.#####.####.#",
  "#o..##.......  .......##..o#",
  "###.##.##.########.##.##.###",
  "###.##.##.########.##.##.###",
  "#......##....##....##......#",
  "#.##########.##.##########.#",
  "#.##########.##.##########.#",
  "#..........................#",
  "############################"
];

Each # is a wall, . is a dot, o is an energizer, and spaces are empty corridors. This string-based approach makes maze design trivial—you can literally draw the level in a text editor.

Tile Movement: Grid-Perfect Controls

The key to Pac-Man’s feel is tile-based movement. Instead of free 2D movement, we snap Pac-Man to a grid:

this.player.x = Math.round(this.player.x / 8) * 8;
this.player.y = Math.round(this.player.y / 8) * 8;

This gives the game its signature “grid” feel. The player can only change direction when aligned to a tile center, which is why the game feels so precise.

Ghost Pathfinding: The Heart of the AI

Each ghost has a targetTile property that updates based on its AI logic. At every tile intersection, the ghost chooses the direction that brings it closest to its target:

chooseDirection() {
    const possible = [];
    // Check all 4 directions
    for (const dir of ['up', 'down', 'left', 'right']) {
        if (this.canMove(dir)) possible.push(dir);
    }
    // Find the direction closest to target
    let best = possible[0];
    let bestDist = this.distanceToTarget(best);
    for (const dir of possible.slice(1)) {
        const dist = this.distanceToTarget(dir);
        if (dist < bestDist) {
            best = dir;
            bestDist = dist;
        }
    }
    this.direction = best;
}

This is a greedy algorithm—it always picks the locally optimal direction. But combined with the scatter/chase cycle and the personality-based targeting, it creates surprisingly complex behavior.

The Scatter/Chase Timer

this.scatterTimer = this.time.addEvent({
    delay: 7000,
    loop: true,
    callback: () => {
        this.scatter = !this.scatter;
        this.ghosts.forEach(g => g.reverse());
        // Alternate between 7s scatter and 20s chase
        this.scatterTimer.delay = this.scatter ? 7000 : 20000;
    }
});

When the timer fires, ghosts reverse direction and switch modes. This creates the classic “breathing room” pattern that makes Pac-Man feel fair.

What I Learned Building This

  1. AI doesn’t mean complex: The ghosts’ “intelligence” is just four simple rules applied consistently. The emergent complexity comes from their interaction with the maze and each other.

  2. Tile-based movement is underrated: Modern games use physics engines, but grid-based movement gives you precise control and perfect collision detection for free.

  3. Frightened mode is a state machine: The ghosts have three states (scatter, chase, frightened), and managing transitions between them is the core of the game’s flow.

  4. Procedural textures save time: Phaser’s Graphics API can draw shapes, so we don’t need a single image asset. The entire game is code-generated.

  5. AI-assisted development shines here: The prompt above generated 80% of the game logic. My job was understanding, tweaking, and polishing—not writing boilerplate.

Play It Yourself

The game embedded at the top of this post is fully playable. Try to beat my high score of 15,230. Use arrow keys or WASD to move, and watch for the ghost patterns—they’re predictable once you understand the AI.

Next Up: The Plumber’s Turn

Now that we’ve mastered tile-based movement and enemy AI, it’s time for the king of platformers. In our next post, we’ll build Super Mario Bros. with Phaser, complete with:

  • Side-scrolling camera
  • Physics-based jumping with variable heights
  • Enemy stomping mechanics
  • Power-up states (small, big, fire flower)
  • Procedural level generation

Mario’s tight platforming controls are the polar opposite of Pac-Man’s grid-based precision, and they’ll teach us a whole new set of game dev skills. See you there!

Have you built a Pac-Man clone? What’s your favorite ghost to outsmart? Share your thoughts in the comments below.

References

[1] Google’s 2010 Pac-Man Doodle [2] Phaser [3] Toru Iwatani