The basics behind “jumping on enemies” feature, explained with Phaser and ARCADE physics – Updated to Phaser 3

One of the most interesting games in my opinion are platformers, I always blogged about this kind of game, and one of my most successful posts was written about one year ago when I wrote about the basics behind “jumping on enemies” feature, explained with Phaser and ARCADE physics. Just like all interersting Phaser 2 prototypes, I rewrote the code to make it work with Phaser 3. This prototype will be merged with the Yeah Bunny prototype to create a more complete platformer like Super Mario games. Have a look:
Our hero is the green character, while the red one is the enemy. Both characters run and change direction once they hit the wall, and you can make green character jump by clicking/tapping on the canvas. If red character hits green character, the game restarts. Try to jump over the red character and you will bounce over it. This is made by checking the side of the collision between red and green character. We can say the green character is jumping over the red character when the red character collides on its TOP side while the green character collides on its BOTTOM side. Have a look at the completely commented source code:
var game;
var gameOptions = {

    // player gravity
    playerGravity: 1900,

    // player horizontal speed
    playerSpeed: 200,

    // player force
    playerJump: 400,

    // enemy horizontal speed
    enemySpeed: 150
}
window.onload = function() {
    var gameConfig = {
        type: Phaser.CANVAS,
        width: 640,
        height: 192,
        backgroundColor: 0x444444,
        physics: {
            default: "arcade",
            arcade: {
                gravity: {
                    y: 0
                }
            }
        },
       scene: [preloadGame, playGame]
    }
    game = new Phaser.Game(gameConfig);
}
class preloadGame extends Phaser.Scene{
    constructor(){
        super("PreloadGame");
    }
    preload(){
        this.load.tilemapTiledJSON("level", "level.json");
        this.load.image("tile", "tile.png");
        this.load.image("hero", "hero.png");
        this.load.image("enemy", "enemy.png");
    }
    create(){
        this.scene.start("PlayGame");
    }
}
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    create(){

        // creatin of "level" tilemap
        this.map = this.make.tilemap({
            key: "level"
        });

        // adding tiles (actually one tile) to tilemap
        var tile = this.map.addTilesetImage("tileset01", "tile");

        // tile 1 (the black tile) has the collision enabled
        this.map.setCollision(1);

        // which layer should we render? That's right, "layer01"
        this.layer = this.map.createStaticLayer("layer01", tile);

        // adding the hero sprite
        this.hero = this.physics.add.sprite(game.config.width / 2, 152, "hero");

        // setting hero gravity
        this.hero.body.gravity.y = gameOptions.playerGravity;

        // setting hero horizontal speed
        this.hero.body.velocity.x = gameOptions.playerSpeed;

        // adding the enemy sprite
        this.enemy = this.physics.add.sprite(game.config.width / 4, 152, "enemy");

        // setting enemy horizontal speed
        this.enemy.body.velocity.x = gameOptions.enemySpeed;

        // the hero can jump
        this.canJump = true;

        // waiting for player input
        this.input.on("pointerdown", this.handleJump, this);
    }
    handleJump(){

        // the hero can jump when:
        // canJump is true AND the hero is on the ground (blocked.down)
        if((this.canJump && this.hero.body.blocked.down)){

            // applying jump force
            this.hero.body.velocity.y = -gameOptions.playerJump;

            // hero can't jump anymore
            this.canJump = false;
        }
    }
    update(){

        // handling collision between the hero and the tiles
        this.physics.world.collide(this.hero, this.layer, function(hero, layer){

            // hero on the ground
            if(hero.body.blocked.down){

                // hero can jump
                this.canJump = true;
            }

            // hero on the ground and touching a wall on the right
            if(this.hero.body.blocked.right && this.hero.body.blocked.down){

                // horizontal flipping hero sprite
                this.hero.flipX = true;
            }

            // same concept applies to the left
            if(this.hero.body.blocked.left && this.hero.body.blocked.down){
                this.hero.flipX = false;
            }

            // adjusting hero speed according to the direction it's moving
            this.hero.body.velocity.x = gameOptions.playerSpeed * (this.hero.flipX ? -1 : 1);
        }, null, this);

        // handling collision between the enemy and the tiles
        this.physics.world.collide(this.enemy, this.layer, function(hero, layer){

            // enemy touching a wall on the right
            if(this.enemy.body.blocked.right){

                // horizontal flipping enemy sprite
                this.enemy.flipX = true;
            }

            // same concept applies to the left
            if(this.enemy.body.blocked.left){
                this.enemy.flipX = false;
            }

            // adjusting enemy speed according to the direction it's moving
            this.enemy.body.velocity.x = gameOptions.enemySpeed * (this.enemy.flipX ? -1 : 1);
        }, null, this);

        // handling collision between enemy and hero
        this.physics.world.collide(this.hero, this.enemy, function(hero, enemy){

            // hero is stomping the enemy if:
            // hero is touching DOWN
            // enemy is touching UP
            if(enemy.body.touching.up && hero.body.touching.down){

                // in this case just jump again
                this.hero.body.velocity.y =  -gameOptions.playerJump;
            }
            else{

                // any other way to collide on an enemy will restart the game
                this.scene.start("PlayGame");
            }
        }, null, this);
    }
}
These examples are very useful when you want to see how to convert your Phaser 2 scripts to make them work with Phaser 3, and also to see complex platformer mechanics are not that complex when using a physics engine like ARCADE physics and an awesome framework like Phaser 3. Download the source code.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers