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:

<html>
<head>
<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);
  }
</style>
</head>
<body>
  <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>
  <div id="clickarea">
    <button id="start">Start</button>
  </div>
  <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) {
      elem.style.display = 'inline';
    };
    var hide = function(elem) {
      elem.style.display = 'none';
    };
    // Method called when the game starts
    function startGame() {
      hide(startBtn);
      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;
          clearInterval(timerId);
          // we call the end game method
          endGame();
        }
      }, 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
    show(startBtn);
    // 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) {
    startGame();
  });
  // 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) {
      score++;
      scoreTxt.textContent = score;
    }
  });
</script>
</body>
</html>

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

Top comments (19)

Collapse
 
johncutler155 profile image
johndoe

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: clickspeeder.com/kohi-click-test/

Collapse
 
iyfer profile image
iyfer

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:
spacebarcounter.info/spacebar-coun...
p.s. recommendations and suggestions are always welcome.

Collapse
 
lilydaisy00 profile image
lilydaisy00

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

Collapse
 
meherfatima profile image
meherfatima

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?
url: cpsandtypingtest.com/jitter-speed-...

Collapse
 
lavaerica1 profile image
Lavellette Erica

Well I need a code for to create plugin for wordpress based site. Just like this
Site Url: cpstest.us/spacebar-counter/
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

Collapse
 
clicktests profile image
Pankaj Kumar • Edited

It's Good to see the post.

According to me, different types of mice can make CPS on different types of tests.

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

You can get all tests with your real-time clickspersecond.com.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
brettcooperr profile image
Brett Cooper

Hello,

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!

Collapse
 
iemmajackson profile image
iemmajackson

Can you share any cod for Fm Whatsapp

Collapse
 
seoagencyindia1 profile image
Digital Marketing Company

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

Collapse
 
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