HTML5 platformer prototype inspired by iOS hit “Yeah Bunny” thanks to Phaser and ARCADE physics – The “TRAMPOLINE” tile

Read all posts about "" game

Adrian Zarzycki‘s new game Yeah Bunny 2 has been released both on Google Play and Apple App Store and it’s the sequel of the awesome game which inspired my Yeah Bunny tutorial series.

In the first post of the series you saw how the main character can perform a whole lot of things: runs automatically, changes direction each time hits an obstacle, can perform jump, double jump and wall jump as well as slide down the walls.

Everything with a camera automatically following you through a level generated with Tiled

In second step I added a “stop” tile which is very useful in these kind of games: since the player runs on his own, this is the only way you have to stop it.

Now I am adding the “trampoline” tile: a tile which will throw you in the air if you land on it, useful to reach high places.

Have a look at the game:

Click or tap to jump, double jump or wall jump. Step on the red tile to stop. Walk on the yellow tile and nothing happens, land on the yellow tile to use it as a trampoline.

I have the complete source code commented for you to enjoy:

let game;
let gameOptions = {

    // player gravity
    playerGravity: 900,

    // player friction when on wall
    playerGrip: 100,

    // player horizontal speed
    playerSpeed: 200,

    // player jump force
    playerJump: 400,

    // player double jump force
    playerDoubleJump: 300,

    // trampoline tile impulse
    trampolineImpulse: 500
}

// constants to make some variable numbers more readable
const STOP_TILE = 2;
const TRAMPOLINE_TILE = 3;

window.onload = function() {
    let gameConfig = {
        type: Phaser.CANVAS,
        width: 640,
        height: 480,
        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");
    }
    create(){
        this.scene.start("PlayGame");
    }
}
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    create(){
        // creation of "level" tilemap
        this.map = this.make.tilemap({
            key: "level"
        });

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

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

        // which tiles will collide? Tiles from 1 to 3
        this.layer.setCollisionBetween(1, 3);

        // adding the hero sprite and enabling ARCADE physics for the hero
        this.hero = this.physics.add.sprite(260, 376, "hero");

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

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

        // the hern cannot double jump
        this.canDoubleJump = false;

        // the hero is not on the wall
        this.onWall = false;

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

        // set workd bounds to allow camera to follow the player
        this.cameras.main.setBounds(0, 0, 1920, 1440);

        // making the camera follow the player
        this.cameras.main.startFollow(this.hero);
    }
    handleJump(){
        // the hero can jump when:
        // canJump is true AND the hero is on the ground (blocked.down)
        // OR
        // the hero is on the wall
        if((this.canJump && this.hero.body.blocked.down) || this.onWall){

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

            // is the hero on a wall?
            if(this.onWall){

                // change the horizontal velocity too. This way the hero will jump off the wall
                this.setPlayerXVelocity(true);
            }

            // hero can't jump anymore
            this.canJump = false;

            // hero is not on the wall anymore
            this.onWall = false;

            // the hero can now double jump
            this.canDoubleJump = true;
        }
        else{

            // cam the hero make the doubple jump?
            if(this.canDoubleJump){

                // the hero can't double jump anymore
                this.canDoubleJump = false;

                // applying double jump force
                this.hero.body.velocity.y = -gameOptions.playerDoubleJump;
            }
        }
    }
    update(){
        console.log(this.hero.body.velocity.y)
        // set some default gravity values. Look at the function for more information
        this.setDefaultValues();

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

            // should the player stop?
            let shouldStop = false;

            // some temporary variables to determine if the player is blocked only once
            let blockedDown = hero.body.blocked.down;
            let blockedLeft = hero.body.blocked.left
            let blockedRight = hero.body.blocked.right;

            // if the hero hits something, no double jump is allowed
            this.canDoubleJump = false;

            // hero on the ground
            if(blockedDown){

                // hero can jump
                this.canJump = true;

                // if we are on tile 2 (stop tile)...
                if(layer.index == STOP_TILE){

                    // player should stop
                    shouldStop = true;
                }

                // if we are on a trampoline and previous player velocity was greater than zero
                if(layer.index == TRAMPOLINE_TILE && this.previousYVelocity > 0){

                    // trampoline jump!
                    hero.body.velocity.y = -gameOptions.trampolineImpulse;

                    // hero can double jump
                    this.canDoubleJump = true
                }

            }

            // hero on the ground and touching a wall on the right
            if(blockedRight){

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

            // hero on the ground and touching a wall on the right
            if(blockedLeft){

                // default orientation of hero sprite
                hero.flipX = false;
            }

            // hero NOT on the ground and touching a wall
            if((blockedRight || blockedLeft) && !blockedDown){

                // hero on a wall
                hero.scene.onWall = true;

                // remove gravity
                hero.body.gravity.y = 0;

                // setting new y velocity
                hero.body.velocity.y = gameOptions.playerGrip;
            }

            // adjusting hero speed according to the direction it's moving
            this.setPlayerXVelocity(!this.onWall || blockedDown, shouldStop);
        }, null, this);

        // saving current vertical velocity
        this.previousYVelocity = this.hero.body.velocity.y;
    }

    // default values to be set at the beginning of each update cycle,
    // which may be changed according to what happens into "collide" callback function
    // (if called)
    setDefaultValues(){
        this.hero.body.gravity.y = gameOptions.playerGravity;
        this.onWall = false;
        this.setPlayerXVelocity(true);
    }

    // sets player velocity according to the direction it's facing, unless "defaultDirection"
    // is false, in this case multiplies the velocity by -1
    // if stopIt is true, just stop the player
    setPlayerXVelocity(defaultDirection, stopIt){
        if(stopIt){
            this.hero.body.velocity.x = 0;
        }
        else{
            this.hero.body.velocity.x = gameOptions.playerSpeed * (this.hero.flipX ? -1 : 1) * (defaultDirection ? 1 : -1);
        }
    }
}

Thanks to Phaser and Arcade physics we will be able to create any kind of special tile for our platform game. Which one do you want to see next time? Give me feedback and 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

215 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
// Stairs
// 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