Want to play the game?

So you wanna know how we control the timeline? Start with the big button below, or jump to a section:


Initialising with the page

We need to start somewhere, and in our initialisation, we'll need to have a reference to everything on our HTML page to which our JavaScript will need to refer. In our case, it's quite simple. It's just:


Defining high-level game mechanics

We know we'll have a game which will start, end, and keep score. We also know that it will advance in steps. We can therefore write a lot of our boilerplate game logic into place, even before we know the specifics.

There are some high-level names of processes here which we define elsewhere:

In a config global variable, we can give ourselves easy access to things like timings and sizes that we might want to tweak as we develop the game.

Similarly, there might be some tools we use in lots of our sections of code, and for those we have ./utils.js.


Setting up the right canvas

There's a fair bit of work to get our canvas set up, because we need to have it work for multiple Lokis, of different sizes. We'll also need to draw the images and add the click events dynamically.

We create a new canvas element for every Loki we want to show, because we want a one-to-one relationship with the images and the click event.

Handling clicks inside a canvas is difficult: we'd have to check the coordinates of the click. Clearing specific rectangles from within a canvas would also mean keeping track of the exact place where we drew each Loki. The simplest solution for removing a Loki from our screen is to remove the whole canvas element.

Drawing images on a canvas

With the canvas we've created, we'll be able to attach the image. Note that we don't actually execute this until the doors are ready.

Some of the important work here was done in the definition of loadImages() which is a responsibility we've left to the game mechanics. All we need to know is that chosenImage is a valid Image() instance.


Defining our animation

This is where we get quite complicated. What we're trying to do is simple in theory: make each Loki look like they're being pruned. In practice, this means animating lots of frames where the amount of Loki which is clipped is increasing, and the area soon-to-be-clipped is painted some hauntingly pastel colour.

Mobius being pruned

A little bit of blue, a bit of yellow, throw in some purple and we're good to go. For our pruning effect, We just need to randomly pick out one of those colours, and draw a circle of a given size.

And then, to keep things simple, we clip a circle that's just a little smaller. For that, we'll need to be able to clip a circle.

Looking good! Finally, the pruning animation will keep track of where the circles are, how big they need to be, and it will call our drawing and clipping functions.


Handling the user's click

As is often the case when we're working with JavaScript, we want to respond to a user click. In our game, we start the animation when the user clicks a Loki!

Essentially, we just need to kick off a bunch of effects. The most complicated thing about our click listener is that we're generating the callback based on some parameters — this is often really helpful, when there's information or elements not available on pageload but which we can pass to a function builder like this later.

Notice how we're using setTimeout() to delay two of the effects: removing the Loki and showing the next one.


Opening the doors

Our bonus effect is doors which open and close. This complicates the drawing of our Lokis a little bit, because we want Loki to appear after we've finished drawing the door, and stay visible while we close the door.