Sound & Feedback

Here's What You'll Build

A rhythm tapper -- hit keys in time with a visual beat pattern. Scores your accuracy.

The Concept

Timing-based games test precision rather than reflexes. Notes scroll toward a target zone, and the player presses a key when the note reaches the zone. The closer to perfect timing, the higher the score. This introduces the concept of visual feedback -- the game communicates success and failure through animation, color, and text.

The Web Audio APIApplication Programming Interface generates sound without needing audio files. By creating oscillator nodes with different frequencies and waveforms, you can produce tones, beeps, and musical notes entirely in code.

The Math Behind It

Timing precision: When the player presses a key, calculate the distance between the note and the hit zone. Convert this distance to a rating: Perfect (< 15px), Good (< 30px), OK (< 50px), or Miss (> 50px). Each rating gives different points.

Percentage calculations: Accuracy is (hits / totalNotes) * 100. This running percentage updates after each note passes, giving the player real-time feedback on their performance.

Building with Claude

Step 1: Lanes and Notes

Create a single HTMLHyperText Markup Language file called rhythm-tapper.html. Dark background
(#0d0a1a), centered 800x600 canvas. Create 4 vertical lanes with a
horizontal hit zone near the bottom. The lanes correspond to keys D, F,
J, K. Show the key labels at the bottom of each lane. Spawn circular
notes at the top of random lanes that scroll downward toward the hit zone.
Each lane should have a different color.

Step 2: Hit Detection and Scoring

Update rhythm-tapper.html to detect key presses. When the player presses
D, F, J, or K, check if a note in that lane is close to the hit zone.
Rate the timing: "Perfect" if within 15 pixels, "Good" if within 30,
"Miss" if outside 50. Display the rating text briefly in the lane. Track
score, combo counter, and accuracy percentage in a HUDHeads-Up Display at the top. The
combo counter increases on hits and resets on misses. Higher combos give
bonus points. Add a start button that generates a random beat pattern of
64 notes at 120 BPM.

Why this prompt works: We defined exact pixel thresholds for timing ratings and specified the combo mechanic. The BPM and note count give Claude enough structure to generate a properly timed pattern. We described the UIUser Interface elements (HUD, rating text) as part of the gameplay.

Step 3: Sound and Feedback

Improve rhythm-tapper.html: 1) Use the Web Audio API to play a short
tone when a note is hit -- different pitches for Perfect, Good, and Miss.
2) Make the hit zone circle glow when its key is pressed. 3) Add particle
effects on successful hits. 4) Show a results screen at the end with
score, accuracy, and max combo. 5) Highlight the lane key labels when
pressed.

Understanding What Claude Built

Beat Pattern Generation: The code creates an array of 64 beats. Each beat has a random chance of containing a note in one or more lanes. This array is consumed at the BPM rate -- every 60000 / BPM milliseconds, the next beat is read and any notes are spawned.

Timing Windows: When a key is pressed, the code finds the closest note in that lane and measures the pixel distance to the hit zone. This distance maps to a rating. The ratings create a forgiving system where players feel rewarded even for imperfect timing.

Web Audio API: Creating sound is straightforward: make an oscillator (which generates a wave), set its frequency and type (square wave for retro feel), connect it to the output, start it, and stop it after a short duration. Different frequencies create different pitches.

AIArtificial Intelligence Skill: Prompting for Polish

This lesson demonstrated prompting for "juice" -- the game feel elements that make a game satisfying. Sound effects, visual feedback, particle effects, and screen shake transform a functional game into a fun one. Always dedicate a prompt step to polish.