Vibe coding is a genuinely new method of constructing software program, not a rebrand of an previous one, and it deserves an actual definition earlier than this tutorial makes use of it 100 extra instances. The time period was coined by Andrej Karpathy in early 2025 to explain a workflow the place you describe what you need in pure language and let an AI agent deal with code technology, execution, and iteration moderately than typing each line your self. It caught on quick sufficient that Collins English Dictionary named it their Phrase of the Yr for 2025, and by 2026 it is not a novelty; it is an ordinary method actual software program will get constructed.
This text is a real, start-to-finish vibe coding challenge: constructing the basic arcade sport Breakout, utilizing an AI coding assistant to generate each piece, with each immediate proven, each ensuing code block defined in actual element, and the entire, examined sport assembled on the finish. This is not a toy instance. Each line of code on this article was really written and verified earlier than publication; the collision physics, the win and loss situations, all of it, ran via actual automated exams moderately than being assumed to work.
What Is Vibe Coding?
The mechanical description is easy: you describe a aim, an AI agent generates code towards it, you evaluation and iterate, and also you repeat till it does what you want. What’s modified because the time period appeared is the sophistication of the brokers doing the producing; present instruments do not simply autocomplete a line, they’ll learn a complete challenge, edit a number of information, run the code, and repair what breaks, all from a natural-language instruction. Airbnb, for instance, reviews that AI now writes round 60% of its new code.
The present software panorama is value figuring out earlier than choosing one:
- Claude Code is a terminal-native agent properly suited to precisely this sort of challenge: describe a function, and watch it write and check the code straight in your challenge folder
- Cursor is an AI-native code editor for individuals who need that very same energy inside a well-recognized IDE
- Replit Agent is constructed with rookies particularly in thoughts, and it walks via a visual plan earlier than writing code, which is genuinely helpful for understanding the “why” behind every step, not simply the “what”
- Bolt.new and v0 are quicker paths to a working prototype for individuals who do not wish to contact a terminal in any respect
The Sport We’re Constructing: Breakout
Breakout is likely one of the most influential arcade video games ever made, and its backstory issues as a result of it explains why the sport is structured the best way it’s. Atari launched Breakout on Could 13, 1976, conceptualized by Nolan Bushnell and Steve Bristow as a single-player evolution of Pong, and constructed by a younger engineer named Steve Wozniak, working alongside his buddy Steve Jobs. Wozniak’s design was so aggressively minimized in its chip depend that Atari’s personal manufacturing line reportedly could not replicate it and needed to ship a model with extra elements as a substitute. The 2 Steves would go on to discovered Apple collectively that very same yr, and Breakout’s {hardware} logic straight influenced elements of the unique Apple II’s design.
The foundations are easy sufficient, which is precisely why it is a good vibe coding challenge: complicated sufficient to wish actual logic, easy sufficient to totally perceive finish to finish. A wall of bricks strains the highest of the display screen. A ball bounces across the play space, and also you management a paddle on the backside, shifting it left and proper to maintain the ball in play. Each time the ball hits a brick, the brick is destroyed and also you rating factors. If the ball will get previous your paddle and falls off the underside of the display screen, you lose a life. Destroy each brick, and also you win; run out of lives, and the sport ends.
Stipulations
You want lower than you’d suppose: a contemporary internet browser (Chrome, Firefox, or Safari all work wonderful), a textual content editor, and one AI coding assistant. This tutorial has zero construct instruments, zero frameworks, and nil dependencies to put in; the complete sport is one HTML file that runs by opening it in a browser.
Organising Claude Code: set up it with npm set up -g @anthropic-ai/claude-code, then run claude from inside an empty challenge folder to begin a session. In the event you’d moderately use Cursor, Replit, or one other software from the checklist above, each immediate beneath works identically; simply paste it into whichever assistant you have chosen.
This is the precise construct, damaged into the identical phases you’d naturally immediate an AI assistant via, one actual functionality at a time moderately than asking for the entire sport in a single shot, which tends to provide one thing more durable to debug when it would not fairly work. You could find the complete code on this repo.
Step 1: The Canvas and Sport Skeleton
Immediate: “Create a single HTML file for a Breakout sport. Arrange an HTML5 canvas 480 pixels extensive and 400 pixels tall, centered on the web page, with a darkish background. Add a heading, and placeholder textual content parts for rating and lives above the canvas. Do not add any sport logic but, simply the skeleton.”
Rating: 0
Lives: 3
What this does: the canvas component is the place each visible body of the sport will get drawn; it is a clean rectangle you management on the pixel stage via JavaScript. Beginning with simply the skeleton, no logic, is deliberate: it permits you to verify the web page construction really renders accurately earlier than including something that might break. That issues extra with AI-generated code than hand-written code, because it’s simpler to identify precisely the place one thing went improper if you’re solely checking one small piece at a time.
Step 2: The Paddle
Immediate: “Add a paddle: an 80×10 pixel rectangle close to the underside of the canvas. Make it transfer left and proper with the arrow keys, and hold it from shifting off both fringe of the canvas.”
const paddle = { width: 80, top: 10, x: (canvas.width - 80) / 2, y: canvas.top - 20, pace: 7, dx: 0 };
const keys = { left: false, proper: false };
doc.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft") keys.left = true;
if (e.key === "ArrowRight") keys.proper = true;
});
doc.addEventListener("keyup", (e) => {
if (e.key === "ArrowLeft") keys.left = false;
if (e.key === "ArrowRight") keys.proper = false;
});
operate updatePaddle() {
if (keys.left) paddle.dx = -paddle.pace;
else if (keys.proper) paddle.dx = paddle.pace;
else paddle.dx = 0;
paddle.x += paddle.dx;
paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, paddle.x));
}What this does: keydown and keyup listeners monitor which arrow keys are presently held, moderately than reacting as soon as per press, which is what makes the paddle transfer easily whereas a secret’s held down as a substitute of leaping as soon as per keystroke. The final line of updatePaddle is the boundary examine; Math.max and Math.min collectively clamp the paddle’s place so it could by no means transfer previous both fringe of the canvas, a one-line repair for a bug that is simple to overlook totally till you watch the paddle vanish off-screen.
Step 3: The Ball and Its Physics
Immediate: “Add a ball: a small circle that begins close to the underside heart of the canvas and strikes diagonally. Make it bounce off the left, proper, and prime partitions.”
const ball = { x: canvas.width / 2, y: canvas.top - 30, radius: 6, pace: 4, dx: 3, dy: -3 };
operate updateBall() ball.x - ball.radius < 0) ball.dx *= -1;
if (ball.y - ball.radius < 0) ball.dy *= -1;
What this does: dx and dy are the ball’s velocity, how far it strikes on every axis each body, and updating place by merely including them every body is the complete foundation of the sport’s movement. The wall-bounce logic reverses path (multiplying by -1) the second the ball’s edge, not its heart, crosses a boundary; utilizing radius within the examine is what stops the ball from visually clipping midway into the wall earlier than bouncing.
Step 4: The Brick Grid
Immediate: “Add a grid of bricks: 4 rows of seven bricks every, close to the highest of the canvas, with small gaps between them. Every brick ought to monitor whether or not it has been destroyed.”
const brickInfo = { rows: 4, cols: 7, width: 55, top: 18, padding: 8, offsetTop: 40, offsetLeft: 20 };
let bricks = [];
operate buildBricks() {
bricks = [];
for (let r = 0; r < brickInfo.rows; r++) {
for (let c = 0; c < brickInfo.cols; c++) {
bricks.push({
x: brickInfo.offsetLeft + c * (brickInfo.width + brickInfo.padding),
y: brickInfo.offsetTop + r * (brickInfo.top + brickInfo.padding),
width: brickInfo.width, top: brickInfo.top, destroyed: false,
});
}
}
}What this does: the nested loop locations every brick utilizing its row and column place multiplied by the brick’s width or top plus padding, which is what produces an evenly spaced grid moderately than requiring 28 individually hand-placed rectangles. The destroyed: false flag on each brick is doing quiet, vital work; it is the one piece of state that Step 5’s collision logic and the win situation each rely upon.
Step 5: Collision Detection
That is the step value taking severely, because it’s the place a rushed vibe coding go most frequently produces a sport that appears proper however performs improper.
Immediate: “Add collision detection: the ball ought to bounce off the paddle at an angle relying on the place it hits (heart bounces straight up, edges bounce at an angle), and destroy any brick it touches whereas bouncing away. A destroyed brick ought to by no means be hit once more.”
operate ballHitsPaddle(ball, paddle) {
return (
ball.y + ball.radius >= paddle.y &&
ball.y - ball.radius <= paddle.y + paddle.top &&
ball.x >= paddle.x && ball.x <= paddle.x + paddle.width
);
}
operate paddleBounceAngle(ball, paddle) {
const hitPos = (ball.x - (paddle.x + paddle.width / 2)) / (paddle.width / 2);
const clamped = Math.max(-1, Math.min(1, hitPos));
return clamped * (Math.PI / 3); // as much as 60 levels on the paddle's edges
}
operate brickCollision(ball, brick) {
if (brick.destroyed) return false;
return (
ball.x + ball.radius > brick.x && ball.x - ball.radius < brick.x + brick.width &&
ball.y + ball.radius > brick.y && ball.y - ball.radius < brick.y + brick.top
);
}What this does: paddleBounceAngle is what makes the paddle really feel controllable moderately than a flat wall. It measures how removed from the paddle’s heart the ball landed, normalizes that to a variety from -1 to 1, and converts it into an angle, so a middle hit bounces the ball practically straight up, whereas an edge hit sends it off at a pointy angle you possibly can goal with. The very first line of brickCollision, if (brick.destroyed) return false, is the one most vital line in the entire file; with out it, a destroyed brick’s rectangle would nonetheless register collisions perpetually, a basic bug that makes the ball behave as if invisible partitions are nonetheless standing the place bricks was.
Step 6: Scoring and Lives
Immediate: “Wire the collision logic into the principle replace loop: improve the rating by 10 for every brick destroyed, and lose a life when the ball falls previous the paddle. Reset the ball’s place after shedding a life, except lives attain zero.”
for (const brick of bricks) {
if (brickCollision(ball, brick)) {
brick.destroyed = true;
ball.dy *= -1;
rating += 10;
scoreEl.textContent = `Rating: ${rating}`;
break; // resolve just one brick per body
}
}
if (ball.y - ball.radius > canvas.top) {
lives -= 1;
livesEl.textContent = `Lives: ${lives}`;
if (lives <= 0) {
gameOver = true;
} else {
resetBallAndPaddle();
}
}What this does: the break assertion after a brick is destroyed is a small however deliberate selection; with out it, if the ball occurred to overlap two adjoining bricks in the identical body, each can be destroyed, and each would flip the ball’s path, which might cancel out right into a bounce that appears visually improper. Resolving one collision per body retains the physics predictable. The life-loss department checks whether or not lives has really hit zero earlier than deciding whether or not to reset the ball or finish the sport, which is the precise logic that separates “you get one other strive” from “the sport is genuinely over.”
Step 7: Win and Loss States
Immediate: “Add a win situation when each brick is destroyed, and cease the sport loop totally as soon as the sport is received or misplaced, displaying a message both method.”
if (bricks.each((b) => b.destroyed)) {
gameWon = true;
messageEl.textContent = "You Win! Refresh to play once more.";
}
operate loop() {
if (!gameOver && !gameWon) {
updatePaddle();
updateBall();
}
draw();
requestAnimationFrame(loop);
}What this does: Array.each() checks that each single brick’s destroyed flag is true, a clear, readable option to categorical “all of them” with no handbook counter to maintain in sync. The loop operate nonetheless retains rendering after the sport ends, calling draw() unconditionally, however stops calling the replace features, which is why the ultimate body stays frozen on display screen as a substitute of the entire web page changing into unresponsive.
Each piece above is mixed into the entire working file on this repo.
Delivery the App
As soon as it performs the best way you need, getting it on-line prices nothing and takes a couple of minutes. GitHub Pages is the only path for a static file like this one: push the HTML file to a GitHub repository, allow Pages within the repository settings, and it is stay at a public URL with no server to handle.
Netlify affords largely the identical free static-hosting take care of drag-and-drop deployment should you’d moderately skip Git totally. For a challenge particularly framed as a sport moderately than a normal internet app, itch.io is value contemplating too; it is constructed particularly for indie sport distribution, with a built-in viewers that is really on the lookout for precisely this sort of challenge, moderately than a normal internet hosting viewers that needs to be advised what it is taking a look at.
Wrapping Up
Vibe coding did not take away the work of understanding what obtained constructed; it moved that work to a special place. You did not sort out the collision math character by character, however you continue to needed to know {that a} destroyed brick wants a guard clause, {that a} paddle wants boundary clamping, and that “it performs wonderful once I click on round” is not the identical declare as “the win and loss states are each verified right.”
That is the talent this tutorial was actually educating beneath the Breakout construct: not immediate an AI assistant — that half is genuinely simple — however learn, query, and confirm what it fingers again, which is the half that decides whether or not a vibe-coded challenge is an actual, working sport or only one that appears prefer it till somebody finds the bug you did not examine for.
Shittu Olumide is a software program engineer and technical author captivated with leveraging cutting-edge applied sciences to craft compelling narratives, with a eager eye for element and a knack for simplifying complicated ideas. It’s also possible to discover Shittu on Twitter.
