The Game Loop

Here's What You'll Build

A falling objects catcher -- move a basket with the mouse to catch falling items. Miss 3 and it is game over.

The Concept

The game loop is the heartbeat of every game. It runs continuously, performing three steps each cycle: process input, update state, render. This lesson focuses on the update step -- specifically, how to make game speed consistent regardless of frame rate.

Delta time (dt) is the time elapsed since the last frame. Instead of moving objects a fixed number of pixels per frame, you move them by speed * dt. This means a ball moving at 200 pixels per second moves 200 pixels per second whether the game runs at 30fps or 144fps.

The Math Behind It

Delta time: dt = (currentTime - lastTime) / 1000 gives you the time in seconds since the last frame. At 60fps, dt is approximately 0.0167. Multiply velocities by dt to get frame-rate independent movement.

Gravity simulation: Real gravity accelerates objects over time. In code: velocity += gravity * dt each frame, then position += velocity * dt. This produces the natural arc of falling objects.

Building with Claude

Step 1: The Basket and Falling Objects

Create a single HTMLHyperText Markup Language file called falling-catcher.html. Dark background
(#0d0a1a), centered 800x600 canvas. Draw a rectangular basket near the
bottom that follows the mouse cursor horizontally. Spawn colored star
shapes at random x positions at the top of the canvas that fall downward.
Each falling item should have a random color and a random fall speed.
Use delta time to ensure consistent falling speed regardless of frame
rate.

Step 2: Catching and Scoring

Update falling-catcher.html to detect when a falling item overlaps the
basket. When caught, add points to the score and show a small particle
burst. When an item falls past the bottom of the screen without being
caught, subtract one life. Start with 3 lives displayed as hearts at
the top. When all lives are lost, show game over with final score. Add a
start button. Increase falling speed and spawn rate as score increases
for difficulty progression.

Why this prompt works: We described the complete game system: catching mechanic, scoring, lives, game over, and difficulty progression. The difficulty scaling instruction ("increase speed and spawn rate as score increases") gives Claude enough direction to implement a satisfying difficulty curve.

Step 3: Polish

Improve falling-catcher.html: 1) Add different item types worth
different points -- common items worth 10, rare ones worth 25, and
ultra-rare ones worth 50 with a distinct glow effect. 2) Add particle
effects when catching items. 3) Make the basket have angled sides so
it looks like a container, not a flat rectangle. 4) Add touch support
so the basket follows finger position on mobile.

Understanding What Claude Built

Delta Time Pattern: The animation function receives a timestamp from requestAnimationFrame. Subtracting the previous timestamp gives dt in milliseconds. Dividing by 1000 converts to seconds. Every position update multiplies velocity by dt.

Collision Detection: The basket-item collision uses axis-aligned bounding box (AABBAxis-Aligned Bounding Box) overlap: check if the item's position is within the basket's horizontal range AND within its vertical range. This is simpler than circle collision and works well for rectangular catches.

Difficulty Curve: As score increases, the code reduces the spawn interval and increases the base fall speed. This creates a smooth ramp-up where the game gradually becomes more challenging without sudden jumps.

AIArtificial Intelligence Skill: Using Claude as a Tutor

This lesson introduced using Claude to explain code. After Claude generates your game, you can ask: "Explain how the delta time calculation works in this code" or "Why does the difficulty increase work this way?" Claude can walk through any section line by line.