Phaser Platformer Series: 14 Spikes / Lava

posted on 21 June 2021

In this tutorial, we’ll look at adding some more obstacles to our game. A classic is spikes or lava  –  a surface that hurts you if you stand on it.

Here’s what we will be making:

See the Pen
Phaser Platformer: 14 Spikes / Lava by Digitherium (@digitherium)
on CodePen.

If you are viewing on a mobile, you can open a version of it here without all the codepen chrome taking up screen space so you play it in landscape mode.

This one is incredibly easy. We’ve been laying the foundations of our game as we go, and we have a hit system with our hearts. If our player gets hit by the baddie they lose a life and various animations play. This function playerHit is completely self-contained, so we can just reuse it! All we have to do to get spikes working is load in the sprites in the preload function:

this.load.image('spikes', 'spikes.png');

Position our spikes in the create function:

spikes = this.physics.add.staticGroup();
spikes.enableBody = true;
spikes = spikes.create(120, 385, 'spikes');
spikes.body.immovable = true;

And then add two colliders. One for our player and the spikes:

this.physics.add.collider(player, spikes, playerHit, null, this);

And one for our shell and the spikes:

this.physics.add.collider(shell, spikes, destroyShell, null, this);

If our hero hits the spikes, their hurt animation will play, they will bounce into the air and be invulnerable for a short period of time, just like when they hit a baddy. If a shell hits the spikes, it is destroyed, again, just as if it had hit a baddy. We already had these functions good to go, we’ve just set some new triggers from them with the shell sprite.

Simple right? Coming next another simple one invincibility.

chromeless mobile version
view all the code on codepen
download the source on github.