Vibe Coding a Classic Game: Building Breakout Step by Step with an AI Assistant

Vibe coding is a genuinely new way of building software, not a rebrand of an old one, and it deserves a real definition before this tutorial uses it a hundred more times. The term was coined by Andrej Karpathy in early 2025 to describe a workflow where you describe what you want in natural language and let an AI agent handle code generation, execution, and iteration rather than typing every line yourself. It caught on fast enough that Collins English Dictionary named it their Word of the Year for 2025, and by 2026 it's not a novelty; it's a standard way real software gets built.

This article is a genuine, start-to-finish vibe coding project: building the classic arcade game Breakout, using an AI coding assistant to generate every piece, with every prompt shown, every resulting code block explained in real detail, and the complete, tested game assembled at the end. This isn't a toy example. Every line of code in this article was actually written and verified before publication; the collision physics, the win and loss conditions, all of it, ran through real automated tests rather than being assumed to work.

What Is Vibe Coding?

The mechanical description is simple: you describe a goal, an AI agent generates code toward it, you review and iterate, and you repeat until it does what you need. What's changed since the term appeared is the sophistication of the agents doing the generating; current tools don't just autocomplete a line, they can read an entire project, edit multiple files, run the code, and fix what breaks, all from a natural-language instruction. Airbnb, for example, reports that AI now writes around 60% of its new code.

The current tool landscape is worth knowing before picking one:

The Game We're Building: Breakout

Prerequisites

Step 1: The Canvas and Game Skeleton

<canvas id="gameCanvas" width="480" height="400"></canvas>
<div id="hud">
  <span id="score">Score: 0</span>
  <span id="lives">Lives: 3</span>
</div>