Cave Flyer Game: 6 Levels, Gems, Stars and Power-Ups

The one-button "helicopter" game is a lesson in doing the most with the least: one input (hold to rise, release to fall) against a tunnel that keeps tightening. This snippet builds a complete level-based version on one HTML5 <canvas> with no libraries and no image files. You fly a small helicopter through six procedurally generated caves, collect gems in chains for a combo multiplier, dodge spikes, sliding gates and bats, pick up a shield, a magnet or slow-motion, and reach the glowing exit portal at the end of each level to earn up to three stars. It plays with a hold button, Space or the up arrow, or a press anywhere on the game.

Levels are data

Each level is one object in the LEVELS array: a name, a colour theme (crystal, magma or abyss), a length in pixels, a gap that runs from a wide start value to a narrow end value, a speed that runs from slow to fast, and the chance per slice of spikes, gates, bats, power-ups and gem trails. Level 1 has only a few spikes and a wide cave; gates arrive in level 2, bats in level 3, and the last level has a gap down to 96 pixels at close to five pixels per frame. Adding a seventh level means adding one more object. A level ends when the craft crosses the portal at world x = length, and the last 250 pixels before it are kept free of hazards so the run-in feels like a reward.

Stars, level select and saved progress

When you reach the portal you get one star for finishing, a second for collecting at least half of the gems that were generated, and a third for 80% or more. Stars, the best score per level and the number of unlocked levels are saved as one JSON object in localStorage (inside try/catch). The start screen shows a six-button level grid with locks and stars, "Play" continues from the first level you have not cleared, and the clear screen offers "Next level" or "Levels". A crash gives a hint and lets you retry the same level.

Hold-to-thrust physics on one axis

The craft only moves vertically and is driven by one flag. Every frame, if flying is true an upward LIFT acceleration is added to its velocity, otherwise a downward GRAV is added, and the velocity is clamped and added to the position. The craft is never set to a height; it is always accelerating one way or the other, so you hover by feathering the button. The same flag is set by the hold button, the keyboard and a press on the canvas, and cleared on pointer up, cancel and leave, so thrust can never get stuck on.

A procedural cave from recycled slices

The cave is a list of thin vertical slices, each storing a ceiling and a floor height. genSlice() makes the next one by moving the cave's centre with a bounded random walk (so the tunnel curves instead of jittering), narrowing the gap along the level, and occasionally widening it into a calm chamber. Slices that scroll off the left are removed and new ones are added on the right, so memory stays constant. Hazards and pickups live in world coordinates and are spawned as each slice is made, kept out of gem trails and spaced with a cooldown so the cave stays fair.

Cheap, fair collision and a lot of game feel

The wall height is interpolated between slices at three points across the craft, so you cannot clip a corner. Each spike is tested as four circles from its base to its tip, gates as two rectangles and bats as one circle, and skimming a spike gives a "CLOSE!" bonus. A shield absorbs one hit and destroys the hazard. Gems chain into a x5 combo, the magnet pulls gems in, and slow-motion slows the world but not your craft. The screen shakes and the craft bursts into sparks when you crash, the darkness deepens along the level with only a circle of light around the helicopter, and glowing crystals, parallax silhouettes, a spinning rotor and a progress bar add depth. Sound effects and a rotor hum come from the Web Audio API, with a mute button, and the game pauses on P, a button or a tab switch.