Creating a Click Speed Test Game in HTML5

HTML5, combined with the JavaScript programming language, is the perfect solution for making games to reach as many users as possible. The only limit now is the developers’ imagination. In this tutorial, I suggest you create a game where the user will have to click a maximum of times in 10 seconds. This game, named Click Speed Test, with simple rules will allow you to discover how to create your first little game in HTML5 with JavaScript.

No Caption Provided

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:

Writing the logic of the Game in JavaScript

Our Click Speed Test Game looks great. Now, it’s time to write the logic of the game in JavaScript.

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.

One of the most important part of the game is the timer. Indeed, it will make the time progress during the game. We create a timer by using the setInterval function provided by JavaScript in standard. We define a callback function inside the setInterval function which will be called each 1 millisecond.

Inside this callback, we have two possibilities:

  1. 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.
  2. 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:

https://cpstest.org

Once the game is launched, you will see the following display:

No Caption Provided

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.

Start the Conversation