6.11.2022

Snakes And Ladders Talk Through - Side Effects

This article runs through how the side effects (enemies) of Snakes And Ladders are animated and rendered. Each simplified demo has its source code underneath, so feel free to have a look. Pay particular attention to the code inside the enemy() function, which handles the drawing and animation.

Almost every enemy uses a very similar walking pattern that you may recognise from Anthrophobia. In case you haven't already seen it, this "walking pattern" is based on a circle with a limit at its base:

The Worm-like Stick Thingy

Even the first side effect uses this circular walking pattern. Notice how each of its bones move:

The Centipede

This side effect is very similar to the former one, only its body is extended upwards so that its legs move instead.

The Creeper

I'm sure you can figure out what's going on here.

The Wolfish Side Effect

As you may have already noticed, this enemy also uses the walking motion mentioned earlier. Its four feet are divided into two pairs at the moment, but here's a challenge: If you paste the code below into a new .html file, can you give the enemy four pairs of legs? (Tip: have a look in the enemy() function)

The Monster

In this simplified example, the enemy is very similar to the last. In the real game, however, it occasionally spits out cubes - shown in the next example - and jumps whenever Drillo runs underneath it.

The Cubic Side Effect

This side effect might look a bit basic, but surprisingly it turned out to be the hardest one to get going. This is what it has to do:

1. Rotate in the direction it's moving.
2. Bump up and down so that it looks like its rolling along the ground.
3. Close and open its eyes before and after rolling.

Take a look at the source code if you need to understand it better.

The Crab

This enemy is by far, in my mind, the most interesting and visually impressive of them all. I started off trying to make the crab's legs from scratch, but it was too complicated to animate just from my head. Thankfully, because I could still vaugely picture how it should move, I was able to draw out its rough mechanics using a small animation app. This turned out to be really useful as it meant I had a solid example work from.

The Last Side Effect

In the real game, this enemy hammers his head whenever Drillo jumps on top of it. It's so massive that it would never usually be able to fit inside the Snakes And Ladders window, but having it to scale might be a bit impractical in this instance.

Anyway, thanks for reading this article to the end and please don't hesitate to contact me if you have any further questions.