HTML Lesson 1.2 — Paddle Controls

Lessons → HTML → Lesson 1.2
HTML

Add Paddle Controls

“You’re in control now. Left. Right. The paddle is yours.”

⏱ About 10 minutes 🛠 Notepad + browser ⭐ Lesson 2 of 3
What you will have

The same bouncing ball — plus a green paddle at the bottom you control with your LEFT and RIGHT arrow keys.

The ball bounces off the paddle just like it bounces off the walls. You are now part of the program.

paddle.html — live preview
Use your LEFT and RIGHT arrow keys to move the paddle.
Video walkthrough

Prefer to watch? Follow along with the full video.

Watch Greg build the paddle controls live — copying the prompt, pasting into ChatGPT, running the code, and making the Vibe Tweak. Pause and rewind as many times as you need.

Enjoying the videos? Subscribe on YouTube for every new lesson →

Before you start

Did you finish Lesson 1.1?

This lesson builds on the bouncing ball from Lesson 1.1. If you haven’t done that one yet, start there — it only takes 5 minutes.

← Go to Lesson 1.1 first
Your prompt

Copy this. Paste it into your AI. Hit Enter.

📋 Your Prompt — Copy Everything Below
Update the previous bouncing ball HTML file. Add a green paddle (width 100, height 15) near the bottom. The player moves it with LEFT and RIGHT arrow keys. The ball bounces off the paddle. Keep all existing wall bouncing behaviour.
✅ Copied! Now paste it into your AI.
What to do after

Follow these steps exactly.

1
Copy all the code the AI gives you
Select all of the code and copy it — Ctrl+A then Ctrl+C.
2
Open a fresh Notepad
Open a new blank Notepad window. Don’t use the old ball.html — start fresh.
3
Paste the code in
Click inside Notepad and press Ctrl+V.
4
Save as paddle.html
File → Save As → change type to All Files → name it paddle.html → save to your Desktop.
5
Open in your browser and play
Double-click paddle.html. Use your LEFT and RIGHT arrow keys to move the paddle.
🛠️ 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

Now make it harder.

Open paddle.html in Notepad. Find the number 100 — that’s the paddle width. Change it to 40. Save and refresh your browser.

Find this
paddleWidth = 100
→
Change to this
paddleWidth = 40
Extra Credit

Want to go further?

📋 Extra Credit Prompt
Make the paddle shrink by 5 pixels every time the ball hits it. Add a score counter that goes up by 1 each hit. Display the score on screen.
✅ Copied!
Reflection

Before you move on — think about this.

“You described left and right arrow keys in plain English and it just worked. How long do you think that would have taken to figure out from scratch? Can you find the line in the code that checks which key you pressed?”
Up next
HTML Lesson 1.3 — Make It a Game (Breakout!)
Bricks, score, lives, win screen. A complete arcade game in one HTML file.
Next Lesson →
Greg the Vibe Coder · gregthevibecoder.com 18 lessons · No account required