DEV Community

Click Speed Test
Click Speed Test

Posted on • Updated on

Build 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 Game, with simple rules will allow you to discover how to create your first little game in HTML5 with JavaScript.

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:

  1. A click area for letting the user to click a maximum number of times
  2. 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
  3. A logo for our game. Obviously, it is optional but it is always better to have a logo visually speaking.

It gives us the following content for the HTML page with the CSS rules.

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:

<title>Click Speed Game in HTML5</title>
<style type="text/css">
  #content {
    width: 200px;
    border: 1px dashed #dc0000;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    user-select: none;

  #clickarea {
    width: 500px;
    height : 300px;
    border: 2px solid #dc0000;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    position: relative;

  #logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 50px;
    display: block;
    user-select: none;

  #start {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                  rgba(0, 0, 0, .2),
                  rgba(0, 0, 0, .2) 30%,
                  rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);

  #start:hover {
    background-color: rgba(255, 0, 0, 1);

  #start:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
  <img id="logo" src="cursor.png" />
  <div id="content">
    Timer: <span id="timer"></span><br/>
    Score: <span id="score"></span><br/>
    Clicks/s: <span id="clicks"></span>
  <div id="clickarea">
    <button id="start">Start</button>
  <script type="text/javascript">
    var score; // to store the current score
    var duration = 10; // 10 seconds
    var startTime; // start time
    var ended = true; // boolean indicating if game is ended
    // we get DOM References for some HTML elements
    var timerTxt = document.getElementById("timer");
    var scoreTxt = document.getElementById("score");
    var clicksTxt = document.getElementById("clicks");
    var startBtn = document.getElementById("start");
    var clickArea = document.getElementById("clickarea");
    // we define two functions for showing or hiding a HTML element
    var show = function(elem) { = 'inline';
    var hide = function(elem) { = 'none';
    // Method called when the game starts
    function startGame() {
      score = -1;
      ended = false;
      // we get start time
      startTime = new Date().getTime();
      // we create a timer with the setInterval method
      var timerId = setInterval(function() {
        var total = (new Date().getTime() - startTime) / 1000;
        // while total lower than duration, we update timer and the clicks by seconds
        if (total < duration) {
          timerTxt.textContent = total.toFixed(3);
          clicksTxt.textContent = (score / total).toFixed(2);
        } else {
          // otherwise, game is ended, we clear interval and we set game as ended
          ended = true;
          // we call the end game method
      }, 1);
  // end game method
  function endGame() {
    // we write final stats
    var clicsBySeconds = (score / duration).toFixed(2);
    timerTxt.textContent = duration.toFixed(3);
    clicksTxt.textContent = clicsBySeconds;
    // we show start button to play an other game
    // we display result to the user in delayed mode 
    //to update DOM elements just before the alert
    setTimeout(function() {
      alert('You made ' + score + ' clicks in ' + duration + 
      ' seconds. It is ' + clicsBySeconds + 
      ' clicks by seconds. Try again!');
    }, 10);
  // we set a click event listener on the start button
  startBtn.addEventListener("click", function(e) {
  // we add a click event listener on the click area div to update the score when the user will click
  clickArea.addEventListener("click", function(e) {
    if (!ended) {
      scoreTxt.textContent = score;

A similar code is used to create an Kohi Click Test on ClickSpeedTest website.

Top comments (22)

johncutler155 profile image

If I Need a Kohi click like link blew what to change in Html and CSS. There is also a spacebar on that site which is so beautifully designed can you please help me to create the code like that.
Site Url:

iyfer profile image

This code really helped me in building my website. I added it to my site and its working perfectly fine.
here's the link to my site, you can check it over here:
p.s. recommendations and suggestions are always welcome.

lilydaisy00 profile image

A good procedure and step by step explanation. Suggestions always helpe me to create game like how to play airsoft in html5.

meherfatima profile image

wow , i applied this code and had made it working.
I need the drag click test tool and also wants the difference in them?
can i also design the drag test tool like this site?

clicktests profile image

It's Good to see the post.

According to me there are different types of mouse that can make CPS on different type of test.

  1. Click Speed Test
  2. Drag Click Test
  3. Butterfly Click test
  4. Kohi Click test

You can get all test with your real time cps score on

lavaerica1 profile image
Lavellette Erica

Well I need a code for to create plugin for wordpress based site. Just like this
Site Url:
I wand to add Spacebar Counter which counts total number of clicks and also average speed in terms of per second. Also want to create multiple time intervals to test clicking speed. In Addition, also want to share those result directly on Social Media sites like facebook with a single click.

Thanks in anticipation

brettcooperr profile image
Brett Cooper


I was thinking about the above topic and have written some useful tips and detailed guide on how to increase CPS rate.

The guide includes tips on how to improve your speed and accuracy, as well as how to increase your clicks per second rate.

I hope this guide is helpful, and if you have any questions or comments, please let me know.

Thank you!

Sloan, the sloth mascot
Comment deleted
iemmajackson profile image

Can you share any cod for Fm Whatsapp

lavaerica1 profile image
Lavellette Erica • Edited

I have further worked on this code and made a key press counter to count the number of key presses. Here is the URL > Keyboard Counter

kamilanta profile image

Can someone help me getting a code to build a tool like integrated in . Thanking in advance.

sparrowied profile image

i added this code on my site and its working fine check it here Quick Pay Portal

seoagencyindia1 profile image
Digital Marketing Company

Thankyou For Sharing this information. We are very excited about doing this. Thanks again!
CPS Test

cpstest profile image
CPS Test

Well I need a code for to make module for wordpress based game
site. Actually like this code you create a blog.

flaxalex57 profile image
alexif57 • Edited

hi, there are various mouse automation software available in the market today.

apksound profile image

I was able to build my website using this code. Thank you so much for your generous donation. Here's the link to my site APKSOUND