Back to Snippets

Clicker Snippet.

This code builds a simple clicker game that counts how many times a button is clicked. It's a minimal example that demonstrates DOM updates and event handling using JavaScript.
How to Use?
Include the HTML for the clickable button and counter display, style it with CSS if desired, and link the JavaScript code. Every click increases the counter value in real-time — no external libraries required.
Credits
Inspired by beginner-friendly clicker game tutorials to teach state tracking and dynamic DOM manipulation using JavaScript.

<html>
<title>Clicker Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<body onbeforeunload="return closingCode()">
  <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
  <div class='topbar'>
    <a href='http://leemlam.github.io'>Clicker Clicker</a>
  </div>
    <center class='center'>
      <h1 id='total'>LB: 0</h1>
      <h5 id="click" style="font-family:trebuchet MS;">LB/click: 1 | LB/sec: 0</h5>
      <img class="round" src="https:
      <br><br>
      <button id='upgrade' class="round" onclick='upgrade("upgrade")' style="font-family:courier;">0-main upgrade: 15</button>
      <br><br>
      <button id='cat' class="round" onclick='upgrade("clicker cat")' style="font-family:courier;">0-clicker cat: 25 | +1/sec</button>
      <br><br>
      <button id='worker' class="round" onclick='upgrade("worker")' style="font-family:courier;">0-worker: 250 | +15/sec</button><br><br>
      <button class="settings" onclick="save()">Save</button>
      <button class="settings" onclick="load()">Load</button>
      <button class="settings" onclick="reset()">Reset</button><br><br>
    </center>
  </link>
</body>
</meta>

</html>

body {
  margin:0px;
}
.center {
  margin: 40px;
}
.topbar{
  overflow: hidden;
  background: #C8CBD0;
  box-shadow: 0px 4px 0 0 #4D5259;
}

.topbar a {
  background: #748E54;
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  box-shadow: 4px 0px 0 0 #54673C;
}

.topbar a:hover {
  background-color: #92AC72;
  color: black;
}

.topbar a.active {
  background-color: #4CAF50;
  color: white;
}

.round{
  font-size: 12px;
  color: #4D5259;
  line-height: 1.5;
  font-weight: bold;
  padding: .5em 2em;
  background: #FFFFFF;
  border: 2px solid #4D5259;
  box-shadow: 4px 4px 0 0 #4D5259;
  border-radius: 100px;
  outline:0;
  transition: ease all .1s;
} 
.round:active {
  transform: translateY(4px) translateX(4px);
  box-shadow: 0px 0px 0 0 #4D5259;
}
.round:hover {
  background: #d3d3d3;
}

.settings {
  font-size: 10px;
  color: #4D5259;
  line-height: 1.5;
  font-weight: bold;
  padding: .5em 2em;
  background: #FFFFFF;
  border: 2px solid #4D5259;
  box-shadow: 4px 4px 0 0 #4D5259;
  outline:0;
}

.settings:active {
  transform: translateY(4px) translateX(4px);
  box-shadow: 0px 0px 0 0 #4D5259;
}
.settings:hover {
  background: #d3d3d3;
}

money = 0;
moneyup = 1;
msec = 0;
upcost = 15;
catcost = 25;
workercost = 250;
upown = 0;
catown = 0;
workerown = 0;
catadd = 1;
workadd = 15;
cboost = 1;
wboost = 1;
catmax = 0;
workmax = 0;

function closingCode() {
  if (confirm("You have closed the window, would you like to save?") === true) {
    save();
    return null;
  }
}

