*A classic Breakout arcade game with 5 levels, power-ups, combo scoring, and particle effects, built with TypeScript and HTML5 Canvas.* Day 5. Another arcade classic. This time I wanted to see what happens when I ask for Breakout.

The Prompt

> "I want to create a Breakout/Arkanoid style arcade game with multiple levels, power-ups, combo scoring, and smooth physics"

A bit more specific than some of my earlier prompts. By day 5 I was learning that being slightly more intentional with the features you want upfront saves you from filing bug reports later.

How It Was Built

I used Watchfire again for this one. You can tell from the package.json, which gets auto-named with a watchfire-0000 prefix. I gave it the prompt and it handled the rest. The entire game lives in a single React component wrapping an HTML5 Canvas, which is a pattern I've seen a few times now in these daily builds. Not the cleanest architecture, but it works and it ships.

The tech stack is Next.js with TypeScript and Tailwind CSS. The game rendering is all Canvas-based with React handling the overlay UI for menus and pause screens.

What I Got

A fully playable Breakout clone with way more polish than I expected.

Five levels with unique patterns. "The Beginning" is a standard full grid. "Diamond Formation" arranges bricks in a diamond shape. "Fortress" builds walls with gaps. "Waves" alternates rows. "Final Challenge" is a dense layered pattern. Each level bumps the ball speed multiplier, going from 1.0x up to 1.5x.

Power-ups actually matter. Four types drop from broken bricks: wide paddle (10 seconds), slow ball (8 seconds), multi-ball (splits into multiple balls until you lose them), and extra life (instant). Special "super" bricks have double the drop chance. The power-ups float down as glowing orbs and you catch them with your paddle.

The combo system adds depth. Chain hits build a score multiplier up to 3x. The combo decays after 2 seconds of no hits, so you're incentivized to keep the ball moving fast and hitting bricks in quick succession. It's a small thing but it makes you play differently.

Visual effects everywhere. Particle explosions when bricks break. A ball trail effect. Screen shake on certain hits. Flash effects. A twinkling starfield background. Bricks have a neon gradient color scheme with hot pink, orange, yellow, green, and cyan rows. None of this was strictly necessary for a Breakout game, but it makes the whole thing feel alive.

Read the full article →