Neon Tiles - Yankee Doodle

By Neon Piano

Neon Piano

0 subscribers

Based on the following code

Neon Tiles - Baby Shark

Neon Tiles - Baby Shark

Neon Piano

6 views ยท 1d ago

0 viewsยท1h ago

๐ŸŽน Neon Tiles โ€” Yankee Doodle

A neon-styled 4-lane rhythm game built around the colonial fife-and-drum classic "Yankee Doodle" โ€” the chart was transcribed directly from sheet music and runs through the full 16-bar march top to bottom. Cyberpunk visuals with a cyanโ†’magenta gradient palette, ambient drifting tiles on the start and game-over screens, and the Orbitron typeface march the revolutionary anthem straight into the synthwave parade.

๐ŸŽฎ 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 โ€” A few tiles fire a quick two-note flourish from a single tap, capturing the song's neighbor-tone passing 8ths.
  • Pause โ€” Space or P
  • Mute / Unmute โ€” M
  • Quick start / restart โ€” Press D while any overlay is showing.

โœจ Features

๐ŸŽต Real Score, Real Pitch

  • 16 measures played straight through โ€” both halves of the march (the verse "Yankee Doodle went to town..." and the chorus "Yankee Doodle keep it up, Yankee Doodle dandy...").
  • Every note plays at its actual pitch in G major across a comfortable melodic ninth (B3 โ†’ C5), making it the widest melodic range in the batch.
  • Tempo is โ™ฉ=180 in 4/4 time, with each game beat = one 4๋ถ„์Œํ‘œ (333 ms) โ€” the fastest tempo in the batch, giving the chart proper marching-band snap.

๐ŸŽถ Quarter-Note March + Cadential Snap

  • The chart uses 4๋ถ„์Œํ‘œ ์Šฌ๋กฏ mode โ€” 1 tile = 1 quarter beat โ€” so the visual rhythm reads exactly like a fife-and-drum tap pattern.
  • The song's iconic 2๋ถ„ + 4๋ถ„ + 4๋ถ„์‰ผํ‘œ cadence ("Doodle dan-dy ___" / "girls be han-dy ___") lands at m8 and m16 โ€” a long held G4, a short G4 tap, then a quarter rest. Two clean march-style endings.
  • 3 sub-slot bursts at m9, m11, m13 capture the neighbor-tone 8th-note passing figures ("Father and I went..." / "There we saw..." style ornaments) without breaking the quarter-note grid.
  • The score's whole notes have been split into 2๋ถ„ + 2๋ถ„์‰ผํ‘œ so even long sustained moments keep the march bouncing rather than stopping dead.

๐Ÿš€ Progressive Difficulty + Cycle Flash

  • BPM increases by +12.5% per cycle (180 โ†’ 203 โ†’ 228 โ†’ 256...). At a base of โ™ฉ=180, cycle 2 already crosses โ™ฉ=200 โ€” full-on marching-band pace.
  • Each cycle is also transposed up by a whole step (2 semitones), sending the brass-band tune into ever-higher fife range.
  • 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), with bursts counted as a single tile.
  • 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: none and user-scalable=no to prevent scrolling/zooming during play.
  • Viewport sized in vw units (9:16 portrait) so it scales perfectly across phone screens.
  • Mouse-up listener attached to window so releases register even if the cursor leaves the canvas.

๐Ÿ› ๏ธ Tech Stack

  • Pure HTML / CSS / JavaScript โ€” zero dependencies, zero build step.
  • **H

Loading comments...

Other Codes

No other codes yet