Mouse Input & Drawing

Here's What You'll Build

A target shooting game -- click on randomly appearing targets before they disappear. Test your reflexes and aim.

The Concept

This lesson combines two previous concepts: mouse input (from Lesson 1.1) and animation (from Lesson 1.2). Targets appear at random positions, shrink over time, and disappear if you do not click them fast enough. Clicking a target scores points.

This is your first real game -- it has a goal (score points), a challenge (targets disappear), and a feedback loop (you see your score and accuracy).

The Math Behind It

Distance formula (Pythagorean theorem): To check if a click hit a circular target, calculate the distance between the click point and the target center: distance = sqrt((x2-x1)^2 + (y2-y1)^2). If the distance is less than the target's radius, the click is inside the circle.

Circle-point collision: This is the simplest form of collision detection. A point is inside a circle when its distance from the center is less than the radius. You will use this pattern constantly in game development.

Building with Claude

Step 1: Targets That Appear

Create a single HTMLHyperText Markup Language file called target-shooter.html. Dark background
(#0d0a1a), centered 800x600 canvas with crosshair cursor. Spawn circular
targets at random positions on the canvas. Each target should have a
random size between 15 and 45 pixels radius, a random color using HSLHue, Saturation, Lightness,
and slowly fade out over 2-4 seconds. When a target fades completely,
remove it and spawn a new one. Start with 3 targets on screen.

Step 2: Add Clicking and Scoring

Update target-shooter.html to detect clicks on targets. When the player
clicks inside a target circle (use the distance formula for hit detection),
remove the target, add points to the score, and spawn a new target.
Smaller targets should be worth more points. Display the score, hit count,
and miss count at the top. A miss is when a target fades away without
being clicked, or when the player clicks empty space. Add a 30-second
countdown timer. When time runs out, show a game over screen with final
score and accuracy percentage.

Why this prompt works: We described the full game loop: click detection, scoring, miss tracking, and an end condition. The scoring formula is described in plain language ("smaller targets worth more") rather than code. The game over screen request ensures the game has a clear ending.

Step 3: Polish

Improve target-shooter.html: 1) Add a particle burst effect when a
target is hit -- small circles that fly outward and fade. 2) Add concentric
rings inside each target like a bullseye. 3) Add a start button so the
game does not begin immediately. 4) Show an accuracy percentage at game
over.

Understanding What Claude Built

Random Spawning: Each target gets random x, y coordinates (within canvas bounds), a random radius, and a random hue. The Math.random() function returns a value between 0 and 1, which is scaled to the desired range.

Hit Detection: On click, the code loops through all targets and calculates the distance from the click to each target's center. The first target where distance < radius is the hit target. Targets are checked from newest to oldest so overlapping targets resolve correctly.

Fading: Each target has a life value that starts at 1.0 and decreases each frame. When life reaches 0, the target is removed. The target's opacity is tied to its life value, creating a smooth fade-out.

AIArtificial Intelligence Skill: Combining Multiple Mechanics

This lesson demonstrated combining mechanics in a single prompt. The Step 2 prompt included spawning, hit detection, scoring, miss tracking, a timer, and a game over screen. Using a clear structure (separate sentences for each feature) helps Claude implement everything without losing track.