How to Create a Click Test Game using HTML & JAVASCRIPT
Published: 2021-01-06 12:00:50

HTML and Javascript is the best combination for developers to develop games. By using these two languages developers can reach as many users as they can. 

In this tutorial, I'm going to make a <a href="https://clickingspeedtester.com">click speed test</a> game using HTML,CSS and Javascript. 

This is just a simple game in which users can hit their mouse for 10 seconds and can check their mouse-clicking speed easily. 

The best part of this click speed tester is that at the end of the game it will show you your cps ( clicks per second) ratio. 

<H2> Some Rules for Click Test game </H2>
I already told you that this is going to be a really simple game with just one or two rules. Players will have 10 seconds to make the clicks. They can make the clicks as much as they can. Let's find out some rules

<li>There will be a specific click area for users to make unlimited clicks</li>

<li>The total number of clicks, click speed by second, and timer will be displayed on the screen of the user</li>

<li>Also if you want to display the logo you can also show that to the user</li>

<H2>First We will create the HTML page</H2>
Our first step would be to create the HTML page. It is a really simple and easy way to do that. Lets found out what things we will create on this HTML page

<li>First we will create an image with our logo</li>

<li> We will create the scoring area with three tags timer, score, and the click speed</li>

<li>We will create the start button inside the div. It will allow the users to start the game</li>

{% gist https://gist.github.com/ssaurel/2c50afd601abe11205465ccfadffefa9 %}

 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oueilyfxywwnzuv543xg.png)

After that, your game will look like this. Keep in mind this is just the first part we have to make it complete. Now we will create the javascript file and we will add the following thing.

**Score:**First we will create the score variable in java to store the score. 

**Duration:**We will create it to store the time limit. 

**Start time and Endtime:** Last we create a variable to store the start and end time. 

<H2>To start the game</H2> 
Now we will create the code to start the game. When the user click on the start button it will disappear and the score will be initialized in this part of the game. 

{% gist https://gist.github.com/ssaurel/28f09d5589d511566a42d34d52e642d0 %}

<H2>Ending Notification</H2> 
As the game will stop the final result will display to users. It will contain the clicks, time taken, and the clicks per second. 
{% gist https://gist.github.com/ssaurel/1ed29635c49f247cb8764ff4d5805581 %}
<H2>Final Step</H2>
The final and last step is to add the listener. We will add the click event listener and the click area, listener. So if the user wants to try the test again they can easily try this click speed test. 

{% gist https://gist.github.com/ssaurel/1e0402e413af74b64c094b9104b960ad %}
After coding all this thing. This is how click speed test game will look. You can modify it according to your choice. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zxaogpxy1mdg7vvot810.png)