Learn to Code via Tutorials on Repl.it!

← Back to all posts
Build a Simple Clicker in less then half an hour
h
InvisibleOne

Simple Clicker Game

HTML

First things first, we’ll do the html. Start by created an image tag, this will be what the player clicks

Now, we’ll need to display the score, since it is important we’ll use an h1 header

Then we’ll add some upgrade buttons. They’ll just be simple, one will upgrade the amount of points you get per click, and the other will upgrade the amount of points you get per second.

There we go, the easy part is done.

JavaScript

Now we’ll go to the js. The first thing that we need to do is declare some variables

Now we need to add to the score when we click the picture, we’ll do that with this function

Then we’ll do the upgrade functions

Ok, now we can upgrade our points per click and our clicks per second. There’s only one issue, we are getting any more points per second. Right now, the cps upgrade does nothing.
We need to create a set interval function first, like so:

Every 1 second this function will update our score. Everything should be working. It’s time to make things look a bit better.

CSS

You can style your game however you want, this is how I styled mine:

So there you have it, a simple clicker game that can be made in under half an hour. If you want to get move complicated you can add more upgrades, or set the prices to slowly increase.
Happy Coding!

Voters
WidarKonrad
DannyOhaya
DaniyomBokre
ComputingSquid
InvisibleOne
Comments
hotnewtop
ComputingSquid

when i tried it, it outputed an error saying:

InvisibleOne

hmm, make sure the your id in the html is 'score' @ComputingSquid