Over the past week or so I’ve been a little too obsessed with Cookie Clicker. It’s an awesome little JavaScript-based game and I can’t just leave it alone.
I’m at a point in the game where it takes hours before I can buy the next item I’m looking for. Just out of curiousity, I was doing the math to figure out exactly how long it would take at my current rate to hit certain milestones. Since I was doing that so much, I decided to build a little user script I could install that would do the math for me and keep a running countdown going.
The script is available on GitHub but I’m going to break it down a bit (in the spirit of those code samples I’ve talked so much about over the last couple days) here.
We start with some pretty standard header stuff. On page load we run the exec() function, passing into it a function that wraps all of the stuff to continue. The exec() function is last in my code so I’ll get to it near the bottom of this.
Next we define all of the HTML elements we need to actually display our output and we append them to the page. This includes a form element which we’ll use to define our target value.
Simple enough, run the countdown_check() function once a second.
In the calculate_countdown() function we get the actual time remaining to the target. We pass in the target value, then grab the amount of cookies the user has and their cookies per second from the Game object so we don’t have to get it out of any HTML elements. It’s already readily available, why not take advantage? Then we do the math to determine how many cookies we need to hit the target and how many seconds it will take to get there.
If the number of seconds is greater than zero, we do some math to break the time into days, hours, minutes and seconds. Then we reassemble that into a string. If the time has already passed, we return 00:00.
The zero_pad() function seen implemented here is defined below.
Here’s that countdown_check() function. It grabs the countdown target from the form element and, if it’s greater than zero, throws it off to calculate_countdown() to get the time. The time returned is then put into the output_content container.
Last we define zero_pad() and close out the containers, as this has all been wrapped in AddEventListener() and exec(). The exec() function is then defined as what allows us to do this all via script injection, which is what gives us access to that helpful Game object.
Hardly anything groundbreaking, in fact I’d bet someone else has done this before. Just another one of those things I thought I’d share.
For the record, this is what the countdown looks like on the page. Small enough to not interfere with a golden (or red) cookie appearing in the same spot.
Update – 10:20 PM, 10/1/2013: After some quick feedback I made two changes. One extracted the time formatting logic into its own function, the aptly-named format_time(), while the other fixed a bug by moving the rounding in calculate_countdown(). Those two functions now look as follows: