🎹 Neon Tiles - Itsy Bitsy Spider

#rhythmgame #game #music

A neon-styled 4-lane rhythm game built around the timeless nursery rhyme "The Itsy Bitsy Spider" — the chart was transcribed directly from sheet music, capturing both the rising-spider verses and the "down came the rain" descent. Cyberpunk visuals with a cyan→magenta gradient palette, ambient drifting tiles on the start and game-over screens, and the Orbitron typeface give the spider's waterspout climb an arcade-lit makeover.

🎮 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.
• Pause — Space or P
• Mute / Unmute — M
• Quick start / restart — Press D while any overlay is showing.

✨ Features

🎵 Real Score, Real Pitch

• 17 measures transcribed directly from sheet music — the whole rhyme: the spider climbing the waterspout, the rain washing it out, the sun drying everything up, and the final climb-back-up cadence.
• Every note plays at its actual pitch in F major (C4 through C5 — a tidy octave-spanning melody that matches the spider's upward arc).
• Tempo is ♩=120 in compound 6/8 feel — each game beat is a dotted-quarter subdivision, so 1-beat and 3-beat tiles correspond to the song's natural eighth-and-dotted-quarter rhythm.

🎶 Hold-Heavy Chart for a Lullaby-Like Feel

• The chart is dominated by 2-beat and 3-beat hold tiles rather than rapid-fire taps, because the song's character lives in its sustained, lilting motion — the spider doesn't jab up the waterspout, it crawls.
• The dotted-quarter "spider" / "water" / "spout" holds all land on 3-beat tiles, giving each phrase a satisfying breath of release before the next.
• The chart includes the song's signature 2-beat REST + pickup pattern at m5 ("Down came the rain…") that signals each new verse line.

🚀 Progressive Difficulty + Cycle Flash

• BPM increases by +12.5% per cycle (120 → 135 → 150 → 165...). The held-note dominance means the speedup hits the hold-timing leniency window rather than your tap reflexes.
• Each cycle is also transposed up by a whole step (2 semitones), sending the already-airy melody into ever-higher octaves.
• 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 (including releasing a hold too early).
• Forgiving holds (75% duration counts, soft gradient fade at the top edge — which really matters in this hold-dominated chart) and smart lane distribution that avoids consecutive same-lane spawns.

🎼 Scoring

• 10 points per beat cleared (so a 2-beat hold = 20, a 3-beat dotted-quarter = 30).
• 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 3-beat "itsy" / "bitsy" / "spider" holds across the first 4 measures are the chart's signature — let your finger stay relaxed and ride the sustain rather than counting frantically.
• Listen for the REST + pickup at m5 ("…spout / DOWN came the rain") — the silence is part of the song's storytelling and the chart honors that beat.
• The melody never strays from C4–C5, so by cycle 3 (transposed up a minor third) you're hearing the spider climb a brand new waterspout in a completely different key.