Updated date:

How to Make a Clicker Game in Html

CyberBotMachines - teaching you how to speed up your programming career!

TL;DR Summary

If you want to know how to make a clicker game in HTML then you're on the right place.

All you need to do is 2 things:

  1. detect some HTML element was clicked (presumably button)
  2. increase total number of clicks you have in your total count element

Here is how the end result looks like:

photo - https://www.cyberbotmachines.com/hubpages-photo-clicker-game

photo - https://www.cyberbotmachines.com/hubpages-photo-clicker-game

And here is the code that produced this simple clicker game in HTML:

<style>
  body { 
    background-color: powderblue; 
    font-size: 30px;
    text-align: center;
  }
  #button {
    width: 200px;
    height: 200px;
    background-color: blue;
    border-radius: 100px;
    margin: 0 auto;
    line-height: 200px;
    user-select: none;
    margin-top: 100px;
  }
  #score {
    margin-top: 50px;
    font-size: 60px;
    font-weight: bold;
    color: green;
  }
</style>

<div id="score">0</div>
<div id="button">CLICK ME</div>

<script>
  let counter = 0;
  
  document.getElementById('button').onclick = () => {
    counter = counter + 1;
    document.getElementById('score').innerText = counter;
  };
</script>

In short that is it.

More Details

So how did we get to this final code? And how does each part work in order to produce this simple clicker game?

If you're interested in finding out - keep reading.

First thing that we created were two elements:

  1. one div that is going to be used to display number of clicks
  2. and the second div that is going to be used as a button

(and I added some basic styling so it looks a bit better)

<style>
  body { 
    background-color: powderblue; 
    font-size: 30px;
  }
</style>

<div id="score">0</div>
<div id="button">CLICK ME</div>

This is how it looks like:

how-to-make-a-clicker-game-in-html

Even though it says "CLICK ME", it doesn't do anything really.

What we need to do is add some JavaScript code that will detect the element was clicked.

document.getElementById('button').onclick = () => {
  // do something here
};

Let's explain this entire code first:

  • document - represents entire HTML page - you can access everything through it
  • getElementById - function used to select the element you want
  • onclick - here you can define what happens when the element is clicked
  • () => {} - this is a function that will be run on click and we can make it do anything

So what would we want to do inside this function?

Maybe we would like to increase the number of clicks by 1. And after that we might want to update our screen/browser to show this new value.

<style>
  body { 
    background-color: powderblue; 
    font-size: 30px;
  }
</style>

<div id="score">0</div>
<div id="button">CLICK ME</div>

<script>
  let counter = 0;
  
  document.getElementById('button').onclick = () => {
    counter = counter + 1;
    document.getElementById('score').innerText = counter;
  };
</script>

And now we have fully working clicker game in HTML.

What we did was we declared a variable called counter in which we will store our number of clicks. We started with zero.

Only piece of code that might look unfamiliar is innerText and this represents the text in our score element. Basically each time we click on the button we set new value into our score.

And now the game looks like this:

how-to-make-a-clicker-game-in-html

As you can see it looks exactly the same as before.

Only difference now is that it works :)

All we're left to do now is to add CSS and make it more pretty.

  body { 
    background-color: powderblue; 
    font-size: 30px;
    text-align: center;
  }
  #button {
    width: 200px;
    height: 200px;
    background-color: blue;
    border-radius: 100px;
    margin: 0 auto;
    line-height: 200px;
    user-select: none;
    margin-top: 100px;
  }
  #score {
    margin-top: 50px;
    font-size: 60px;
    font-weight: bold;
    color: green;
  }

Some explanations for the CSS code...

To make a circle shaped button we use border-radius: 100px; which is exactly half of its width and height.

To center this entire element in the middle of the page we use margin: 0 auto;

Since we're going to be clicking on the button like crazy - the button text is likely going to be highlighted since the browser is thinking we're trying to select a piece of text. To prevent this we can use user-select: none;

line-height: 200px; is a nice little trick that can be used to center text inside the button vertically. Basically what you do is set the line-height to match the height of the element and that will make sure the text is vertically centered.

And this is really all there is to knowing how to make a clicker game in HTML.

Until next time,
Will

Related Articles