Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make a basic clicker game!!!
AmoghTheCool (18)

How to make your very own Clicker Game!

Important! I did not copy @Bookie0's clicker tutorial! _If you don't believe me then read the tutorial.

Prerequisities:

  • Basic knowledge of JS (defining variables, operators, for loops, functions, getting HTML elements, etc...)
  • Basic knowledge of CSS (text-align, color, background-color, basic responsive design)
  • Basic knowledge of HTML (basic tags, ids, classes?)
  • comfortable with replit.com

Note: When I type "*", it is a placeholder for whatever your clicker is about (eg. for a pizza clicker, it would be "pizza")

Step 1 - Create a repl

Create a repl and select the language to be HTML, CSS, JS. After that you should see something like this (HTML boilerplate code):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

Step 2 - Getting the HTML ready

First, we need to edit the <title> tag. You could name it whatever you want but for this tutorial I will name it diamond clicker. So now your <title> tag should look something like this: <title>Diamond Clicker</title>.

Then we need to add a <button> element to the <body> tag, before <script src = 'script.js'> </script>. The button's onclick attribute should be set to moreUPC();. UPC means units per click. Set the buttons text (between the start and closing tag) to More * Per Click <br> Cost: 10. Repeat that again but set the buttons text to More * per second <br> Cost: 10 and the onclick to moreUPS(). Set the onload of the <body> element to 'update();'

Lastly, before we start editing the script.js file, we should upload an image of what your clicker is about. This tutorial is about, say, diamonds. So for me, I should upload an image of diamonds and name that u.jpg. (you should name it u.jpg too). Insert an <img> tag with src = 'u.jpg' and id = 'clickericon'. This image is what the user should click. Put the <img> tag before the button elements. After the img tag add three divs:

<div id = 'u'> </div><br>
<div id = 'ups'> </div><br>
<div id = 'upc'> </div><br>

Your HTML code should look something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Diamond Clicker</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <img src = 'u.jpg' id = 'clickericon'> </img>
    
<div id = 'u'> </div> <br>
<div id = 'ups'> </div><br>
<div id = 'upc'> </div><br>
    <button onclick = 'moreUPC();'>More Diamonds Per Click <br>Cost: 10</button>
    <button onclick = 'moreUPS();'>More Diamonds Per Second<br>Cost: 10</button>
    <script src="script.js"></script>
  </body>
</html>

Step 3 - Making the JS

Just copy this code into your script.js file:

let u = 0;
let costOfU = 10;

let ups = 0;
let costOfUps = 10;

let upc = 1;
let costOfUpC = 10;

function update() {

}
update();
function moreUPS() {

}
function moreUPC() {

}
function moreU() {

}
function increasePrice(which) {

}
async function rec() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  u += ups;
  update();
  requestAnimationFrame(rec);
}
rec();

Then we start filling in the bodies of the functions.

increasePrice(which)

So basically what this function does is it increases the price everytime the user clicks a button. First define a variable (with let) called currentPrice though don't set it yet (something like let currentPrice;). Then we need to create conditinal like this:

if (which == "ups") {currentPrice = costOfUps} else if (which == "upc") {currentPrice = costOfUpC;}

Then add a switch conditional (docs for that is here). Add this code, OUT OF THE CONDITIONAL BUT IN THE FUNCTION:

let nexPrice;
switch (currentPrice) {
  case 10: //Minimum Price
    nexPrice = 20;
    break;
  case 20:
    nexPrice = 40;
    break;
  case 40:
    nexPrice = 80;
    break;
  case 80:
    nexPrice = 200;
    break;
  case 200:
    nexPrice = 500;
    break;
  case 500:
    nexPrice = 1000;
    break;
  case 1000:
    nexPrice = 5000;
    break;
  case 5000:
    nexPrice = 10000;
    break;
  case 10000:
    nexPrice = 100000;
    break;
  case 100000:
    break;
}

This just increases the price through a chain. Then, out of the switch, we return nexPrice.

moreUPS()

First we add an if statement into this function. The condition should be (u > costOfUps). Then, if that is true, we increase the ups variable by 10. After that, decrease the u variable by costOfUps. Then, (still in the if statement), we set costOfUps to increasePrice('ups');and then call update().

moreUPC()

First we add an if statement into this function. The condition should be (u > costOfUpC). Then, if that is true, we increase the upc variable by 10. After that, decrease the u variable by costOfUpC. Then, (still in the if statement), we set costOfUpC to increasePrice('upc');and then call update().

update()

put this code in:

document.getElementById('u').innerHTML = "* "+u.toString();

document.getElementById('ups').innerHTML = "* per second"+ups.toString();

document.getElementById('upc').innerHTML = "* per click" + upc.toString();

moreU()

This is the last function to define in the script.js file. In this function we will just be increasing the u variable by upc and then call update(). No conditionals.

Adding the event listener for more *s.

First we get the <img> element, the one whose id = 'clickericon' using document.getElementById('clickericon'). After that we have to call the moreU() function when the img is clicked. We do that by calling the addEventListener() function and pass in "click" and moreU do this without invoking the moreU function. It should look like document.getElementById('clickericon').addEventListener('click', moreU).

No!! We're not done yet! or maybe you are

Step 4 - CSS:

All I'm gonna do is set text-align: center and background-color: black and color: white for body.

Thanks for reading! or scrolling down here

Comments
hotnewtop
DillonB07 (25)

Hey, just a tip for formatting your tutorial in Markdown.

Instead of writing code blocks like this:

    ```
    <title>Hallo!</title>
    ```

Output:

<title>Hallo!</title>

You should do something like this:

    ```html
    <title>Hallo!</title>
    ```

Output:

<title>Hallo!</title>

Just a tip to make it look nicer as it formats the code. For JavaScript, you can use js.