Joachim Ford

Snakes And Ladders Talk Through: Side Effects

This article runs through how the enemies of Snakes And Ladders are animated and rendered. Each simplified example has its source code underneath, so please to have a look if you need help. Pay particular attention to the code inside the enemy() function, which handles the drawing and animation.

Nearly every enemy uses a very similar walking pattern - one 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

It's quite hard to see, but even the first enemy uses this circular walking pattern. Notice how the joints move. It's a small change, but it's vital to achieve the illusion of moving forward.

The Centipede

This side effect is very similar to the first one, except that its body has been is brought upwards so that its legs move instead. The iconic walking motion is also more visible in this creature because you can see its legs individually.

The Creeper

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

The Wolfish Side Effect

This enemy also uses the 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 the real game, this enemy occasionally spits out cubes - shown in the next example - and jumps whenever Drillo runs underneath it. This simplified example doesn't have these features, but if you want you can have a look at the real enemy code here.

The Cubic Side Effect

I agree that this enemy looks a bit basic, but surprisingly it turned out to be the hardest one to get working. Overall, this enemy has to go through four main procedures to give you the final result.
∙ Rotate in the direction it's moving (easy)
∙ Close and open its eyes before and after rolling (not so easy)
∙ Bump up and down so that it looks like its rolling along the ground (rather tricky)
∙ Make sure it only stops rolling when resting on an edge (tricky)
Take a look at the source code if you need to understand it better.

The Crab

Getting the legs to move like this was really hard. In the end, it turned out to be helpful to make a small drawing animation of it first before writing it as code. I know, creating "drawing animations" of your creatures might sound a bit pointless, but it can actually save a lot of time if your creature is already difficult to visualise in your head.

The Last Side Effect

In the real game, this enemy hammers his head whenever Drillo jumps on top of it. I've scaled it down a bit so it can fit in on the screen, but usually you can only see parts of it. I admit the walking is slightly weird.

The ...?

Well, I was planning on showcasing the X-ray Orb here, but I decided to leave it out so as not to spoil the game for you, in case you haven't played Snakes And Ladders yet. You'll just have to find out when you get there!

Anyway, thanks for reading this far and please contact me if you have any further questions!
© Copyright —