MENGLY / Arcade Games

Piano rhythm

NEON KEYS is a piano rhythm game: notes fall down eight glowing lanes, and you hit the matching key as they cross the glow line.

8/14/2026Views: 0Launches: 0
Back to indexLaunch app

{Piano rhythm} Project Report

1. The Concept

NEON KEYS is a piano rhythm game: notes fall down eight glowing lanes, and you hit the matching key as they cross the glow line.

The problem it solves is simple — “how do you make tapping a piano feel like playing a song, not just a timing test?” The notes are the melody. Each song (Aurora, Tide, Starline) has its own chords and tune, generated live with the Web Audio API, so hitting a note also plays the pitch. You are not chasing random beads; you are performing the track.

Identity in one line: a dark neon piano where falling notes are the song, and a clean hit sounds like music.

Easy to start (title → pick a song and difficulty → Play → 3-2-1-GO). Room to grow for experts through tighter timing windows, faster falls, chord-lane extras on Hard, combo multipliers, gold STAR notes, and a FEVER meter that doubles score for a few seconds. Miss five notes and the song is over.

Built as a smartphone-first music game (title → play → pause / complete / failed), guided by the Sakurai-style design rules in the repo: one job per screen, fun first, beginner-simple with depth through songs and difficulty.

2. The Stack

Kept deliberately thin so a full game could ship in one day:

App shell — index.html + style.css + script.js No build step, open and play Dark near-black stage, glass panels, neon pink / purple / cyan

UI — HTML + CSS (Manrope + Syne, CSS variables, safe-area insets) Touch vs desktop copy (hide A S D F · J K L ; on phones) Overlays: start, pause, results, help

Logic — Vanilla JavaScript (IIFE, "use strict") Tunable PARAMS block for score, combo, fever, hit windows, fall speed Chart generated from song melody + difficulty

Input — Keyboard (A S D F J K L ;) + pointer events on piano keys Multi-touch, Space = fever, Escape = pause

Audio / feel — Web Audio API (no .mp3 / .wav files) Original piano songs (pads + melody), hit spark, miss thud, intro ticks Canvas particles, hit-stop, vibration haptics

Persistence — localStorage (neonKeys.v2) Best score per song × difficulty; mute preference; migrates v1 saves

Design guidance — Sakurai-style rule docs + UI/design rules in sakurai/ and rules/ Unique hook, beginner + expert, stress/relief, immediate feedback

No framework, no bundler, no external game engine — three files, one day, one playable product.

3. The 1 Day Sprint (+ polish pass)

The sprint goal was not “a falling-notes demo.” It was: by end of day, a stranger can open the file, pick a song, play along with the music, and want one more run.

Scope locked early:

Anything that didn’t serve “hit the note, hear the song” waited.

Morning (Hours 1–3):

Hours 1–2 — Foundation

Hour 3 — Core loop

By lunch: you could hit notes on a glowing stage — raw, but real.

Afternoon (Hours 4–6):

Hours 4–5 — Songs, levels, and mobile

Starline (98 BPM, brighter) — each with chord pads + melody charts.

Hour 6 — Music as the product

Afternoon turned a mechanic into a game people could hear.

The Finish Line (Hour 7-8):

Done when: open index.html → pick Aurora / Tide / Starline → Play → 3-2-1-GO → hit with the music → complete or fail → want to retry.

Polish (Aug 14):

A same-day playtest pass after the loop shipped — not new systems for their own sake, just making the fantasy clearer and the first session smoother.

Polish rule: if it didn’t make “hit the glow line with the song” more obvious or more satisfying, it didn’t ship.

4. The Roadblocks

  1. Timing vs. music — Early charts felt like a generic falling-block game because notes and sound were not the same piece of data.

Fix: author melody + chords as song data, generate the chart from those beats, and play the same pitches on hit.

  1. Speed that punished instead of taught — First fall times were too fast; playtests bounced off. Fix: raise fallMs, widen windows,

and give Easy a key-guide assist that doesn’t exist on Normal/Hard.

  1. Desktop keys on a phone — A S D F J K L ; is a real layout on a keyboard and nonsense under thumbs. Fix: detect touch UI,

hide key legends, and make the piano the only control.

  1. “Web page” vs “music game” — First UI pass looked like a dashboard. Fix: redo hierarchy

(one Play action, glass stage, logo, less chrome) against the Sakurai “one screen, one job” rules.

  1. Audio without assets — No time for recorded piano or licensed tracks. Fix: Web Audio oscillators, filters,

and delay to fake a soft piano + pad, with three distinct BPM/melody identities.

  1. Fail state missing — Endless songs with only a miss counter didn’t create risk. Fix: five lives, fail overlay,

and fever that dumps on a miss so mistakes cost something.

  1. Scope clock — Skins, recorded audio, and a full song catalog all wanted more hours. Capped at three procedural tracks,

three difficulties, and juice that served the hit.

5. Key Takeaways

My final thought:

A one-day rhythm game only works if the fantasy is tiny and sharp. For NEON KEYS that fantasy was never “a platform with songs.” It was: the note reaches the glow, you press, and it sounds like the song.

Shipping three honest files beat a half-finished “proper” audio engine. The stack stayed invisible so the piano could stay loud.

NEON KEYS: tap Play. Pick a song. Watch the glow. Play along.