← back to Flappy Clone

README.md

69 lines

# Flappy Clone

A polished, self-contained Flappy-Bird-style game in a single HTML file — no
external assets, no libraries, no build step. Space / click / tap to flap
through scrolling pipe gaps.

![preview](preview.png)

## Play

Open `index.html` in any modern browser:

```sh
open index.html          # macOS
# or just double-click the file
```

That's it — the whole game is one file.

## Controls

| Action  | Input                         |
|---------|-------------------------------|
| Flap    | Space · Click · Tap           |
| Pause   | `P` · `Esc` · ⏸ button        |
| Mute    | `M` · 🔊 button               |
| Restart | Space · Click (on Game Over)  |

## Features

- Gravity + flap physics, scrolling pipes, score, increasing difficulty
  (pipes speed up and gaps tighten as your score climbs)
- Parallax background — drifting clouds, sun, two layers of hills, and a
  scrolling grass foreground
- Game-over panel with **medals** (Bronze 10 · Silver 20 · Gold 30 · Platinum 40)
- **Persistent best score** via `localStorage`
- Synthesized **sound effects** (Web Audio, no audio files) with mute toggle
- **Pause** support (auto-pauses when the tab loses focus)
- Screen-shake on crash, particle bursts on flap / score / death
- Fully responsive + retina-crisp (devicePixelRatio aware)

## Provenance & what changed

This started from Grok 4.5's Model Arena attempt at the "All-Models — Flappy
Clone" challenge. That artifact was a solid, good-looking base. This build
keeps its art and feel while fixing real defects and extending it:

**Defects fixed**
- **Framerate dependence** — the original tied physics to a 60 fps assumption
  via `requestAnimationFrame`, so it ran ~2× too fast on 120 Hz displays.
  Replaced with a fixed-timestep accumulator (physics is now identical at any
  refresh rate).
- **Resize corruption** — the original scattered `*scale` through all logic and
  never repositioned objects on resize, so resizing mid-game broke the world.
  Rewrote to simulate in a fixed **480×720 virtual space** and scale only at
  draw time — resizing is now seamless, and rendering is DPR-crisp.
- **Unfair instant ceiling death** — touching the top killed you instantly;
  softened to a bonk/clamp (classic Flappy behavior).

**Extensions added**
- Persistent best score, sound effects + mute, pause, medals, screen-shake,
  on-canvas touch buttons for mobile, and blur-to-pause.

## Tech

Plain Canvas 2D + Web Audio. ~500 lines, one file, zero dependencies.
Verified with headless Chrome (no runtime errors on the ready screen or during
live play).