Learn to Code via Tutorials on Repl.it!

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

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

<img src=’emoji1.png’ onclick=’clicked()’ width=’300px’ height=’300px’/>

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

<h1 id=’score’>Score: 0<h1>

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.

<div id=’upgrades’>
  <button onclick=’upgrade()’>Upgrade Score Per Click -- 100</button>
  <button onclick=’upgrade_cps()’>Upgrade Score Per Click – 120</button>
</div>

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

//Variables
let score = 0
let spc = 1;
let cps = 0

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

//got_clicked Function
function got_clicked(){
  console.log("Got Clicked")
  score += spc;
  document.getElementById('score').innerHTML = "Score: " + score;
}

Then we’ll do the upgrade functions

//upgrade function
function upgrade(){
  //check is user has enough points
  if (score >= 100) {
    spc ++;
    //now take their money
    score -= 100;
    //Now display how much money they have
    document.getElementById('score').innerHTML = "Score: " + score;
  }
}
//upgrade clicks per second function
function upgrade_cps(){
  //check for user points
  if (score >= 120) {
    cps ++;
    score -= 120;
    //make sure to display the new score
    document.getElementById('score').innerHTML = 'Score: ' + score;
  }
}

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:

//Set Interval function
setInterval(function(){
  //cps to score
  score += cps;
  //now display that
  document.getElementById('score').innerHTML = "Score: " + score;
}, 1000)

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:

body {
  background-color: aliceblue;
  /* Never have a plain white background... its just wrong */
  text-align: center;
}
h1 {
  /* Comic Sans MS becuase it is my favorite font */
  font-family: Comic Sans MS;
}
button {
  padding: 5px 5px;
  margin: 3px 3px;
  background-image: linear-gradient(yellow, gold);
  font-family: impact;
  font-size: 15px;
  border: 3px solid white;
  border-radius: 15px;
}
button:hover {
  padding: 6px 6px;
  color: grey;
}
img {
  animation: pulse 1.5s infinite;
  border-radius: 50%;
}
/* Some cool animation to make it look a bit better */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(248, 245, 52, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(196, 196, 195, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

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!

Comments
hotnewtop
ComputingSquid (47)

when i tried it, it outputed an error saying:

at /script.js:40:12
TypeError:
document.getElementById(...) is null
@/script.js:40:12
InvisibleOne (2931)

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