Cupcake Clicking

It has finally arrived! Today is the first of my comics which includes an interactive component. This was one of my goals when I set out to create a web comic that was really part of the web almost 9 months ago. It's been a long time coming, but I wasn't going to make comics that you click just for the sake of clicking - it had to be part of the joke.

If you haven't seen it yet, go look at it now and come back: Baited Breadth, Amphibian.com for 17 November 2014.

The more times you click on the "click bait" cupcake, the more success the frog can report to his vice president in the last cell. And the more clicks he captures, the more he is rewarded. The highest reward comes at 150 clicks, so your finger might get a little tired earning the frog that honor.

Obviously, there's a JavaScript component here. It's not the most complicated thing in the world, but it did have to work with the general framework on the comic. It's not actually the first JavaScript component either, the 3D comic last week had JavaScript which enabled turning on and off the stereoscopic version of the final cell.

The basic premise is this: when you load the comic page as a whole, which means you type "amphibian.com" directly into the browser or follow a link, any special JavaScript required by that comic is downloaded with all the rest of the JavaScript. But if you navigate around using the "Previous" and "Next" comic links, the whole page doesn't reload. In those cases, just the HTML of the comic cells is sent to the browser via AJAX. Any custom JavaScript is loaded dynamically at that time. If you go back and forth, it means that custom JavaScript can be loaded multiple times on what is essentially a single page. I had to be mindful of that fact.

Here is a stripped-down version of the cupcake clicker code.

$(function() {

    // put variables here that need to persist between clicks 
    var clickCounter = 0;

    $("#cupcake").unbind("click"); // in case this gets executed more than once

    $("#cupcake").click(function() { 

        // this is where you do stuff for the click

        clickCounter++;
        if (clickCounter > 30) {
            // do something special
        }

    });

});

First, note how the whole thing is an anonymous function given to the jQuery $() function. This means the code inside will get executed after the document is first ready (in the case of the JavaScript being pulled down on an initial page load) or immediately if the document is already done (in the case of the dynamic loading).

Because this can get called multiple times, I make sure to remove all existing "click" bindings from the cupcake on line 6. If I don't do this, jQuery will keep adding additional "click" bindings on for each call - meaning that clickCounter will be incremented multiple times for each click and other such weird behavior!

Line 8 adds the "click" listener. Because it creates a closure containing the clickCounter variable, it can be accessed with each click and maintain its value.

Hopefully this is just the first of many interactive frog & technology jokes that will appear. I'm going to try to make some that use more advanced features available to the browser, especially on mobile. Things like geolocation and the accelerometers. Keep reading!

Amphibian.com comic for 17 November 2014