The best of learning something is by implementing it especially when you are a beginner. In this post, I am sharing how I made a simple mouse clicking game using HTML5 and JS. It will help you understand the basic concepts of Javascript such as event handling and counters.
Before I start anything, let me be very clear about the fact that this post has almost nothing for the people who already know the basics of Javascript. I am writing this out just from the beginner’s point of view.
So let's get started!
The Aim
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.
The Logic
As mentioned, we need to count the number of clicks made by the user. So, we will add an Event Listener using Javascript to check if the mouse button is clicked inside the button area.
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.
