JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<div id="target">
    <p class="inner">Click Me!</p>
</div>
<div id="multiplier">
    <p class="inner">+1 Clicker</p>
    <p class="cost" style="margin-top: -10px"></p>
</div>
<span class="a"></span>
<br />
<span class="b"></span>

CSS

#target {
    width: 100px;
    height: 100px;
    background-color: rgba(20, 20, 20, 0.1);
    border-radius: 50px;
    cursor: pointer;
    display: block;
    float: left;
}
#multiplier {
    width: 100px;
    height: 100px;
    background-color: rgba(20, 20, 20, 0.1);
    border-radius: 50px;
    cursor: pointer;
    display: block;
    float: left;
}
#multiplier:active {
    background-color: rgba(255, 165, 0, 0.3);
}
#target:active {
    background-color: rgba(255, 165, 0, 0.3);
}
.inner {
    padding-top: 25px;
    text-align: center;
}
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 12pt;
}
.cost {
    font-size: 6pt;
    text-align: center;
}

JavaScript

var x = 0;
$("#target").click(function () {
    x += 2;
});
var y = 0;
$("#multiplier").click(function () {
    if (x >= (10 + y * y)) {
        x -= 10 + y * y;
        y += 1;
    }
});
counter = 0;
var myVar = setInterval(function () {
    if (counter % 50 === 0) {
        x += y;
    }
    $(".a").text("Points: " + x);
    $(".b").text("Auto Clickers: " + y);
    $(".cost").text("Cost: " + (10 + y * y));
    counter++;
}, 20);