SO.Sherlyn Olalo, home
All projects

Web Apps

Rhythm Game

A four-lane browser rhythm game with tap and hold notes, combos and letter grades, built from scratch with no engine and no framework.

The four-lane rhythm game mid-song, showing falling arrow notes, the combo multiplier, the health bar and the retro CRT scan-line treatment.

Year

2025

Role

Game Developer

Client

Lifewood internship

Stack

HTML, CSS, JavaScript, Web Audio API, localStorage

Internship project, no public deployment.

01

The problem

I wanted my internship project to be something I'd actually want to play, not just a demo. Rhythm games look simple from the outside, but a lot of small details have to feel right before it becomes fun. The goal was to build one from scratch with no game engine and no framework, just the browser.

02

What I built

A full rhythm game you can open straight from a browser. Four lanes mapped to arrow keys, tap and hold notes, three difficulties, and a scoring system with combos and S-to-F grades. Notes are pure CSS shapes rather than images, the UI scales to any screen, and a demo mode plays in the background of the song select. High scores save locally, and it works on mobile too.

Where the craft went

  • No-framework approach

    Every game loop, collision check and animation is hand-written JavaScript, giving complete control over timing and feel.

  • CSS-based visuals

    Notes, lanes and UI elements are pure CSS, keeping the game lightweight and scalable to any resolution.

  • Persistent local state

    localStorage keeps high scores between sessions without requiring a backend.

The stack was intentionally minimal: Web Audio API for precise note timing, localStorage for persistence, vanilla JavaScript for the game loop.

03

What I learned

Game feel lives in the small things: the pulse before a note lands, the burst when you hit a perfect, the combo number growing as you chain hits. None of that is gameplay on its own, but the game feels flat without it. I also learned that working with no libraries pushes you to think more carefully about timing, structure, and what is really needed. Limits can make you more creative, not less.