Here’s the final output:
For this program I want users to interact with balls on the screen to check how fast they can click on the ball that randomly appears on the screen.
To control the ball instance, I created a ball.js class in the files and part of the code that I am proud of is
isExpired(now) {
return now - this.bornAt >= this.lifespan;
}
contains(px, py) {
return dist(px, py, this.x, this.y) <= this.r;
}
this code control the ball disappearing time as users will fail to click on the ball if they move their mouse slow.
To control which ball to disappear in a sequential manner, I use array to control the sequence of spawning and disappearing the ball
for (let i = balls.length - 1; i >= 0; i--) {
let b = balls[i];
b.draw();
// remove if expired
if (b.isExpired(now)) {
balls.splice(i, 1);
}
Future Improvements:
I could add a score board somewhere so that user know how they well they perform in this “clicking the ball game.”