function addcomma(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

function reloadall() {
  document.getElementById("click").innerHTML =
    "LB/click: " + addcomma(moneyup) + " | LB/sec: " + addcomma(msec);
  document.getElementById("total").innerHTML = "LB: " + addcomma(money);
  document.getElementById("cat").innerHTML =
    catown + "-clicker cat: " + addcomma(catcost) + " | +" + addcomma(catadd) + "/sec";
  document.getElementById("worker").innerHTML =
    workerown + "-worker: " + addcomma(workercost) + " | +" + addcomma(workadd) + "/sec";
  document.getElementById("upgrade").innerHTML =
    addcomma(upown) + "-main upgrade: " + addcomma(upcost);
}

function save() {
  localStorage.setItem("money", money);
  localStorage.setItem("moneyup", moneyup);
  localStorage.setItem("msec", msec);
  localStorage.setItem("upcost", upcost);
  localStorage.setItem("catcost", catcost);
  localStorage.setItem("catadd", catadd);
  localStorage.setItem("workercost", workercost);
  localStorage.setItem("workadd", workadd);
  localStorage.setItem("catown", catown);
  localStorage.setItem("workerown", workerown);
  localStorage.setItem("upown", upown);
  localStorage.setItem("catadd", catadd);
  localStorage.setItem("workadd", workadd);
  localStorage.setItem("cboost", cboost);
  localStorage.setItem("wboost", wboost);
  localStorage.setItem("catmax", catmax);
  localStorage.setItem("workmax", workmax);
}

function load() {
  money = parseInt(localStorage.getItem("money"));
  moneyup = parseInt(localStorage.getItem("moneyup"));
  msec = parseInt(localStorage.getItem("msec"));
  upcost = parseInt(localStorage.getItem("upcost"));
  catcost = parseInt(localStorage.getItem("catcost"));
  upown = parseInt(localStorage.getItem("catadd"));
  workercost = parseInt(localStorage.getItem("workercost"));
  upown = parseInt(localStorage.getItem("workadd"));
  catown = parseInt(localStorage.getItem("catown"));
  workerown = parseInt(localStorage.getItem("workerown"));
  upown = parseInt(localStorage.getItem("upown"));
  catadd = parseInt(localStorage.getItem("catadd"));
  workadd = parseInt(localStorage.getItem("workadd"));
  cboost = parseInt(localStorage.getItem("cboost"));
  wboost = parseInt(localStorage.getItem("wboost"));
  catmax = parseInt(localStorage.getItem("catmax"));
  workmax = parseInt(localStorage.getItem("workmax"));

  reloadall();
}

function reset() {
  if (confirm("Are you sure you want to reset?") === true) {
    money = 0;
    moneyup = 1;
    msec = 0;
    upcost = 15;
    catcost = 25;
    workercost = 250;
    catown = 0;
    workerown = 0;
    upown = 0;
    catadd = 1;
    workadd = 15;
    reloadall();
  }
}

function myTimer() {
    money += msec;
  document.getElementById("total").innerHTML = "LB: " + addcomma(money);
}
setInterval(myTimer, 1000);

function clicked() {
  money += moneyup;
  document.getElementById("total").innerHTML = "LB: " + addcomma(money);
}

function upgrade(name) {
  if (name == "clicker cat") {
    if (money >= catcost && catown < 50) {

      if (catown <= 13) {
        msec += catadd;
        catadd++;
        cboost = 1;
      } else if (catown == 14) {
        msec += catadd;
        catadd++;
        cboost = 200;
      } else if (catown <= 23) {
        msec += 200 * catadd;
        catadd++;
        cboost = 200;
      } else if (catown == 24) {
        msec += 200 * catadd;
        catadd++;
        cboost = 5000;
      } else if (catown <= 48) {
        msec += 5000 * catadd;
        catadd++;
        cboost = 5000;
      } else if (catown == 49) {
        msec += 5000 * catadd;
        catadd++;
        cboost = 15000;
      } else {
        msec += 15000 * catadd;
        catadd++;
        cboost = 15000;
      }
      catown += 1;
      money -= catcost;
      catcost = catcost * 2;
      document.getElementById("cat").innerHTML =
        catown + "-clicker cat: " + addcomma(catcost) + " | +" + addcomma(catadd * cboost) + "/sec";
    } else if (catown == 50) {
      document.getElementById("cat").innerHTML =
        catown + "-clicker cat: MAX | +15% click/sec";
    }
  }

  if (name == "worker") {
    if (money >= workercost && workerown < 50) {

      if (workerown <= 13) {
        msec += workadd;
        workadd++;
        wboost = 1;
      } else if (workerown == 14) {
        msec += workadd;
        workadd++;
        wboost = 200;
      } else if (workerown <= 23) {
        msec += 200 * workadd;
        workadd++;
        wboost = 200;
      } else if (workerown == 24) {
        msec += 200 * workadd;
        workadd++;
        wboost = 5000;
      } else if (workerown <= 48) {
        msec += 5000 * workadd;
        workadd++;
        wboost = 5000;
      } else if (workerown == 49) {
        msec += 5000 * workadd;
        workadd++;
        wboost = 15000;
      } else {
        msec += 15000 * workadd;
        workadd++;
        wboost = 15000;
      }
      workerown += 1;
      money -= workercost;
      workercost = workercost * 3;
      document.getElementById("worker").innerHTML = 
        workerown + "-worker: " + addcomma(workercost) + " | +" + addcomma(workadd * wboost) + "/sec";
    } else if (workerown == 50) {
      document.getElementById("worker").innerHTML =
        workerown + "-worker: MAX | +35% click/sec";
    }
  }

  if (name == "upgrade") {
    if (money >= upcost) {
      moneyup += upcost / 15;
      money -= upcost;
      upown += 1;
      upcost = upcost * 5;
      document.getElementById("upgrade").innerHTML =
        addcomma(upown) + "-main upgrade: " + addcomma(upcost);
      if (catown == 50) {
        msec -= catmax;
        catmax = Math.floor(moneyup * 0.15);
        msec += catmax;
      }
      if (workerown == 50) {
        msec -= workmax;
        workmax = Math.floor(moneyup * 0.35);
        msec += workmax;
      }
    }
  }

  document.getElementById("click").innerHTML =
    "LB/click: " + addcomma(moneyup) + " | LB/sec: " + addcomma(msec);
  document.getElementById("total").innerHTML = "LB: " + addcomma(money);
}

$nomention
$onlyIf[$guildID!=;]
$allowUserMentions[]
$reply

$if[$message==]
Usage: !buy {item} {amount}

$else

$var[price1;$multi[1000;$message[2;amount]]]
$var[price2;$multi[5000;$message[2;amount]]]
$var[price3;$multi[10000;$message[2;amount]]]
$c[add more price variables as you add more items and the number inside multi is the actual price btw]

$if[$toLowercase[$message[1;item]==item1]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price1];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item 1(s).]
$color[#2F3136]

$setVar[item1;$sum[$getVar[item1;$authorID];$message[2;amount]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price1]];$authorID]

$elseif[$toLowercase[$message[1;item]==item2]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price2];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item2(s).]
$color[#2F3136]

$var[temp-item2;$multi[$message[2;amount];2]]
$c[The 2 at the end here is because this item gives a +2 multiplier]
$setVar[item2;$sum[$getVar[item2;$authorID];$var[temp-item2]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price2]];$authorID]

$elseif[$toLowercase[$message[1;item]==item3]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price3];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item3(s).]
$color[#2F3136]

$var[temp-item3;$multi[$message[2;amount];3]]
$c[The 3 at the end here is because this item gives a +2 multiplier]
$setVar[item3;$sum[$getVar[item3;$authorID];$var[temp-item3]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price3]];$authorID]

$endif
$endif