HTML
Make It a Game — Breakout!
“Score. Lives. Bricks to destroy. Now it’s a real game. Pure satisfaction.”
What you will have
A complete Breakout arcade game — bricks, paddle, ball, score, lives, win screen and game over. All in one HTML file.
This is a real game. One you built. One you can send to friends and they can play it in their browser right now.
Use your LEFT and RIGHT arrow keys to play. Break all the bricks to win!
Video walkthrough
Prefer to watch? Follow along with the full video.
Watch Greg build the complete Breakout game live — copying the prompt, pasting into ChatGPT, running the game, making the Vibe Tweak, and going further with the Extra Credit power-up system.
Enjoying the videos? Subscribe on YouTube for every new lesson →
Before you start
This is lesson 3 of 3 in HTML.
If you’ve done Lessons 1.1 and 1.2 you’re ready. If not, start there first.
Your prompt
This is the biggest prompt yet — and the most satisfying result.
📋 Your Prompt — Copy Everything Below
Build a complete Breakout game in one HTML file. Features: 3 rows of coloured bricks (6 per row). Paddle controlled by arrow keys. Ball bounces off walls, paddle, and bricks. Score increases by 10 when a brick is destroyed. Player starts with 3 lives — ball resets on miss. Win message when all bricks are cleared. Game Over when lives reach 0. Display score and lives on screen at all times. Smooth animation using requestAnimationFrame.
✅ Copied! Now paste it into your AI.
What to do after
Follow these steps exactly.
1
Copy all the code the AI gives you
This will be more code than the previous lessons — that’s fine. Select all of it and copy.
2
Open a fresh Notepad
Open a new blank Notepad window.
3
Paste and save as breakout.html
File → Save As → All Files → name it breakout.html → save to Desktop.
4
Open in your browser and play
Double-click breakout.html. Use LEFT and RIGHT arrow keys. Break all the bricks.
🛠️ Didn’t work?
Don’t panic. Here’s exactly what to do:
1 Copy the error message you see on screen
2 Go back to your AI chat
3 Say: “This didn’t work. Here’s the error: [paste it]. Please fix it.”
The AI will fix it every time.
Vibe Tweak
Double the bricks.
Find the number 3 — that’s the number of brick rows. Change it to 6. Save and refresh.
Find this
brickRowCount = 3
→
Change to this
brickRowCount = 6
Extra Credit
Want to go further?
📋 Extra Credit Prompt
Add a power-up system to the Breakout game. When a brick breaks there is a 20% chance a yellow star falls. If the paddle catches the star, the ball slows down for 5 seconds and the paddle grows wider. Display a message on screen when the power-up is active.
✅ Copied!
Reflection
You just finished HTML. Think about this.
“Three lessons ago you had never built anything. Now you have a bouncing ball, a paddle game, and a complete arcade game. How long did it actually take?”
HTML complete. Pick your next subject below.