Pixel Agents: An Idle Game That Isn’t a Game

You know those pixel art VS Code extensions where little characters walk around while you code? I wanted that for Claude Relay — but instead of decorating my editor, it visualizes what the AI agents are actually doing.

When a Claude joins the relay session, a pixel character spawns at the office door and walks to a desk. When it starts coding, the monitor lights up. When someone files a task, a knight appears. When the agent finishes work, the knight dies in a burst of golden sparkles.

It’s not a game. There are no controls. But it has a tension engine, casino mechanics, and a 93-line design doc written by a game designer agent. So maybe it’s a game.

The Stack

Canvas 2D. Vanilla JS. No React, no framework, no bundler. Seven files loaded as <script> tags:

File	Lines	What
pixel-agents.js	2,163	Core engine — sprites, pathfinding, state machines
pixel-scenes.js	982	8 scene configurations with tilemaps
pixel-creatures.js	790	Knight variants, special creatures, gato personalities
pixel-progression.js	830	Sunflower growth, fountain velocity, tension engine
pixel-collab.js	668	Focus beams, celebration cascades, relay data lines
pixel-integration.js	460	Bridge between relay events and pixel world
Total	6,863

163 sprite assets from the Pixel Plains pack by SnowHex. All 24x24 character sprites on 216x120 sheets (9 cols x 5 rows). 16x16 tiles scaled 3x for crisp pixel art at any resolution.

How It Works

The game loop runs at 10 FPS (pixel art looks jittery at higher rates). Each frame:

Draw the tilemap (20x14 grid, 6 extended tile types for water, caves, snow)
Update agent state machines (idle -> walking -> typing -> reading -> thinking)
BFS pathfind agents to desks, watercoolers, plants
Update obstacle knights (health bars, passive damage from agent work)
Update gatos (wander, nap, flee from knights)
Draw focus beams from agents to their targeted knights
Draw celebration cascade particles
Draw relay data lines between communicating agents
Apply tension-driven vignette and light overlay
Draw day/night cycle tint + seasonal particles

Agents autonomously cycle through behaviors. They walk to their desk, type for a while, switch to reading, take a thinking pause, then wander to the watercooler or visit a coworker. When they’re near another agent, chat bubbles appear.

The Creature Taxonomy

Not all tasks are equal. The keyword classifier picks knight types:

Green Knight — normal task. Lurks near the assigned desk.
Blue Knight — code review. Patrols between reviewer and author desks.
Red Knight — critical bug. 1.5x size, scares cats from 6 tiles away.
Purple Knight — tech debt. Spawns mini-knights every 60 seconds until killed.

Five special creatures appear based on game state:

Red Demon (scope creep) — spawns when 6+ tasks are active simultaneously
Ice Elemental (blocker) — hovers near agents stuck in waiting state
Blue Cat (CI/CD) — sprints between agents delivering status updates
Pink Panda (pair programming) — appears when 2 agents work adjacent for 60s
Bunny (easter egg) — random 2-5 min appearances with variable reward tiers (60/25/10/5%)

The Tension Engine

Every frame, a tension score (0.0 to 1.0) updates based on game state:

+0.1 per knight per minute
+0.3 per demon per minute
-0.3 per knight killed
-0.5 per demon defeated
-0.1 per visible cat

Five tension levels drive the entire atmosphere:

Calm (0.0-0.2) — warm light, max cats, sparkle particles, full fountain
Normal (0.2-0.5) — standard
Tense (0.5-0.7) — darker, cats flee, faster knight spawns
Crisis (0.7-0.9) — rain, wilting plants, fountain sputtering
Siege (0.9-1.0) — vignette darkness, rain only, no sparkles

The casino mechanics layer on top: knights that reinforce at 20% HP (15% chance), health bars that pulse at critical, knights that try to flee when almost dead, celebration particles that cascade toward nearby damaged knights.

8 Scenes

Each scene has its own tilemap, furniture layout, ambient particles, and draw hooks:

The Workshop — default office with desks and monitors
The Library — bookshelves fill as knowledge accumulates
The Garden — sunflowers grow per task, fountain tracks velocity
The Waterfront — water tiles, crates ship from staging to prod
The Cave — dark with torch lights, bigger knights, crystal pillars
The Winter Lodge — snow tiles, fireplace, cozy
The Harvest Field — pumpkins per completed task, autumn leaves
The Cliff Overlook — waterfall, clouds, zen (AFK screensaver)

Scene transitions use a fade-to-black with agent re-pathing to new desk positions.

The Plugin Architecture

This was the interesting engineering decision. The relay dashboard is a real tool — Director mode for human oversight, Peer mode for Claude-to-Claude collaboration. The pixel visualization is fun but can’t be a dependency.

Solution: plugins/pixel-agents/ directory with lazy loading.

packages/relay-server/public/
  app.js          ← 3 custom event dispatches + 50-line plugin loader
  index.html      ← one Office toggle button, nothing else
  plugins/
    pixel-agents/ ← entire visualization, self-contained
      assets/     ← 163 PNGs
      *.js        ← 7 module files
      *.css       ← extracted pixel styles
      *.html      ← HTML fragment injected on load

Click “Office” -> plugin loader fetches the HTML fragment, injects CSS, loads 6 scripts in order. If the directory doesn’t exist (Docker image, someone deleted it), the button auto-hides via a try/catch on the 404.

The bridge uses DOM custom events instead of monkey-patching:

// app.js fires these (3 lines total)
document.dispatchEvent(new CustomEvent('relay:message', { detail: { msg } }));

// pixel-integration.js subscribes
document.addEventListener('relay:message', (e) => {
  // spawn knights, resolve tasks, send relay lines
});

Zero coupling. Delete the folder, zero residue.

The Agent Swarm That Built It

This wasn’t written by one person or one AI session. The build used 15+ specialized agents:

4 module builder agents (one per JS file, parallel worktrees)
4 QA audit agents (scored 8-9/10 each)
2 game tester agents (module loading + cross-reference)
1 architecture planning agent (designed the plugin system)
3 integration agents (wired modules into the core engine)
1 restructuring agent (moved files to plugin directory)

The modules were built in parallel, each in an isolated git worktree. The QA agents found that checkSpecialSpawns(null) would crash (missing null guard), the bunny had no despawn condition, and the celebration cascade’s speed property didn’t affect actual movement rate.

6,863 lines of game engine in one session. Not because it’s impressive to write that much code — but because the architecture let independent agents work on independent systems simultaneously.

Asset Credit

All sprites from Pixel Plains by SnowHex (snowhex.itch.io/pixel-plains) — MIT-like license, commercial OK with credit. $6 well spent.