Rhythm of Praise

SAMPLE PROJECT / REFERENCE IMPLEMENTATION. Built by the course developer before the term to prove this submission path works. Not student work.

Notes fall down four lanes; hit the key as each reaches the line and the melody plays back under your hands. The song is not an audio file - it is a JSON chart of beats and MIDI note numbers, and the sound is built at run time with the Web Audio API. Changing the tune means editing data, not code.

It is reference project E: the browser-game path without a game engine, showing how far plain HTML, CSS and JavaScript reach when the timing is done properly.

A rhythm game is the shortest route to a hard lesson: the clock. Frame counting drifts against what the player hears, because audio is buffered ahead. This reads its position from the audio hardware instead, so what you see and what you hear cannot come apart.

Anyone who wants to see a rhythm game working, and students looking for a project that is playable in one click.

No difficulty settings. The beat tracker is eighty lines, not a professional one: music without strong percussion detects poorly, and the page says how sure it is rather than presenting a rough guess as fact. A song that changes tempo part way will drift, because one grid is laid over the whole recording. The synthesised melody is a plain triangle wave, so it is clear rather than beautiful. On a phone the four lanes are cramped.

data/chart.json holds the song as beats and MIDI note numbers; game.js turns it into note objects with absolute times once, at the start. The loop is requestAnimationFrame for drawing, but every timing decision reads AudioContext.currentTime - the same clock the notes are scheduled on - so what is drawn and what is heard cannot drift apart. Best score is localStorage, wrapped in try/catch because a private window throws on access.