1

Title Slide - Your First Game with Physics

Part 1: ~5 min
Lesson 4 marks a significant leap: moving from static games (numbers going up in a clicker, grid-based movement in Snake) to a dynamic game with real physics. Today we'll build Pong - the first commercially successful video game (1972), and the great-grandfather of all modern action games.
Pong was created by Atari in 1972 and was the first game to bring video games into homes. It's also the best game to learn about digital physics: movement, velocity, collisions, and bouncing.

Share screen with a finished Pong game - glowing ball flying fast, bouncing off walls and paddles, particles exploding "Good evening everyone! Look at the screen. See that ball? It's flying. Not jumping between grid cells like our Snake - it's actually flying."

"It hits the wall... bounces. It hits the paddle... changes direction. Do you see the little particle explosion? The neon glow?"

"This is not a number game. This is not a grid game. This is a physics game." [Pause - let the word sink in] "Today we're building Pong - the father of all computer games in the world. And this time, we're doing it 2025-style: neon glow, particle explosions, and a computer opponent that challenges us."

"But most importantly? Zero images from the internet. Everything will be created from pure code - so the game will be smooth, fast, and perfect."

The hook here is the contrast between static games (clicker, Snake) and a dynamic game with physics. It's important that the finished game looks impressive - smooth movement, clear glow, noticeable explosions. This is a "wow" moment that pulls the students in.
2

Static vs Dynamic - Types of Games

Static games: The screen only changes when you perform an action. The clicker - you click, a number goes up. Snake - you press an arrow, the snake jumps one cell. Between actions, nothing happens.

Dynamic games: The screen changes constantly, 60 times per second, even if you don't press anything. Pong - the ball flies on its own, the opponent moves on its own. The game "lives" continuously.
The transition from static to dynamic is one of the biggest leaps in game development. This is the moment when a game becomes "alive" - it feels like a real world that keeps going even without the player's intervention. This is also why Pong was so revolutionary in 1972.

Open the clicker game from lesson 2 - click twice and stop "Remember the clicker we built? Watch. I click - number goes up. I click - number goes up. But the moment I don't click? Nothing happens. The screen is frozen."

"Snake too. Yes, the snake 'moves', but it jumps from cell to cell. It's not smooth movement - it's more like chess."

Switch to the Pong game - let go of the mouse "Now look at this. I put down the mouse. The ball keeps moving. The opponent keeps moving. The game is alive without me."

"That's the difference between static and dynamic. A static game works in turns. A dynamic game works in real-time."

The visual demonstration here is everything. Let students see both games side by side. The comparison creates an immediate understanding of a key concept in game design. This isn't a technical concept - it's a design concept.
3

Game Loop - The Heartbeat of the Game

Part 2: ~10 min
The Game Loop is the idea that the game repeats itself constantly - 60 times per second (60 FPS).

Each "beat" of the loop: 1) Update positions (move the ball), 2) Check collisions (did it hit something?), 3) Redraw the screen.

This happens so fast that our eyes see smooth motion, just like in a movie.
FPS (Frames Per Second) is the standard in the gaming industry. 60 FPS = 60 times per second the game redraws itself. That means there are only 16.6 milliseconds per frame - our AI agent knows how to write optimized code that meets this requirement.

"So how does the computer create this illusion? Game Loop - the game loop."

"Think of it like a flipbook that you flip through really fast. Each page is a slightly different drawing, and you flip through them so quickly it looks like motion."

"In our game, 60 times per second, the computer does this process:"

"1. Update: Move the ball a little. Move the opponent a little.
2. Check: Did the ball hit something?
3. Draw: Erase the screen and redraw everything in the new positions."

"This happens so fast that our eyes can't detect the individual beats. We see smooth motion."

"And this is exactly what the AI will write for us in just a few seconds."

The "flipbook" metaphor works great with all ages. If there's time, you can demonstrate the concept by drawing on sticky notes (draw a ball in different positions and flip through quickly). But it's not mandatory - a verbal explanation is sufficient.
4

Prototype - The First Trial Version

