Neon Tiles - Happy Birthday
By Neon Piano
Based on the following code

Neon Tiles - Baby Shark
Neon Piano
6 views ยท 1d ago
0 viewsยท1h ago
๐น Neon Tiles โ Happy Birthday
A neon-styled 4-lane rhythm game built around the most-sung song on Earth โ "Happy Birthday to You" โ the chart was transcribed directly from sheet music and runs through the full four-line verse twice. Cyberpunk visuals with a cyanโmagenta gradient palette, ambient drifting tiles on the start and game-over screens, and the Orbitron typeface turn the candle-lit classic into something the synthwave dimension can throw a party with.
๐ฎ How to Play
- Tap / Click โ Tap tiles on mobile, or click them with the mouse on desktop.
- Keyboard โ Use
ASDFfor the four lanes (left โ right). - Hold notes โ For taller tiles, keep the key/finger pressed until the tile clears.
- Pause โ
SpaceorP - Mute / Unmute โ
M - Quick start / restart โ Press
Dwhile any overlay is showing.
โจ Features
๐ต Real Score, Real Pitch
- 9 measures played twice (18 measures total per cycle), transcribed directly from sheet music โ both repeats of the "Happy birthday to you / Happy birthday to you / Happy birthday dear ___ / Happy birthday to you" verse plus the final cadence.
- Every note plays at its actual pitch in C major across a clean octave (C4 โ C5), with a single chromatic Aโฏ/Bโญ at m7 โ the colorful "dear ___" lift the song is famous for.
- Tempo is โฉ=90 in 3/4 time, with each game beat = one 8th note (333 ms) โ the gentle waltz pulse keeps each "Happy birthday" phrase singable.
๐ถ Hold-Heavy Waltz with Built-In Breath
- The chart is dominated by 2-beat 4๋ถ์ํ holds rather than rapid taps โ Happy Birthday lives in its sustained syllables, not in fast runs.
- The chart's signature "Hap-py" pickup (originally a dotted-eighth + 16th) is rendered as two clean 8th notes back-to-back, so the rhythm reads at a glance instead of requiring sub-tile precision.
- Long cadential notes have been shortened to leave a built-in breath: the m2 / m4 "to you" 2๋ถ์ํ is now ์ 4๋ถ์ํ + 8๋ถ์ผํ, and the final m8 "to you" ์ 2๋ถ์ํ is 2๋ถ์ํ + 4๋ถ์ผํ โ every line of the song ends with a tiny pocket of silence before the next.
๐ Progressive Difficulty + Cycle Flash
- BPM increases by +12.5% per cycle (90 โ 101 โ 114 โ 128...). The gentle base tempo means even cycle 3 stays in singable territory.
- Each cycle is also transposed up by a whole step (2 semitones), sending the birthday wish into ever-higher keys.
- Cycle transition flash: every new cycle pops up a centered banner โ
CYCLE 2 / โช +2 ยท โก +12%โ with a scale-and-glow animation, so the moment you survive into harder territory feels earned.
๐ข Visible Miss Feedback
- Tap on empty space, hit the wrong tile, release a hold too early, or let any tile fall off-screen โ all trigger a red flash at the relevant tile (and a circle pulse at the tap point), held for 450 ms.
- Plays a dissonant low buzz with downward portamento so misses are clearly audible.
- The game ends after the miss display, giving you a clear "what just happened" beat.
๐จ Polished Neon Visuals
- Hand-tuned per-lane colors along a cyan โ blue โ purple โ magenta gradient that matches the logo.
- Glowing tube borders, soft outer halos, and scanline textures only inside the active press zone so the tappable area is instantly readable on hold tiles.
- Ambient floating tiles drift continuously down behind both the start screen and the game-over screen.
- Animated "neon tile" START button that physically slides down the board into the game on press โ no jarring screen transitions. Same treatment on the PLAY AGAIN button.
- Score-burst flash animation on every successful hit.
๐ง Smart Lane Distribution
- Lanes are picked dynamically rather than randomly: the algorithm avoids consecutive same-lane spawns and balances left vs. right side usage.
๐ฏ Forgiving Hold Timing
- Hold tiles only require 75% of the full duration โ releasing slightly early still counts.
- The hold-progress fill uses a soft gradient fade at its top edge instead of a hard line, so there's no visible pass/fail boundary to fixate on.
๐ผ Scoring
- 10 points per beat cleared (so a 2-beat hold = 20).
- High score saved locally and shown on the start and game-over screens.
๐ฑ Mobile-First Input
- Multi-touch support โ different fingers on different lanes are tracked independently.
- Coordinate-based hit testing rather than lane-only, so taps register exactly where your finger lands.
touch-action: noneanduser-scalable=noto prevent scrolling/zooming during play.- Viewport sized in
vwunits (9:16 portrait) so it scales perfectly across phone screens. - Mouse-up listener attached to
windowso releases register even if the cursor leaves the canvas.
๐ ๏ธ Tech Stack
- Pure HTML / CSS / JavaScript โ zero dependencies, zero build step.
- HTML5 Canvas for the 360ร640 game board with hand-rolled rounded-rectangle drawing and gradient fills.
- Web Audio API with
OscillatorNodesquare-wave synthesis โ
Loading comments...
Other Codes
No other codes yet