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:
createCanvas()is declared as part of our canvas section
attachImages()is part of canvas drawing subsection
getPruneClickListener()is in a section of our code dedicated to handling the user's click
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
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.
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
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.
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.
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.
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.