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.

Image for post
Image for post

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:

Creating the HTML page

First, we start by creating the HTML page. It will have the following elements:

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:

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:

Image for post
Image for post
First rendering of our Click Speed Test Game

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:

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:

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://www.ssaurel.com/tmp/clickspeedtest.htm

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

Image for post
Image for post
Click Speed Test Game in Action!

After 3 or 4 tries, I made a score of 71 clicks:

Image for post
Image for post
71 clicks in 10 seconds: Not bad!

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:

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.

Written by

Entrepreneur / Developer / Blogger / Author. In Bitcoin We Trust: https://www.inbitcoinwetrust.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store