What Happens On Click
On click, I wanted to change the position of the ball to a random location on the DOM. For this I used the Math().random function and I generated a random number between 20 and 80. I then rounded those values down to whole numbers, and assigned those numbers to ball.style.top and ball.style.left. I used view height and view width to make it fully responsive so it would work on a phone. I also increased the score every time the ball was clicked, decreased the size of the ball to make increase the difficulty, and added time to the timer.
Setting the Timer
The timer was created using the setInterval function which fired every 100 milliseconds. If the timer ever equaled 1 then the lost() function fired, else it decremented the timer. Every time the ball was clicked six units of time were added to the timer. This is what makes it important to click the ball as fast as possible.
What Happens When you Lose
When the lost() function fires it makes the ball unclickable and changes it to a fixed position in the center of the screen. It also massively increases the size of the ball and displays the user’s score inside of the ball. Also, the timer and score keeper fade out. All this stuff happens using CSS and JS animations to make it all smooth and pretty.