Mr. Scandrett's ClassroomOS

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

Tutorial: Flappy Clone

Gravity Flap Impulse Scrolling Obstacles Collision Pre-built Sprites

This is the exact Flappy Clone archetype from What Makes a Game? — already built and running below. Play it, then swap the pre-built sprite, gap size, and gravity strength 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 Flappy Clone's architecture:

🌱ConceptTap to flap against gravity and slip through as many gaps as possible.
→
🔁Core LoopFall → tap to flap → obstacle scrolls in → pass the gap → repeat.
→
🧩SystemsGravity/flap physics, obstacle spawner, scroll, collision + score.
→
🏁Win/LoseReach the score goal to win, hit an obstacle or the ground to lose.

The four systems, in order of execution every frame:

  1. Physics system — gravity constantly pulls the player down; a key press or click sets a short upward "flap" impulse instead.
  2. Spawner system — every ~1.5 seconds, a new obstacle pair (top + bottom) spawns off-screen to the right with a random gap position.
  3. Scroll system — every obstacle's x position decreases each frame, so obstacles drift toward the player.
  4. Collision & score system — AABB-checks the player against both parts of each obstacle; passing one safely scores a point, touching one or the ground/ceiling ends the game.

🎮 Play & Customize

Press Space, Arrow Up, click/tap the game, or use the touch button below. Slip through the gaps. Score enough points to win.

Score: 0 Space / ↑ / Click to flap

💡 Click inside the game first — that gives it keyboard focus so Space / ↑ flaps instead of scrolling the page.

Tune the Game (limited, on purpose)

Notice what you can't change here: there's no field for "how flap physics work" or "how scrolling is timed." 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: Gravity Strength is multiplied into both the constant downward pull (gravity × 0.15 added to velocity every frame) and the upward flap impulse (-gravity × 1.6) — raise it and both falling and flapping get snappier together, since one variable drives both. Gap Size only changes how tall the opening between the top and bottom obstacle rectangles is when spawnObstacle() builds them; the collision check and scroll speed never change.

👀 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 = {
  player:   '🐦',
  obstacle: 'pipe',
  gravity:  3,
  gapSize:  130,
  winScore: 10
};

👆 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 update() {
  // 1. gravity always pulls down; flapping overrides it upward
  player.vy += config.gravity * 0.15;
  if (flapPressed) player.vy = -config.gravity * 1.6;
  player.y += player.vy;

  // 2. spawn a new obstacle pair on a timer
  if (timeSinceSpawn() > spawnRate) spawnObstacle();

  // 3. scroll every obstacle toward the player
  obstacles.forEach(o => o.x -= 3);

  // 4. score on safe pass, end game on collision
  obstacles.forEach(o => {
    if (!o.scored && o.x + o.w < player.x) { score++; o.scored = true; }
    if (collides(player, o.top) || collides(player, o.bottom)) endGame(false);
  });
  if (player.y < 0 || player.y > H) endGame(false);
}
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 gravity, spawn, scroll, and collision systems power every flappy-style game anyone builds, yours included.

🛠️ Now Build It For Real

You've played a working Flappy Clone 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 four 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? Scratch's official "Make it Fly" tutorial builds a similar flying sprite controlled with arrow keys against a scrolling backdrop.

Open the official Scratch "Make it Fly" tutorial →
⚡ Step 2 — Code It From Real Scratch (Lesson 2) Write this same gravity system, obstacle spawner, and collision 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.