So let's get started!
In a really simple sense, we are going to make a game which counts the number of clicks you do in a set time interval and calculates your clicking speed. We will show the clicking speed and total clicks at the end of the game.
The UI will be absolutely basic. There are no shimmering graphics; its just one button and the counters.
Here's the first look.
And, to save the count, we will use a counter whose value increases on every mouse click event. There will be another counter for time. The default time period will be 10s.
The final score will be calculated using the total number of clicks divided by the time and we will display it at the end of the game.
Before we move the actual code, I want to give a small acknowledgement to a tool called Click Test
which inspired this simple game I made for learning purpose.
Creating the Interface
Let us begin by creating a simple page with a headline, a box for counters and a button inside it for clicking. I have used the basic red color for everything but you are free to show your CSS skills and make it fancier.
Next, we need to implement the counter for clicks on the button. A simple JS snippet provided does the magic for this.