A Prototype is a simple first version that tests the core idea. Not pretty, not polished - just works.

In game development, you always start from a prototype: build the basic mechanics (ball moves, paddle responds) without worrying about colors and effects. Only after you see that the idea works - you start making it beautiful.
One of the most common mistakes new developers make is starting with design and effects. Experienced developers know: prototype first, polish later. This saves months of work on an idea that might not work.

"Before we build a beautiful game with neon and particles, we need to talk about Prototype."

"It's the ugly first version. It's like an architect's sketch before they draw the detailed blueprint."

"In game development, you always start simple: Does the idea work? Does the ball move? Does the paddle respond? Is there collision?"

"Only after we see that the mechanics work - then we start painting, adding effects, and turning it into something beautiful."

"So we'll do this in two stages: first a basic prototype, then full polish."

5

The First Prompt - The Basic Engine

Part 3: ~10 min
The first prompt asks the AI to build the core of the game: a ball that moves, two paddles (one controlled by mouse, one automatic), a scoring system, and most importantly - physical behavior: the ball bounces off walls and paddles.

We're not asking for design at this stage - just that the game works.
Create a classic Pong game in a single HTML file. 1. Use HTML5 Canvas. 2. The player controls the left paddle with the mouse Y position. 3. The computer controls the right paddle automatically. 4. The ball should bounce off paddles and walls. 5. Display scores at the top for both players. 6. When someone reaches 5 points, show "Game Over" with winner name.

Open a new project in the IDE "Everyone create a new project. Call it Pong or NeonPong."

"Our first prompt will build the basic engine. We're asking for:"

"1. A classic Pong game - ball, two paddles.
2. The player controls the left paddle with the mouse (not keyboard!).
3. The computer controls the right paddle automatically.
4. The ball bounces off walls and paddles.
5. There's a scoring system up to 5 points."

Paste the prompt, press Enter, wait for the code to be written "Watch how the AI thinks. It knows it needs to create a physics engine. It writes variables like ballX, ballY, velocityX, velocityY."

Click Preview when the code is done "Let's check... There we go! We have a game. The ball moves, my paddle follows the mouse, the opponent moves on its own."

"But look closely: it's ugly. Black and white, simple rectangles. That's the prototype. And it works. That's what matters at this stage."

It's important to emphasize that the game at this stage is "ugly but works." This teaches students about the process - you don't jump straight to perfect design. Let them play for 30 seconds with the prototype before moving on.
6

Assets vs Procedural - Images or Code?

Assets: Images, sounds, and files brought from outside. You need to download, edit, make sure there's no white background, manage sizes.

Procedural Graphics: The code draws everything itself. Want a glowing cyan circle? The code draws it. Want a red spark? The code draws it. Zero external files.
The choice between Assets and Procedural is an important product decision: Assets look more photogenic but are slow and complicated to manage. Procedural is fast, clean, and flexible - but requires good programming skills. With AI, we have the ability to do high-level Procedural easily.

"Okay, the game works. Now we want it to look beautiful. And here there are two paths:"

"Path 1 - Assets: We go to Google Images, search for 'pong ball PNG', download an image, make sure it has a transparent background, resize it, import it into the code. It works, but it's tedious."

"Path 2 - Procedural Graphics: We ask the AI to draw everything in code. Want a round ball with a cyan glow? One line of code. Want paddles with a neon effect? One line."

"Which path do we choose? Procedural. Why?"

"1. It's fast - no need to search for images.
2. It's clean - no annoying white backgrounds.
3. It's flexible - want to change the color? One word in the prompt."

"Let's turn our prototype into a crazy neon game."

This is a key decision point in product design. Emphasize that this is not a technical decision but a business/design decision. If students insist on images - let them try at home and see how long it takes them.
7

Collision Detection - How the Game "Feels" Collisions

Part 4: ~10 min
Collision Detection is the mechanism that makes the game feel physical. The code checks every frame: "Is the ball in the same place as the wall? As the paddle?"

If yes - something happens: the ball bounces, the player gets a point, or a sound plays.

