🎹 Neon Tiles — Twinkle Twinkle Little Star

A neon-styled 4-lane rhythm game built around the classic "Twinkle Twinkle Little Star" melody. Tap the falling tiles in time, or hold them down for sustained notes. Cyberpunk visuals with a cyan→magenta gradient palette and the Orbitron typeface give it a retro-futuristic arcade feel.

🎮 How to Play

• Tap / Click — Tap tiles on mobile, or click them with the mouse on desktop.
• Keyboard — Use D F J K for the four lanes (left → right).
• Hold notes — For taller tiles (half notes), keep the key/finger pressed until the tile clears.
• Pause — Space or P
• Mute / Unmute — M
• Quick start / restart — Press J while any overlay is showing.

✨ Features

🎵 Real Melody, Real Pitch

• Plays through all six lines of "Twinkle Twinkle Little Star" per cycle, in C major.
• Mix of 1-beat tap tiles (quarter notes) and 2-beat hold tiles (half notes at phrase ends) for natural musical phrasing.
• Each note plays at its actual pitch — you're literally performing the song, not hitting random tones.
• Hold tiles produce a sustained tone that rings until you release, with crisp gated envelopes for taps.

🚀 Progressive Difficulty

• BPM increases by +15 each cycle (60 → 75 → 90 → 105...), so the longer you survive, the faster the tiles fall.
• The melody is also transposed up by a whole step (2 semitones) every cycle, raising the key as the tempo climbs — fresh tonal challenge on each loop.

🎨 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.
• Animated "neon tile" START button that physically slides down the board into the game on press — no jarring screen transitions.
• 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, so the gameplay always feels fair and varied.

🎯 Forgiving Hold Timing

• Hold tiles only require 75% of the full duration — releasing slightly early still counts. This was a deliberate choice to reward feel over frame-perfect precision.
• 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.

🎼 Combo & Scoring

• 10 points per beat cleared (so a 2-beat hold = 20).
• +50 bonus every 10-tile combo, with a sparkly chime cue.
• High score saved locally via localStorage and shown on the start and game-over screens.

📱 Mobile-First Input

• Multi-touch support — different fingers on different lanes are tracked independently via touch.identifier.
• touch-action: none and user-scalable=no to prevent scrolling/zooming during play.
• Viewport sized in vw units (9:16 portrait, 177.78vw tall) 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.
• HTML5 Canvas for the 360×640 game board with hand-rolled rounded-rectangle drawing and gradient fills.
• Web Audio API with OscillatorNode for real-time tone synthesis — square wave fundamental + octave overtone, with separate gate, bell, and sustain envelope shapes.
• Google Fonts (Orbitron) for the futuristic display type.
• localStorage for persistent high score.
• Single self-contained .html file — drop it anywhere, open in a browser, and play.

💡 Things to Try

• See if you can survive past cycle 3 (BPM 105+, key transposed up a minor third).
• Chain a perfect run for combo bonuses — every 10 hits stacks +50.
• Try it on mobile with two thumbs vs. desktop with D/F/J/K — different muscle memory entirely.