How to make a simple Mouse Click Test Game using HTML & JAVASCRIPT

Making a game in HTML & CSS is the favorite thing for developers. By using these two languages developers can make any game.

In this tutorial, I'm going to teach you how you can make a mouse click test game using HTML and javascript. It is going to be a very simple tutorial.

If you are a beginner to HTML and CSS still you can learn from this tutorial. I'm going to make this tutorial very simple so everyone could get knowledge.

What does this game do?

The main function of this game is to calculate the clicks. Most gamers use this simple game to test and improve their mouse-clicking speed.

As you know in some games you have to hit your mouse hard to compete with your competitor. So gamers try this test to get better at clicking.

Here is how the game will look after completion. It has a simple interface so anyone can play it easily.

Purpose of Game

Now a question comes what is the purpose of this game? Let me explain to you the purpose of this game. The main purpose of playing this game to improve the click speed and to calculate your mouse click speed in one second.

Click Test is a simple game to calculate clicks you make per second. At the end of the game, it shows how many clicks you make in one second. Sometimes speed depends on the mouse. So if you have a good mouse your speed should be good.

Creating the Game

Now first of all we create the interface of the game. In which the game will start and the timer will begin as the user press the start button.

After pressing the start button, the start button will disappear from the screen and the game will start with the timer will begin.

function startGame() {
// To hide the button
  hide(startBtn);
  score = -1;
  ended = false;
  // Start time
  startTime = new Date().getTime();

  // Time Setup
  var timerId = setInterval(function() {
    var total = (new Date().getTime() - startTime) / 1000;

The next purpose of our would-be to start the game. In this part, the clicks will start counting as the user hits the mouse button.

Every time he hits the mouse his clicks will increase and it will display the increasing clicks on the screen in the clicks section.

function startGame() {

  hide(startBtn);
  score = -1;
  ended = false;

  startTime = new Date().getTime();


  var timerId = setInterval(function() {
    var total = (new Date().getTime() - startTime) / 1000;

   
    if (total < duration) {
      timerTxt.textContent = total.toFixed(3);
      clicksTxt.textContent = (score / total).toFixed(2);
    } else {
  
      ended = true;
      clearInterval(timerId);
   
      endGame();
    }
  }, 1);
}

Now after that, we will proceed towards the end of the game. As time will over the end notification display on the screen of the user.

The end notification will show the information about the cps ( clicks per second), time, and the total number of clicks the user made.

unction endGame() {

  var clicsBySeconds = (score / duration).toFixed(2);
  timerTxt.textContent = duration.toFixed(3);
  clicksTxt.textContent = clicsBySeconds;

  show(startBtn);
  setTimeout(function() {
     alert('You made ' + score + ' clicks in ' + duration + 
           ' seconds. It is ' + clicsBySeconds + ' clicks by seconds. Try again!');
  }, 10);
}

Final Words

Thank you for reading this simple tutorial. You can also improve this code according to your choice.

I have some more ideas to make this game better. We can improve the end notification of the game as well. We can add some pictures and some quotes at the end of the game.

Tags:
Click game, java game

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.