The basics behind “wall jump” in platform games. HTML5 prototype made with Phaser and ARCADE physics

One nice feature I love to find in platform games is wall jump. It’s the ability to jump, hit a wall and jump again on the opposite direction. This ability is often used to let the player climb levels, jumping from wall to wall.

Thanks to Phaser and ARCADE physics, we can do it in just a few lines.

First, let’s have a look at the result: a simple autorunner with jump and wall jump abilities

Just tap or click to make the player jump. Every zone of the level is accessible thanks to wall jump. Try to jump while on a wall and see what happens. I made the level with Tiled Map Editor which is the best choice.

This is the level I exported in JSON:

It’s not that interesting but I am showing it to you because you will find some reference names – such as layer name – in the main code, which is fully commented:

That easy? Yes, that easy thanks to Phaser and ARCADE phyiscs. Do you have some platformer you would like to see deconstructed starting from this prototype? I do, and will show it to you next week. Meanwhile, download the source code.

  • This code has a bug – you can still jump off a wall after you slide off the wall and are touching nothing. You could avoid this problem by directly setting this.onWall to this.hero.body.blocked.right || this.hero.body.blocked.right instead of tangling it with the logic for being on the ground.