Flap & Dodge Obstacle Game — Free HTML CSS JS Snippet

Side-scrolling flap-and-dodge games look simple on the surface but hinge entirely on one detail most quick clones get wrong: frame-rate independence. If gravity and obstacle speed are applied as a fixed number of pixels per rendered frame, the game runs at wildly different speeds on a 60Hz versus a 144Hz display, or stutters unpredictably when the browser tab is throttled. This snippet uses genuine delta-time physics — every update multiplies velocity and position changes by the elapsed time since the last frame, in seconds, so the character falls, accelerates, and the obstacles scroll at a truly constant real-world speed regardless of the device's refresh rate.

The game loop and delta time

The core loop runs through requestAnimationFrame(loop), and each call computes dt as the milliseconds since the previous frame converted to seconds and clamped to a maximum of 0.033 (roughly 30fps) so a dropped frame or tab-switch stall never produces a huge physics jump that teleports the character through an obstacle. Gravity is defined as GRAVITY = 1400 pixels per second squared, applied each frame as bird.vy += GRAVITY * dt, and the resulting velocity moves the character as bird.y += bird.vy * dt. A click, tap, or spacebar press calls flap(), which simply overwrites the vertical velocity to a fixed upward value (FLAP_VELOCITY = -420) — the same physics integration then naturally arcs the character back down under gravity afterward.

Obstacle spawning and gap collision

New obstacle pairs are pushed onto a pipes array on a fixed real-time interval (PIPE_INTERVAL seconds, not frame count), each with a randomly chosen gapCenter kept away from the very top and bottom of the canvas via a margin. Every frame, each pipe's x decreases by PIPE_SPEED * dt, and pipes are filtered out of the array once they scroll fully off the left edge, keeping the array small and collision checks cheap. Collision detection is a straightforward two-axis check: a pipe is only a collision candidate while the character's horizontal extent overlaps the pipe's horizontal extent, and within that window the character loses if its vertical extent extends above the gap's top edge or below the gap's bottom edge — exactly the classic "AABB vs gap" test used by every implementation of this genre.

Scoring and canvas rendering

A pipe is marked passed and the score increments the instant the pipe's right edge scrolls behind the character's left edge, so scoring happens exactly once per obstacle regardless of frame rate. Rendering is done entirely on a single 2D canvas context: a vertical sky gradient, filled rectangles for the top and bottom pipe segments (derived directly from each pipe's gapCenter and PIPE_GAP), and a hand-drawn circular character with a rotating tilt driven by the current vertical velocity (Math.atan-free — a simple clamped ratio of vy) so the character visibly noses down while falling and up while flapping, a small but important readability cue borrowed from the genre's classic feel. Best score persists via localStorage and is shown on both the start screen and the game-over screen.