You can also discover this tutorial in video on YouTube:
Rules for Click Speed Test Game
Like said in introduction, the rules for Click Speed Test Game are quite simply. The goal for the user will be to click the maximum number of times during 10 seconds. Given that rule, we will need the following thing:
- A click area for letting the user to click a maximum number of times
- A score area in which we will display a timer, the number of clicks and also the number of clicks by seconds of the user updated in real time
- A logo for our game. Obviously, it is optional but it is always better to have a logo visually speaking.
Creating the HTML page
First, we start by creating the HTML page. It will have the following elements:
- An image with the logo of our game
- A div for the score area with 3 span tags for updating the timer, the score and clicks by seconds
- A div for the click area. We add a button inside this div to let the user to start the game when he will click on this button
For improving the rendering of the HTML page, we are going to write some CSS. Nothing out of the ordinary. The main things to remember from the CSS part are as follows:
- The use of the user-select property setted to none for avoiding selection of content when the user will click in the click area.
- The position property of the click area set to relative to let us to center the start button inside it.
- The use of box-shadow property for the start button to customize it in a fancy way.
It gives us the following content for the HTML page with the CSS rules:
At this stage, our Click Speed Test game looks like this:
We define the following variables:
- score to store the current number of clicks made by the user
- duration to define the duration of the game. We set the value to 10 seconds
- startTime to store the start time of the game in milliseconds
- ended which is a boolean indicating if the game is ended or not
Then, we get DOM references for the different HTML elements of our page we will need to update (timer, score, clicks by seconds, …).
Starting the game
Next step is to write the code for the startGame function. This function will be called when the user will start the game by clicking on the start button. Inside it, we hide the start button, we initialize the score and we indicate the game has started by setting the ended variable to false.
Inside this callback, we have two possibilities:
- The timer has reached the duration of the game. If so, we mark the game as ended, we clear the timer by calling the clearInterval function and we call the endGame function.
- The timer has not reached the duration of the game. If so, we update the timer span with the current value of the timer and we update the clicks by seconds span.
It gives us the following code for the startGame function:
Ending the game
When the game is ended, the endGame function is called. In that function, we write final statistics for the score and the clicks by seconds of the current game. Then, we show the start button letting the user to start a new game if he wants. And then, we display an alert message to the user.
It gives us the following code for the endGame function:
Adding Click Event listeners
Last step is to add the Click Event listeners. One is added for the start button letting us to call the startGame function when the user will click on it. The second is added on click area. If the game is started, we update the score by one when the user clicks. And we don’t forget to update the score span with the news score.
It gives us the following code for the adding of the Click Event listeners:
Complete source code for the Click Speed Test Game
Finally, once we have assembled all the parts of the code, we get the following complete code for the Click Speed Test Game:
Our Click Speed Test Game in Action
Best part of the tutorial is there since we are going to play to our Click Speed Test Game! You can play here:
Once the game is launched, you will see the following display:
After 3 or 4 tries, I made a score of 71 clicks:
Do you think you can beat me? Try it :)
To go further
To go further, you could add some additional features to the Click Speed Test Game like:
- Storing of the best score for the local user by using the HTML5 Web Storage API
- A multiplayer version of the game by using the HTML5 WebSocket API
- A global leaderboard for the game by storing the scores in a database on a server and by building a Web API for managing the scores
Like you can see, the possibilites for improving the Click Speed Test Game are various. If you are interested by a new tutorial learning you how to implement one of these additional features, just tell me in comments.