Hacking Clicker Games with JavaScript (DOM and setInterval)

Clicker games. Incremental games. Idle games. Whatever you call them. They are video games whose gameplay consists of the player performing simple actions such as clicking on the screen repeatedly to earn some sort of currency — pretty much, grinding for a virtual, in-game currency. At some point, you probably had one of those on your phone and/or played one such game on your computer.

I used to play a lot of Clicking Bad and Cookie Clicker on my computer. I remember how boring it was to have to click on the button to get the aforementioned “virtual currency”. Little did I know that JavaScript could do wonders.

I will show you how to automate clicking games with pure JavaScript and the browser’s Developer Tools.

Cookie Clicker An image of a virgin Cookie Clicker bakery!

Fire up Cookie Clicker on your preferred browser. I will be using Chrome, as that’s my go-to browser. You will be presented with the image above. Hover the big cookie on the left, right click and select Inspect Element. If you did everything correctly, the Developer Tools should fire up and show you something similar to this:

Image

bigCookie is the id of the div that contains the cookie. If you go ahead and click the cookie, you will notice that the number of cookies increases by one. Let’s automate that process.

On the Developer Tools, switch to the Console tab, right of Elements. The Console is where you can write JavaScript code to debug, test and break elements of a website — or even JavaScript unrelated to the website. Think of it as an IDE for JavaScript code.

Write the following code in the Console tab: var cookie = document.getElementById("bigCookie");

Let’s break it down:

The console should output undefined. You can then this type: cookie.click()

undefined will, again, be the output: but this time, the amount of cookies has increased by 1 automatically! So we have automated the clicking process. Thanks for this reading this blog post and see you next time…

… not. This is an useless “automation”. We need to automate this clicking function every second. You can do this by using the setInterval method. It works the following way:

setInterval(function, interval)

This method calls a function or evaluates an expression at specified interval in milliseconds.

We obviously want as small delay between clicks as possible, so let’s consider the interval to be 0ms (almost like calling the function in an infinite loop). Our function will be what we wrote above. If we create a function, we can pass it as the first paratemer of the setInterval method; otherwise, we can evaluate an expression using the function(){/* Code */} syntax.

Write the following code in the console:

setInterval(function() {
    cookie.click();
}, 0);

If you typed everything correctly, you’ll notice that the cookies starting increasing at a very fast rate! The output will be a number which represents the ID of the timer that has been set. You can use this ID and pass it as a parameter to the clearInterval method (e.g: clearInterval(123252)).

Image Needless to say I was steam rolling within the next 20 minutes.

This is pretty much all there is to this. This concept can be reutilized in many games and diverse web applications. All you have to do is: