Rhythm Game
February 19, 2022
TypeScript
Angular
HTML5 Canvas
WebGame
Arcade
Overview
Rhythm Game is a rhythm-based web game where players press keys in sync with falling notes to match the beat of a song. Built as a weekend prototype, the game captures the core mechanics of classic rhythm games using modern web technologies.
The demo features League of Legends art and music, but all assets — including the audio, visuals, and beat map — are modular and easy to replace.
To play, press the Play button and use the following keys:
A
S
D
F
Space
J
K
L
;
How It Works
- A beat map is generated by recording key press timings relative to the music.
- These timestamps determine when each visual note should reach its target.
- During gameplay, the system compares the user’s inputs to the note positions in real time.
- Scoring is based on timing precision — ranging from Miss to Perfect.
Additional Features & Ideas
While the core mechanics are in place, there are plenty of ways the game could be expanded:
- 🧠 Audio-driven beat map generation for user-submitted tracks
- ⚡ Frame-accurate timing synced directly with the music’s waveform
- 🎨 Note streak animations, combo effects, and visual polish
- 🆚 Multiplayer mode with real-time score tracking
- 🎵 Custom track importer with drag-and-drop or file uploads
- 📈 Progression system with score history, difficulty levels, and achievements
Demo
▶️ Play Rhythm Game
Source
📁 View Source on GitHub