Without Collision Detection, the ball would pass through the walls like a ghost. This is what makes digital things feel tangible.
Collision Detection is one of the biggest technical challenges in game development, but conceptually it's simple: "Two things are in the same place? React." In Pong it's easy - simple shapes. In complex games (like GTA) it's an entire system.

Play the game - demonstrate the moment the ball hits the paddle "Watch what happens now. The ball is heading toward my paddle... Hit! And it bounced back."

"How does the computer know the ball hit? Collision Detection - detecting collisions."

"Every frame, the code asks: 'Where's the ball? Where's the paddle? Are they in the same place?' If yes - the ball changes direction."

"It's not magic. It's simple math: if the ball's X position equals the paddle's X position, and the Y position overlaps - there's a collision."

"And here's the amazing part: the AI writes all these calculations for us. We just ask 'make the ball bounce off the paddle,' and it knows how to do it."

Update the visual style to 'Cyberpunk Neon': 1. Set the background to dark black (#000). 2. Draw the paddles with bright Cyan (#00ffff) color. 3. Draw the ball with bright Magenta (#ff00ff) color. 4. Add a 'shadowBlur' glow effect to all game elements (paddles, ball) so they look like glowing neon lights. 5. Use a modern sans-serif font for the score with glow effect.

"Now that the game works, let's turn it into cyberpunk."

Paste the design prompt, run it "I'm asking for: black background, glowing cyan paddles, glowing magenta ball, and glow effects on everything."

Click Preview "Boom! Look at that. The exact same game, but now it looks like it came straight out of Tron."

"And that's the power of Procedural Graphics. We changed four words in the prompt, and the game completely transformed."

8

Juice & Polish - "Game Feel"

Juice is everything that makes a game feel satisfying: shakes, glow, sounds, particles. It's the difference between "a button that works" and "a button that's fun to press."

Polish is the final refinement - the small details that turn a good game into a great game.
There's a famous video in the game development community called "Juice it or lose it" that demonstrates how the same basic Pong game becomes addictive just by adding Juice. It doesn't change the mechanics - only the feel.

"Our game now works and it's beautiful. But there's still something missing."

Play the game - demonstrate the ball hitting "Watch. The ball hits the paddle... and that's it. It happens, but it doesn't feel like enough."

"In professional games, every action gives you feedback - something that tells you 'yes, that happened, and it was awesome.'"

"This is called Juice. It's what turns a technical game into a fun game."

"We'll add two things to our game that'll give it Juice: a subtle screen shake on every hit, and a particle system that explodes."

9

Particle Systems - Particle Explosions

Part 5: ~10 min
A Particle System is a technique for creating impressive visual effects: when the ball hits, 20-30 small particles are created that scatter in all directions, slow down, and disappear.

Each particle is a small object with position, direction, speed, and a lifespan. The engine needs to manage them all simultaneously - which makes it a technical challenge, but with AI it's simple.
Particle systems are used in every modern game: smoke, fire, rain, snow, explosions, magic. It's one of the most powerful tools for creating "feel" in a game. And the best part? Everything is created in code - zero images.
Add a particle explosion effect: When the ball hits a paddle or wall, spawn 15-20 tiny colorful particles that: 1. Explode outward in random directions 2. Fade out gradually 3. Disappear after 0.5 seconds 4. Use the same neon colors (Cyan and Magenta)

"Now we're getting to the coolest part: Particle System - particle systems."

"Imagine that every time the ball hits something, there's a small explosion of colorful sparks scattering in all directions."

"That sounds complicated to program, right? Managing 20 particles, each moving in a different direction, disappearing at different rates..."

"But for the AI, it's one line of instructions."

Paste the particles prompt, run it "I'm asking: when the ball hits, generate 20 small particles that explode outward and disappear."

Click Preview and play - demonstrate the explosion "Look at that! Every hit now comes with a small explosion. It doesn't change the rules of the game - but it feels 10 times better."

"That's exactly what Juice means: we added sensation, satisfaction, visual feedback. The game went from a game that works to a game that's fun to play."

This is the second WOW moment in the lesson. Let students play with the particles for 1-2 minutes. The difference between the game before and after particles is dramatic, and it teaches about the importance of visual feedback in game design.
10

AI Opponent - Teaching the Computer to Be a Rival

The AI Opponent is the code that controls the computer rival. In its simplest form, it just "follows the ball" - the paddle always moves to the ball's Y position.

But a perfect opponent is boring - you can't win. So you need to add "intentional mistakes": reaction delay, speed limits, occasional bad decisions.
AI in games is not "real" AI like ChatGPT. It's just a series of rules: "If the ball is up, move up." The challenge is making the AI feel human - not perfect, not too dumb. That's an art.

Play against the computer - try to win "We have a small problem. Watch, I'm playing against the computer... it never misses."

"Why? Because the computer sees the exact position of the ball and just moves to it. It's not fair - the computer is perfect."

"In the real world, opponents make mistakes. They're not perfect. If our opponent is perfect, the game isn't fun."

"So we're going to teach the computer... to be worse. Sounds backwards, right? But this is one of the most important concepts in game design."

11

Game Balance - Tuning the Difficulty

Part 6: ~10 min
Game Balance is the art of creating a game that's challenging but not frustrating. Too easy? Boring within a minute. Too hard? Discouraging and players quit.

Proper balance means: the player feels they can win if they play well, but they need to try hard.
Game Balance is an iterative process: build, test with real players, adjust, test again. Big game companies employ people whose entire job is to balance games. It's not an exact science - it's an art.
Make the enemy AI imperfect and beatable: 1. Add a reaction delay - the enemy should react 150ms after the ball changes direction, not instantly. 2. Limit the enemy paddle speed to 70% of the player's speed. 3. Occasionally (10% chance), make the enemy "miss" by moving to a slightly wrong position.

"So how do we solve the problem? We add intentional weaknesses to the computer."

Paste the balance prompt "I'm asking the AI to do three things:"

"1. Reaction delay: The computer doesn't react instantly. It has 150 milliseconds of 'thinking time.'
2. Speed limit: Its paddle moves at 70% of my speed.
3. Random mistakes: In 10% of cases, it just moves to the wrong spot."

Run Preview and play - this time you'll win "Let's check... Yes! I won! The computer missed a few times, it didn't get there in time."

"The game is now balanced. If I play well, I'll win. If I play poorly, the computer wins. And that's exactly what we want."

"This is Game Balance: not too easy, not too hard, just right."

It's important to emphasize that this is a design decision, not a technical one. We're teaching students to think like game designers: "What will make the game fun?" This is one of the most important concepts in the lesson.
12

Summary and Homework

Part 7: ~5 min
Game Loop - The heartbeat of the game, 60 times per second
Prototype - Simple first version, functionality before beauty
Assets vs Procedural - External images vs code-generated graphics
Collision Detection - Detecting collisions between objects
Juice & Polish - The feel and satisfaction of the game
Particle Systems - Exploding particle effects
AI Opponent - A computer opponent that plays against you
Game Balance - Tuning difficulty so the game stays fun
FPS - Frames Per Second, how many times per second the screen redraws
Real-time - A game that keeps running even without player input

Stop screen sharing, switch back to full camera "So what did we do today? We built a game with real physics - not just numbers going up, not just grid-based jumps. A game that truly lives."

"We learned how to plan a game in stages: prototype first, design later."

"We learned to use procedural graphics instead of downloading images from the internet."

"And most importantly - we learned that balance is everything. A good game isn't a perfect game, it's a game that challenges you in just the right way."

"Your homework: Take this Pong and play with the parameters. Try changing:"

"- The ball speed (faster / slower)
- The paddle sizes (harder / easier)
- The colors (what if instead of cyan and magenta you use green and gold?)
- Add more effects (screen shakes? sounds?)"

"In the next lesson, we're going to go even deeper into physics and build a game with gravity and variable speed."

"Thank you all, see you in the next lesson!"

The homework is important - encourage students to play with the parameters. This is when they truly learn. If there are students who want to try sounds - point them to search "Web Audio API prompt" to see how to add sound effects.
End of Speaker Notes - Lesson 4