Creating an Endless Runner Game in Phaser Part 3 Add Blocks

Cleaning Up the Jump

Now our hero is jumping. But there is a problem. Sometimes the jump just doesn’t happen and even when it does, it feels a bit funny.

After some testing what I found out was that the listeners were sometimes being called in the wrong order. If I clicked fast it would trigger the up event before the down event and it would immediately wipe out the power. I fixed this by doing 3 things

waiting to register the up event until the down event was triggered
removing the down and up event listener after each one was triggered
reregistering the events as needed

See the highlighted lines below:

var StateMain = {
    preload: function() {
        game.load.image("ground", "images/ground.png");
        game.load.image("hero", "images/hero.png");
        game.load.image("bar", "images/powerbar.png");
        game.load.image("block", "images/block.png");
    },
    create: function() {
        this.power = 0;
        //turn the background sky blue
        game.stage.backgroundColor = "#00ffff";
        //add the ground
        this.ground = game.add.sprite(0, game.height * .9, "ground");
        //add the hero in 
        this.hero = game.add.sprite(game.width * .2, this.ground.y - 25, "hero");
        //add the power bar just above the head of the hero
        this.powerBar = game.add.sprite(this.hero.x + 25, this.hero.y - 25, "bar");
        this.powerBar.width = 0;
        //start the physics engine
        game.physics.startSystem(Phaser.Physics.ARCADE);
        //enable the hero for physics
        game.physics.enable(this.hero, Phaser.Physics.ARCADE);
        game.physics.enable(this.ground, Phaser.Physics.ARCADE);
        //game.physics.arcade.gravity.y = 100;
        this.hero.body.gravity.y = 200;
        this.hero.body.collideWorldBounds = true;
        this.hero.body.bounce.set(0, .2);
        this.ground.body.immovable = true;
        //set listeners
        game.input.onDown.add(this.mouseDown, this);
    },
    mouseDown: function() {
        game.input.onDown.remove(this.mouseDown, this);
        this.timer = game.time.events.loop(Phaser.Timer.SECOND / 1000, this.increasePower, this);
        game.input.onUp.add(this.mouseUp, this);
    },
    mouseUp: function() {
        game.input.onUp.remove(this.mouseUp, this);
        this.doJump();
        game.time.events.remove(this.timer);
        this.power = 0;
        this.powerBar.width = 0;
        game.input.onDown.add(this.mouseDown, this);
    },
    increasePower: function() {
        this.power++;
        this.powerBar.width = this.power;
        if (this.power > 50) {
            this.power = 50;
        }
    },
    doJump: function() {
        this.hero.body.velocity.y = -this.power * 12;
    },
    update: function() {
        game.physics.arcade.collide(this.hero, this.ground);
    }
}

click here to open in new window

Endless Runner, Not Flappy Bird!

That has cleaned up the jump. Now you may have noticed another problem. You can keep pressing the mouse to make the hero fly. You can probably figure out that combining gravity and velocity will help build a flappy bird game. Since we want the hero to only be on the ground when he jumps, let’s make a note of where the hero needs to be.

In the create function just before adding the event listener for mouseDown add this line

//record the initial position
this.startY = this.hero.y;

Now, all we need to do is check that position in the mouseDown function. If the hero is not in the start position, or in other words, the ground, we simply exit the function and don’t jump. Add this to the start of the mouseDown function:

if (this.hero.y != this.startY) {
            return;
}

click here to open in new window

Something to Jump

Now it is time to give out hero something to jump over. We want to make a wall of blocks, let’s set up a group to hold all of the blocks that make up that wall.

at the end of the create function add

this.blocks = game.add.group();

Then let’s make a function to add a random number of blocks into that group

makeBlocks: function() {
        var wallHeight=game.rnd.integerInRange(2, 6);
        for (var i = 0; i < wallHeight; i++) {
            var block = game.add.sprite(0, -i * 25, "block");
            this.blocks.add(block);
        }
    }

Here is what the result looks like.

click here to open example in a new window