Creating Click Speed Test Game in HTML5

HTML5 is new coding language, which is best solution for making beautiful games. And Google chrome is going to shutdown flash games, so HTML5 will be key here. I would love to share a way to create such click game, and its up to your limit how you use it. The Click Speed Test Game is simple game to allow users to click within 10 seconds and check their speed. Using JavaScript and HTML5 we can create more interesting games.

Code needed for Click Speed test Game

We have to keep in mind few things before we start making Click speed test game. The users have to clicks within specific time and these things we need to set up.

A boxed area for users to Click for testing.
Real time scoring area to show Clicks within seconds.
Result Area to show their scores.
A logo for game website.

Sorce code for Click speed test Game

The game contain HTML and Javascrpit coding, so we have created a full coding list here to create Click Speed Test Game.

<html>
<head>
<title>Click Speed Game</title>
<style type="text/css">
  #page {
    width: 250px;
    border: 1px dashed #dc0000;
    font-size: 23px;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    padding: 23px;
    user-select: none;
  }

  #clickingbox {
    width: 70%;
    height : 340px;
    border: 2px solid #dc0000;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    margin-top: 45px;
    padding: 22px;
    position: relative;
  }

  #textlogo {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    margin-top: 50px;
    display: block;
    user-select: none;
  }

  #play {
    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);
  }

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

  #play: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="textlogo" src="cursor.png" />
  <div id="page">
    Timer: <span id="timer"></span><br/>
    Score: <span id="score"></span><br/>
    Clicks/s: <span id="clicks"></span>
  </div>
  <div id="clickingbox">
    <button id="play">Start</button>
  </div>
  <script type="text/javascript">
    var score; // to store the current score
    var duration = 10; // 10 seconds
    var playTime; // 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 playBtn = document.getElementById("play");
    var clickArea = document.getElementById("clickingbox");
    // 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 playGame() {
      hide(playBtn);
      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(playBtn);
    // 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
  playBtn.addEventListener("click", function(e) {
    playGame();
  });
  // 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>

Kohi click test is also created by similar coding on ClickSpeedtest website .info.

Blog

Creating Click Speed Test Game in HTML5

Click speed test

Code needed for Click Speed test Game

Sorce code for Click speed test Game

Join Our Newsletter. No Spam, Only the good stuff.

Related