Browser Game

Breakout Challenge

Six AI coding agents built the same browser game. Only two handled collision, restart, and mobile input correctly.

GameCanvasCollisionMobile input20 min limit

Final six-up Breakout Challenge comparison

Final comparison

Result matrix

One task, six final outcomes

The table shows visible results first. Detailed logs and clips can be attached once real runs are recorded.

Agent	Model	Status	Score	Time	Cost	Failure
Claude Code	Claude Sonnet	Playable	A88	18m	$x	Mobile touch input needed polish.
Codex	GPT	Playable	A-84	20m	$x	Visual polish was rough compared with the best run.
OpenHands	Claude	Partial	B-72	20m	$x	Restart did not fully reset bricks and lives.
Cline	Gemini	Partial	C58	20m	$x	Collision was unreliable and the ball sometimes passed through bricks.
Gemini CLI	Gemini	Partial	C54	20m	$x	State reset bug after game over made the second round invalid.
Aider	Qwen	Broken	D31	20m	$x	Canvas remained blank after the first render.

Claude Code

Claude Sonnet

Status: Playable
Score: 88
Time: 18m
Failure: Mobile touch input needed polish.

Codex

GPT

A-

Status: Playable
Score: 84
Time: 20m
Failure: Visual polish was rough compared with the best run.

OpenHands

Claude

B-

Status: Partial
Score: 72
Time: 20m
Failure: Restart did not fully reset bricks and lives.

Cline

Gemini

Status: Partial
Score: 58
Time: 20m
Failure: Collision was unreliable and the ball sometimes passed through bricks.

Gemini CLI

Gemini

Status: Partial
Score: 54
Time: 20m
Failure: State reset bug after game over made the second round invalid.

Aider

Qwen

Status: Broken
Score: 31
Time: 20m
Failure: Canvas remained blank after the first render.

What this tests

The hidden engineering inside a simple game

Game loop

Maintains stable animation and frame updates without runaway state.

Collision detection

Handles ball, paddle, brick, and wall interactions correctly.

Input handling

Supports desktop keyboard and mobile pointer or touch interaction.

Restart state

Resets score, lives, ball, paddle, and brick state cleanly.

Canvas rendering

Produces a non-blank, stable visual scene.

Agent debugging

Uses browser feedback, console output, and iteration to fix visible failures.

Unified prompt

Build a playable Breakout-style browser game. It must include a ball, paddle, brick grid, score, lives, start, pause, game over, and restart. Support keyboard controls on desktop and pointer or touch controls on mobile. The game should render visibly in the browser, avoid console errors, and reset all gameplay state correctly after restart.

Acceptance criteria

The app starts without fatal runtime errors.
The game renders a visible ball, paddle, and brick grid.
The paddle can be controlled with keyboard input.
The paddle can be controlled with pointer or touch input on mobile.
The ball collides with walls, the paddle, and bricks.
Score, lives, pause, game over, and restart states work.
Restart clears stale state and starts a fresh playable round.
The final page does not produce console errors during normal play.

Scoring

Readable rubric for video and reproduction

Runs without fatal errors

The app starts, renders, and can be interacted with.

Core functionality

Ball, paddle, bricks, score, lives, pause, game over, and restart work.

Visual completion

The game looks coherent and communicates state clearly.

Interaction quality

Controls feel usable on desktop and mobile.

Code sanity

The implementation is understandable and avoids obvious brittle shortcuts.

Run details

What each agent got right and wrong

Claude Code

Claude Sonnet

Status: Playable
Strength: Built the most complete core loop and recovered from an early collision bug.
Failure: Mobile touch input needed polish.

Codex

GPT

A-

Status: Playable
Strength: Strong debugging loop and clean restart handling.
Failure: Visual polish was rough compared with the best run.

OpenHands

Claude

B-

Status: Partial
Strength: Got the screen, score, and basic controls working.
Failure: Restart did not fully reset bricks and lives.

Cline

Gemini

Status: Partial
Strength: Produced a recognizable game layout.
Failure: Collision was unreliable and the ball sometimes passed through bricks.

Gemini CLI

Gemini

Status: Partial
Strength: Implemented controls and a simple score display.
Failure: State reset bug after game over made the second round invalid.

Aider

Qwen

Status: Broken
Strength: Created some UI scaffolding and labels.
Failure: Canvas remained blank after the first render.

Postmortem

Why Breakout Is a Better AI Coding Test Than It Looks

The task looks simple

Breakout is familiar and small enough to explain in seconds. That makes it useful for video, but it also hides a dense set of frontend engineering requirements.

The hard part is state

Most weak runs did not fail because they forgot to draw a paddle. They failed because collision, lives, pause, game over, and restart all touch the same animation state.

Visual evidence matters

A run can look plausible in code while rendering a blank canvas or a game that cannot survive a restart. The case forces every result to be judged in the browser.

Case package

starter/
tests/
prompt.md
scoring.md
runs.json
screenshots/
logs/

Manifest Prompt Scoring Runs JSON

Commands

npm install
npm run dev
npm test

V1 uses this case as a public prototype. A downloadable package can be attached once the first real run logs and screenshots are captured.

Breakout Challenge

One task, six final outcomes

Claude Code

Codex

OpenHands

Cline

Gemini CLI

Aider

The hidden engineering inside a simple game

Game loop

Collision detection

Input handling

Restart state

Canvas rendering

Agent debugging

Readable rubric for video and reproduction

Runs without fatal errors

Core functionality

Visual completion

Interaction quality

Code sanity

What each agent got right and wrong

Claude Code

Codex

OpenHands

Cline

Gemini CLI

Aider

Why Breakout Is a Better AI Coding Test Than It Looks

The task looks simple

The hard part is state

Visual evidence matters

Ready for the next visual task?