On this page
Why the flyer is a circle
Collision shape is a design decision rather than a technical one, and using a circle for a rounded flyer is the single biggest contributor to a game feeling fair.
A rectangle around a bird includes the corners: the space above the beak, below the tail, beside the wing tips. None of those look like they should kill you, so every near miss that clips a corner reads as a cheat — consistent, but arbitrary.
A circle matches the silhouette much more closely, and it is also the cheapest test there is: compare squared distance against squared radius, with no square root required.
We then shrink it. The collision radius is about 82% of the drawn radius, which means the visible edges of wings and beak pass through obstacles harmlessly. That forgiveness is standard arcade practice and it is why a near miss here feels like a near miss.
Circle against rectangle
Gates, blocks and beams are all axis-aligned rectangles, and the test against a circle is short: find the closest point on the rectangle to the circle's centre by clamping the centre into the rectangle's bounds, then measure.
That single test handles every case — the circle beside the rectangle, above it, or overlapping a corner — without special-casing anything. It is exact, it is cheap, and it is what runs against every gate on this site.
A gate is two rectangles: the pillar above the gap and the pillar below. We also skip both entirely when the flyer's horizontal extent does not overlap the gate's, which removes almost all of the work in a typical frame.
Rotating bars are sampled, not transformed
A rotating bar is a rotated rectangle, and the textbook answer is to transform the circle into the bar's local space and run the same test. We do something less precise on purpose.
Instead, we sample points along the bar's length and test the flyer against each as a small circle. With a sample roughly every 26 units, a 160-unit bar needs seven tests.
The reason is predictability. A rotated-rectangle test is exact about the corners, and the corners of a fast-spinning bar move very quickly — which produces collisions that are technically correct and feel random, because the player cannot track a corner travelling at that speed. Sampling produces a slightly rounded bar with a hitbox that behaves the way the bar looks like it should.
Tunnelling, and why we do not need continuous collision
Tunnelling is when a fast-moving object passes entirely through a thin obstacle between two frames, never overlapping it on any tested frame. It is the classic collision bug and it produces deaths and non-deaths that both look impossible.
The usual fix is continuous collision detection: sweep the shape along its path and test the swept volume. It is correct and it is more complexity than a flappy game needs.
We avoid the problem instead. The frame-time clamp limits a single step to 50 milliseconds, and at terminal fall speed that is about 31 units of vertical movement — smaller than every obstacle in every game here. The flyer therefore cannot skip past anything, whatever the browser does with our frame timing.
This is the clearest example on the site of a defensive constraint doing double duty. The frame clamp exists to stop browser stalls teleporting the flyer, and it also removes the need for continuous collision entirely.
Key takeaways
- A circular hitbox on a rounded flyer is both cheaper and fairer than a rectangle.
- The collision radius is about 82% of the drawn radius, so visible wing tips pass through harmlessly.
- Circle-versus-rectangle via the closest-point test handles every case without special-casing corners.
- Rotating bars are sampled rather than transformed, because fast-moving corners feel random even when exact.
- A 50 ms frame clamp limits movement to under 31 units per step, which removes tunnelling without continuous collision.