Game Design & Development · Tiny-Loop Tutorial · Archetype #8

Tutorial: Rhythm Tap Game

Note Spawning Timing Windows Accuracy Scoring Pre-built Sprites

This is the exact Rhythm Tap Game archetype from What Makes a Game? — already built and running below. Play it, then swap the note theme, speed, and timing forgiveness using the panel underneath. You can't break the loop itself; that part is locked. Once you've tuned a version you like, you'll build this same architecture two more times: with Scratch's blocks, then from real scratch in JavaScript.

🗺️ The Architecture

Every tiny-loop game starts as a concept, then gets broken into a core loop, a systems list, and a structure — before anyone touches sprites or colors. Here's the Rhythm Tap Game's architecture:

🌱ConceptTap the matching key exactly when the note reaches the line.

→

🔁Core LoopNote spawns → falls toward the line → key pressed → timing checked → repeat.

→

🧩SystemsNote spawner, scroll, timing-window check, accuracy scoring.

→

🏁Win/LoseReach the score goal to win. There's no lose state — just accuracy.

The four systems, in order of execution every frame:

Spawner system — every fixed interval, a new note appears in one of three lanes at the top.
Scroll system — every note's y position increases each frame, so notes drift toward the target line.
Timing-window system — a key press checks the closest note in that lane against the target line: very close counts as "Perfect," a bit farther counts as "Good," far away or no note counts as a miss.
Scoring system — Perfect and Good hits add different point values; the running score is what you're trying to grow toward the win goal.

🎮 Play & Customize

Three lanes, three inputs: ← (left lane), ↓ (middle lane), → (right lane), or the matching touch buttons below the game. Press or tap exactly when a note crosses the glowing line.

Score: 0 ← ↓ →

💡 Click inside the game first — that gives it keyboard focus so ← ↓ → hit notes instead of scrolling the page.

Tune the Game (limited, on purpose)

Note Theme

Note Speed 3

Timing Forgiveness 2

Score to Win 30

Notice what you can't change here: there's no field for "how Perfect vs. Good is decided" or "how notes are spawned." That's the engine — the part every version of this game shares. You're only tuning content, not rewriting architecture. That's the limit, on purpose.

What the sliders actually touch in the engine: Note Speed feeds two places at once — it shortens the spawn timer (max(70 − speed×6, 30)) and speeds up how fast notes fall (1.2 + speed×0.9 pixels/frame) — so faster songs also arrive more often. Timing Forgiveness only widens the perfectWindow (10 + window×8 pixels) that onKeyPress() compares your tap distance against — the Perfect/Good/Miss scoring math itself never changes.

👀 Peek at the Code

The game running above is this code — nothing hidden. It's split into two parts on purpose: a small config object you just edited with the panel, and a locked engine that reads it.

✏️ Config — this is what the panel above edits

const config = {
  theme:  'drum',
  speed:  3,
  window: 2,
  winScore: 30
};

👆 This block updates live — hit "Apply & Restart" above and watch the exact values change here. There's no separate "demo" version of the code; this is it.

🔒 Engine — locked, shared by every version of this game

function onKeyPress(lane) {
  // 1. find the closest note in this lane
  const note = closestNoteInLane(lane);
  if (!note) return;

  // 2. measure the distance to the target line
  const distance = Math.abs(note.y - targetY);
  const perfectWindow = 10 + config.window * 8;
  const goodWindow    = perfectWindow * 2;

  // 3. score based on accuracy
  if (distance < perfectWindow) { score += 3; flash('Perfect!'); }
  else if (distance < goodWindow) { score += 1; flash('Good'); }
  else { flash('Miss'); return; }

  // 4. remove the note either way it was hit
  removeNote(note);
}

This is what "architecture" means in practice: the config is the part of the design doc you filled out in Lesson 1 (goal, mechanic, feedback). The engine is the part no one writes twice — the same spawn, scroll, and timing-window systems power every rhythm game, from this one to the arcade cabinets that started the genre.

🛠️ Now Build It For Real

You've played a working Rhythm Tap Game and seen exactly how it's built. Next, build this same architecture yourself — twice, in two different tools.

🧩 Step 1 — Build It in Scratch

The "Build the Loop with Blocks" section above already shows the exact scripts — backdrop, sprites, variables, and all three lane scripts, block by block, in Scratch's own category colors. Open a Scratch tab side-by-side and copy each script exactly; the game should come to life the same way it does here.

Open a blank Scratch project tab →

Want more practice first? There's no official in-editor deck for rhythm games specifically, but the official Make Music tutorial covers the play-sound and timing blocks these lanes build on.

Open the official Make Music tutorial → Read the Scratch Wiki's Music Projects page →

⚡ Step 2 — Code It From Real Scratch (Lesson 2) Write this same spawner, scroll, and timing-window system yourself in plain JavaScript and HTML5 Canvas — no engine, no blocks. ↩️ Back to the Archetype Grid Return to What Makes a Game? to try another tiny-loop archetype or the design workshop.