DEV Community

ClickSpeed
ClickSpeed

Posted on

Build And Design a Click Speed Test Game Using HTMl & CSS

HTML5 together in conjunction with JavaScript programming language is the ideal solution for allowing games to reach the maximum number of users. The only limitation is the developer's imagination. In this article, I'll suggest that you design an online game in which the player must hit a maximum number of times within 5 seconds. This game, called "Click Speed Test Game", with simple rules, will enable you to learn how to make your very first tiny game in HTML5 using JavaScript.

The rules to be followed for Click Speed Test Game

In the Introduction, the rules for Click Speed Test Game are very simple. The objective for players is to press the most number of times within 10 minutes. In the context of this rule, we'll require to know:

  1. A click area that allows users hit a maximum number of times.
  2. A score zone in which we will show an hourly timer, the number of clicks as well as how many clicks per second of the person. This will be updated in real-time.
  3. The logo we use for our games. Naturally, it's not mandatory however it is always more effective for having a brand graphically and visually.

It provides us with the following information on this HTML web page that follows CSS rules. CSS rules.

The Complete Source Code of Click Speed Test Game. Best CPS Test Game:

Once we've put together all the components that make up the code, you will have the code that is complete that will be used in 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;
    color:#ffffff;
  }

  #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 style="background-color:#000000;">
  <img id="logo" src="https://theclickspeed.com/wp-content/uploads/2022/02/NewTheClickSpeed-512-x-300.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 = 5; // 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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)