Projects › Games › Breakout
Make your own Breakout game with AI
Play it first: glowing bricks, sparks, power-ups and all. It was made by asking an AI assistant in plain English, and the guide below shows you how to make yours.
Break bricks without touching the paddle for combo points. Your best score stays in this browser.
Your own brick breaker, in under an hour
You won't write any code yourself. You'll tell the AI what you want, copy what it gives you into a file, and double-click it. Your colours, your power-ups, your levels.
- A Breakout game that opens in any web browser (Chrome, Edge, Safari, Firefox)
- Lives, levels with different brick patterns, and a saved high score
- A neon look: glowing bricks, a ball with a light trail, sparks and screen shake when bricks break
- Power-ups that fall from broken bricks: a wider paddle, extra balls, slow motion
- Mouse, keyboard and touch controls, so it plays on a phone too
- Retro sound effects made by code, with a mute button
Good for: anyone who's made the Snake game and wants something flashier, families after a weekend project with a "wow" at the end, and teachers showing how games handle movement and collisions.
What you need
Build it in seven steps
Ask for the basic game
Copy this prompt and paste it into your AI assistant:
Copy this promptI don't know how to code. Please make me a Breakout game (the classic brick breaker) that runs in a web browser. Requirements: - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it to play. - No external libraries, no internet connection needed, no installs. - Use an HTML canvas. A paddle at the bottom that I move with the mouse or the left and right arrow keys. - A ball that bounces off the walls, the paddle and the bricks. Each brick disappears when the ball hits it. - Five rows of coloured bricks at the top. Show the score on screen. - The ball sits on the paddle until I press Space or click, then it launches. - If the ball falls past the paddle, it's game over, with a "Press Space to play again" message. Please give me the complete file in one code block, then tell me in simple steps how to save and open it.
The AI replies with a long block of code. You don't need to read it. Look for a Copy button at the top or bottom of the code block and click it.
Save it and play
- Open Notepad (Windows) or TextEdit in plain text mode (Mac).
- Paste the code.
- Save the file as breakout.html. In Notepad, set Save as type to All files so it doesn't become breakout.html.txt.
- Find the file and double-click it. It opens in your browser.
- Click or press Space to launch the ball.
Ball moving strangely? If it gets stuck going left and right forever, or slips through the paddle, tell the AI exactly that. It's a common first-version bug and it fixes it quickly.Add lives, levels and a high score
Copy this promptThat works, thank you. Now please: - Give me 3 lives. Show them on screen. Losing the ball costs a life and puts a new ball on the paddle. - When every brick is cleared, go to the next level with a different brick pattern (for example a pyramid, then a checkerboard, then a diamond). The ball gets a little faster each level. - Some bricks on later levels need two hits, and look faded after the first hit. - Save the best score in the browser (using localStorage) so it's still there after I close the file. Show "Score", "Best", "Lives" and "Level" at the top. - Add a pause on the P key. Please send me the whole updated file again, not just the changed parts.
Always ask for the whole file. Then you can replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).Make it glow
This is where it starts to look impressive. Change the colours to whatever you like.
Copy this promptPlease give the game a neon arcade look: - A dark purple background with a few slowly drifting stars and a faint glowing grid at the bottom, like an 80s synthwave poster - Bricks with rounded corners that glow in their own colour (pink, orange, yellow, green, cyan, purple by row), with a thin shine along the top edge - A white ball with a glowing light trail behind it - A paddle with a pink-to-yellow gradient and a soft glow - When a brick breaks: a burst of coloured sparks that fall with gravity, a small screen shake, and the points floating up and fading out - Points go up if I break several bricks without touching the paddle (a combo) Keep the game running smoothly. Send me the complete updated file.
Add power-ups
Copy this promptPlease add power-ups. When a brick breaks there's about a 1 in 7 chance a glowing capsule drops. If I catch it with the paddle I get the power: - W (green): the paddle gets wider for 12 seconds - M (cyan): every ball splits into three - S (purple): the ball slows down for 10 seconds - + (pink): an extra life Show the power's name floating above the paddle when I catch it. The level only ends when all the balls are lost, not the first one. Send me the complete updated file.
Add sounds
Copy this promptPlease add retro sound effects using the Web Audio API (generated by code, no sound files): a short blip when the ball hits a brick that rises in pitch with each combo, a lower blip for the paddle and walls, a cheerful rising tone for power-ups, a three-note tune when I clear a level, and a falling tone when I lose a life. Add a mute button and remember whether sound is muted. Send me the complete updated file.
Make it work on a phone or tablet
Copy this promptPlease make the game playable on a phone or tablet: dragging a finger anywhere on the game should move the paddle, and tapping should launch the ball. The game should scale to fit the screen without going blurry, and the page shouldn't scroll while I'm playing. Keep the mouse and keyboard controls working on computers. Send me the complete updated file.
To play it on your phone, email the file to yourself or put it on free hosting (see Putting your project online for free).
Quick fixes
The file opens as text instead of a game
It was saved as breakout.html.txt, or TextEdit saved it as rich text. Re-save as plain text with exactly .html at the end.
The page is blank
The AI's reply was probably cut off before the end. Scroll to the bottom of the code: it should finish with </html>. If it doesn't, ask: "Your code was cut off. Please send the complete file again."
The ball goes through bricks or the paddle
This happens when the ball moves a long way between frames. Ask:
Sometimes the ball passes straight through a brick or the paddle when it's moving fast. Please fix the collision detection so that can't happen, for example by moving the ball in several small steps each frame. Send me the complete fixed file.
It got slow after adding the glow
Glow effects are hard work for older computers. Ask the AI to "make the glow cheaper so the game runs smoothly on an older laptop".
You want to see the error the browser is hiding
Press F12 (or Cmd+Option+I on a Mac), click the Console tab and copy any red text into the chat. The AI can usually fix it in one go.
Keep a working copy
Before each big change, save a copy as breakout-v1.html, breakout-v2.html and so on. If a change goes badly, you can always go back.
Twist it into something else
The same game can become something completely different. Try asking for:
Photo smash
Put a photo behind the bricks, so breaking them slowly reveals a picture of your family, your pet or your holiday.
Spelling bricks
Each brick has a letter, and the bricks spell a word or a name that the player has to clear in order.
Boss level
Every fifth level is one giant brick with a health bar that moves slowly side to side.
Space theme
The paddle is a spaceship, the bricks are asteroids, and the background is a starfield rushing past.
Two-player race
Split the screen down the middle: arrow keys on one side, A and D on the other, first to clear their wall wins.
Made something fun? Share a screenshot and tag us. We feature reader projects.
You're learning to describe how things behave
You can play Breakout in a thousand places. Building one teaches you how to describe how something should behave, not just how it should look, and how to ask for one improvement at a time. That's the skill behind every project on this site.