🎹 Neon Tiles - When the Saints Go Marching In

#rhythmgame #game #music

A neon-styled 4-lane rhythm game built around the New Orleans gospel-jazz march — "When the Saints Go Marching In" — the chart was transcribed directly from sheet music and runs through the full 8-bar verse top to bottom, with the final cadence tweaked to land on the more familiar C–D–C ending. Cyberpunk visuals with a cyan→magenta gradient palette, ambient drifting tiles on the start and game-over screens, and the Orbitron typeface drop the Dixieland brass-band classic straight into a synthwave second line.

🎮 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

• 8 measures of melody — a single full verse of "When the Saints Go Marching In" (the score includes 7 verses of lyrics on the same 8 bars; the chart plays the music once).
• Every note plays at its actual pitch in C major across the song's tight melodic fifth + step (C4 → G4) — the narrowest melodic range in the batch, sitting entirely inside a single hand position on a piano.
• Tempo is ♩=100 in 4/4 time, with each game beat = one eighth note (300 ms) — the score marks ♩=60 (a slow rehearsal speed), but the chart uses the more familiar Dixieland march pace.

🎶 Pickup Rest + Pickup Notes

• The chart opens with an eighth REST + 3 pickup 8th-notes (C4–E4–F4) before landing on the first G4 quarter at the downbeat of m1 — a brief ½-beat "ready" pulse before the song's iconic "Oh when the saints" ascending pickup figure.
• Each of the song's first three lines repeats the same pickup pattern + held G4 — the marching figure that gives the song its irresistible step.
• The final cadence has been tweaked: the source score writes D4–D4–C4 on "mar-ching in" (♩-♩-♩), but the chart rewrites it to C4–D4–C4 ("C–D–C") to match the more common arrangement that lands on the tonic at the start of the final phrase.
• No bursts. The melody is built entirely from 8th- and quarter-and-longer notes in a clean march grid.

🚀 Progressive Difficulty + Cycle Flash

• BPM increases by +12.5% per cycle (100 → 113 → 127 → 142...). Cycle 3 hits full parade pace.
• Each cycle is also transposed up by a whole step (2 semitones), sending the brass-band tune ever higher.
• 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 2-beat hold = 20, the recurring 4-beat G4 march 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, plus a custom post-processing step that rewrites the final-cadence D4 → C4 so the song lands on the more common "C–D–C" ending.

💡 Things to Try

• The chart has the narrowest melodic range in the batch (C4 → G4, just a fifth). Every tile sits inside a single hand position — making it the most "you can play it on the piano too" friendly song of the five.
• Feel the pickup figure on every line: "Oh when the saints" / "Oh when the saints" / "Oh when the saints go" — the chart's recurring rhythmic motif. Lock into it once and the rest of the song carries itself.
• The 8th rest at the very start is a brief half-beat (300 ms) of silence before any tiles start falling — a tiny "ready" pulse, then the first C4 pickup arrives.
• The final C4–D4–C4 cadence ("mar-ching in") is the chart's signature rewrite of the source score's D4–D4–C4 — listen for the lift onto the tonic at the start of the closing phrase.