🎹 Neon Tiles - Baby Shark

#rhythmgame #game #music

A neon-styled 4-lane rhythm game built around the viral children's anthem "Baby Shark" — the chart was transcribed directly from sheet music and runs through the song's full verse-and-chorus loop. Cyberpunk visuals with a cyan→magenta gradient palette, ambient drifting tiles on the start and game-over screens, and the Orbitron typeface dress up the kindergarten classic in arcade neon.

🎮 How to Play

• Tap / Click — Tap tiles on mobile, or click them with the mouse on desktop.
• Keyboard — Use A S D F for the four lanes (left → right).
• Hold notes — For taller tiles, keep the key/finger pressed until the tile clears.
• Burst tiles — Some tiles fire a quick two-note flourish from a single tap, capturing the "doo-doo-doo-doo" 16th-note pulses.
• Pause — Space or P
• Mute / Unmute — M
• Quick start / restart — Press D while any overlay is showing.

✨ Features

🎵 Real Score, Real Pitch

• 26 measures transcribed directly from sheet music — the full "Baby Shark, doo-doo-doo-doo-doo-doo" verse, the "Mommy/Daddy/Grandma/Grandpa Shark" variations, and the closing held cadence.
• Every note plays at its actual pitch (D4 / E4 / F♯4 / G4 — a tight four-note range that's hummable by ear).
• Tempo is ♩=120, with each game beat = one 8th note (250 ms) — brisk but not punishing at base tempo.

🎶 Burst Tiles for the "Doo-Doo-Doo-Doo"

• The song's signature feature is its insistent 16th-note ostinato on the syllable "doo." The chart represents these as burst tiles: one tap fires a quick two-note pulse, capturing the sound of the run without demanding a tap for every syllable.
• The closing tile is a 4-beat sustained F♯4 — hold it down to ring out the verse's final "do-doo-doo-doo" with proper duration.

🚀 Progressive Difficulty + Cycle Flash

• BPM increases by +12.5% per cycle (120 → 135 → 150 → 165...). For a song that already lives in your head rent-free, the speedup is intentionally cruel.
• Each cycle is also transposed up by a whole step (2 semitones), so the shark keeps climbing into higher and higher waters.
• Cycle transition flash: every new cycle pops up a centered CYCLE 2 / ♪ +2 · ⚡ +12% banner with a scale-and-glow animation.

🎨 Neon Polish

• Cyan → blue → purple → magenta per-lane gradient, glowing tube borders, scanline textures inside the active press zone, ambient drifting tiles behind every overlay, and an animated START button that slides down into the game.
• Visible miss feedback: red flash + dissonant low buzz with downward portamento on any miss.
• Forgiving holds (75% duration counts, soft gradient fade at the top edge) and smart lane distribution that avoids consecutive same-lane spawns.

🎼 Scoring

• 10 points per beat cleared (so a 4-beat closing hold = 40).
• High score saved locally.

🛠️ Tech Stack

• Pure HTML / CSS / JavaScript, zero dependencies, single self-contained .html file — drop it anywhere and play.
• HTML5 Canvas + Web Audio API square-wave synthesis.
• Chart auto-generated from MusicXML via a custom Python converter, with automatic repeat-barline and volta unfolding.

💡 Things to Try

• The whole song lives inside a narrow 4-note window (D-E-F♯-G) — listen for how the chart still feels varied just by varying rhythm and lane assignment.
• Try cycle 2 (+12.5% BPM, +2 semitones) and notice how the four lanes start landing in unexpected places once the algorithm has to compensate for the faster pace.
• The closing 4-beat F♯ hold at m25 is a satisfying release after the relentless verses — hold it through to the end for the full 40 points.