๐ŸŽน Neon Tiles - The Wheels On The Bus

By Neon Piano

Neon Piano

0 subscribers

Based on the following code

๐ŸŽน Neon Tiles - La Campanella

๐ŸŽน Neon Tiles - La Campanella

Neon Piano

22 views ยท 21d ago

5 viewsยท20d ago

#rhythmgame #game #music

A neon-styled 4-lane rhythm game built around the road-trip favorite "The Wheels on the Bus" โ€” the chart was transcribed directly from sheet music and runs through the song's verse twice for a complete singalong cycle. Cyberpunk visuals with a cyanโ†’magenta gradient palette, ambient drifting tiles on the start and game-over screens, and the Orbitron typeface make the wheels go round and round in a brand new key.

๐ŸŽฎ 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 unison pulse from a single tap, capturing the "round and round" repeated-note motion.
  • Pause โ€” Space or P
  • Mute / Unmute โ€” M
  • Quick start / restart โ€” Press D while any overlay is showing.

โœจ Features

๐ŸŽต Real Score, Real Pitch

  • 8 measures played twice (16 measures total per cycle), transcribed directly from sheet music โ€” opens with a pickup note ("Theโ€ฆ") and runs through the full verse including the "round and round / round and round" climb and the cadence on "all through the town."
  • Every note plays at its actual pitch in G major (D4 / Fโ™ฏ4 / G4 / A4 / B4 / D5 โ€” a comfortable singing range).
  • Tempo is โ™ฉ=90, with each game beat = one 8th note (333 ms) โ€” friendly mid-tempo pace that matches the song's gentle bus-ride feel.

๐ŸŽถ Burst Tiles for the "Round and Round"

  • The verse's signature "round and round" 16th-note pulses appear as unison burst tiles (G4+G4) in measures 1 and 5, capturing the repeated-note feel without demanding multiple taps.
  • A pickup burst on the "town" cadence (D4) gives the verse its rhythmic kick into the next phrase.
  • 2- and 3-beat hold tiles land on the long words ("through," "town") for satisfying releases.

๐Ÿš€ Progressive Difficulty + Cycle Flash

  • BPM increases by +12.5% per cycle (90 โ†’ 101 โ†’ 112.5 โ†’ 124...). The repeated-pass structure means by cycle 2 you're hearing the same melody twice in a row but at noticeably different tempos and keys.
  • Each cycle is also transposed up by a whole step (2 semitones), sending the bus through ever-brighter keys.
  • 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. The chart's longest hold is the 3-beat G4 on "town" at the end of each verse.

๐ŸŽผ Scoring

  • 10 points per beat cleared (so the 3-beat "town" hold = 30, bursts count as a single tile each).
  • 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 (with separate envelopes for the rapid burst sequences).
  • Chart auto-generated from MusicXML via a custom Python converter, with automatic repeat-barline and volta unfolding (the "play twice" structure is unfolded directly into the melody array).

๐Ÿ’ก Things to Try

  • The verse opens with a pickup note at m0 (a single D4 before the downbeat) โ€” set your fingers up before the first full measure arrives so you don't get caught off-guard.
  • Listen for the "round and round" burst tiles in measures 1 and 5 โ€” they're identical, so you can plan ahead for the second one as soon as you've cleared the first.
  • The 3-beat G4 hold on "town" at m8 is the chart's biggest release moment โ€” let it ring out as the song's natural cadence.
  • The repeated-verse structure means cycle 2's first half lands at a 12.5% higher BPM than what you just played 8 bars earlier โ€” a great way to feel the speedup directly.

Loading comments...

Other Codes

No other codes yet