A fun little browser game where you pop bubbles to train your mouse accuracy and reaction time. It also tracks your stats and shows you charts of how you're improving. Built entirely in vanilla JavaScript!
View on GitHubBubbles pop up around the screen and you try to click them as fast and accurately as you can. It gets progressively harder as you get better, so there's always a challenge.
After each round you get charts showing your accuracy, reaction times, and how consistent you are. It's cool to watch yourself get faster over multiple sessions.
I kept the design minimal on purpose. No distractions, just you and the bubbles. Works on any screen size too.
Built the whole game on HTML5 Canvas with a custom 60 FPS loop, collision detection, and particle effects when you pop a bubble. No libraries, just vanilla JS.
I added linear regression to plot your improvement over time, and Pearson correlation to see if clicking faster makes you less accurate (spoiler: it usually does).
The app calculates accuracy, average reaction time, how consistent your clicks are, and even detects when you start getting tired based on performance drops later in the session.
Getting the rendering to stay buttery smooth while tracking dozens of bubbles and particle effects took some work. The trick was being smart about what gets drawn each frame.
Each bubble is a circle, so the collision math is straightforward (distance from center). I also track where your misses land to generate a heatmap of your click patterns.
Every click, miss, and reaction time gets recorded with timestamps and coordinates. This is what powers all the charts and trend analysis after each session.