Rhythm Game

Published: February 19, 2022 ยท Last updated: August 1, 2025

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