Lets create a clone of the classic chrome game that shows up when you're offline.

Introduction

Chrome has this really simple and fun game that you can play when your WiFi is down. It consists of a small dinosaur that has to jump over cacti. This game has a couple of core mechanics, a player that jumps when the up key is pressed, and an infinite number of randomly generated obstacles for the player to jump over.

Both these things can be easily achieved in Phaser, which is a 2D game framework for making HTML browser games. We’re going to create a game with almost the same mechanics but with a different look.

I’m going to call it Runny

If you’re new to phaser I would suggest reading a getting started tutorial.

File Structure

runny
    |---assets // A folder for all our tiles and sprites
    |
    |---js // All the javascript files
    |   |--boot.js
    |   |--gameover.js
    |   |--gametitle.js
    |   |--main.js
    |   |--phaser.min.js
    |   |--preload.js
    |
    |--index.html // Where everything comes together

For this project we’ll only be using preload.js and main.js from the js folder

The boilerplate code was taken from Joshua Morony's website , download the files Here

Assets

We need three basic kinds of tiles- the ground, the player and the obstacles. I’ll be using 2 different png files for the obstacles and the ground. For the player I’m going to use a sprite sheet because it can be animated.

The ground and obstacle tiles were Made by Kenny and the player spritesheet was made by arks.

Preload.js

Here we load the assets that we need before we use them. In preload.js, change this.game.state.start("GameTitle"); to this.game.state.start("Main");

Then add the following

preload: function(){
    // ground tile
    this.game.load.image('tile', 'assets/tile.png'); 
    // obstacle tile
    this.game.load.image('box', 'assets/box.png'); 
    // player sprite
    this.game.load.spritesheet('player', 'assets/player.png', 24, 24, 9, -2); 
}

Main.js

This is where the fun stuff happens!

Create

In the create function we initialize a few variables that we’ll be using later.

this.tileVelocity = -450; // velocity of the obstacles
this.rate = 1500; // rate at which the obstacles appear on screen
this.jumping = false; // is the player jumping?

// add keyboard input
this.cursors = this.game.input.keyboard.createCursorKeys(); 

// set a blue background color
this.game.stage.backgroundColor = '479cde'; 

// start the phaser arcade physics system
this.game.physics.startSystem(Phaser.Physics.ARCADE); 

// execute addObstacles at the rate we set 
this.timer = game.time.events.loop(this.rate, this.addObstacles, this);

Now we need 2 groups, one for the ground and one for the obstacles.

// the floor group
this.floor = this.game.add.group();
this.floor.enableBody = true;
this.floor.createMultiple(Math.ceil(this.game.world.width / this.tileWidth), 'tile');

// the obstacle group
this.boxes = this.game.add.group();
this.boxes.enableBody = true;
this.boxes.createMultiple(20, 'box');
this.game.world.bringToTop(this.floor)
this.addBase(); // add the ground for the player to run on
this.createPlayer(); // add the player to the game

Final create function

create: function() {

    this.tileVelocity = -450;
    this.rate = 1500;
    this.jumping = false;

    this.tileWidth = this.game.cache.getImage('tile').width;
    this.tileHeight = this.game.cache.getImage('tile').height;  
    this.boxHeight = this.game.cache.getImage('box').height;

    this.game.stage.backgroundColor = '479cde';

    this.game.physics.startSystem(Phaser.Physics.ARCADE);

    this.floor = this.game.add.group();
    this.floor.enableBody = true;
    this.floor.createMultiple(Math.ceil(this.game.world.width / this.tileWidth), 'tile');

    this.boxes = this.game.add.group();
    this.boxes.enableBody = true;
    this.boxes.createMultiple(20, 'box');
    this.game.world.bringToTop(this.floor)

    this.addBase();
    this.createPlayer();
    this.cursors = this.game.input.keyboard.createCursorKeys(); 

    this.timer = game.time.events.loop(this.rate, this.addObstacles, this);

},

Add Base

Now our player will need a platform to run on. The ground is actually not going to move, so we can just set a fixed number of tiles based on the size of the screen. Let’s add the base.

addBase: function () {

    // calculate how many tiles are needed
    var tilesNeeded = Math.ceil(this.game.world.width / this.tileWidth); 

    // the tiles should be at the bottom of the screen
    var y = (this.game.world.height - this.tileHeight); 

    for (var i = 0; i < tilesNeeded; i++) {

        // add one tile after the other
        var x = i * this.tileWidth; 
        var tile = this.floor.getFirstDead();
        tile.reset(x, y); // set the x and y coordinates
        tile.body.immovable = true;

    }
}

Create the Player

Since the player has something to stand on now, we can go ahead and create the player.

createPlayer: function () {

    // spawn the player a to the left and a little above the ground
    this.player = this.game.add.sprite(this.game.world.width/5, this.game.world.height -(this.tileHeight*2), 'player'); 

    // depends on the size of your sprite
    this.player.scale.setTo(4, 4); 
    this.player.anchor.setTo(0.5, 1.0);

    // enable arcade physics on the player
    this.game.physics.arcade.enable(this.player); 

    // the player has to fall down once it jumps
    this.player.body.gravity.y = 2200; 
    this.player.body.bounce.y = 0.1;
    this.player.body.drag.x = 150;

    // since it is a sprite sheet, you can set animations
    var walk = this.player.animations.add('walk'); 

    // play the walk animation at 20fps
    this.player.animations.play('walk', 20, true); 
}

Add the Obstacles

Just having the player jump without anything to jump over would be pretty boring, so we’re going to add some boxes. In case you haven’t realized already, we haven’t given the player a velocity. This is because the player isn’t actually going to move, we can simply create the illusion of movement by giving the obstacles a velocity in the direction of the player.

Also to keep things interesting, the height of the obstacles the player has to jump over is random and based on that the player can either do a single jump or a double jump. We’ll be implementation the jumping function later.

addObstacles: function () {

    // Randomly decide how tall the stack of boxes is going to be
    // maximum number of tiles that the player can jump over is 4
    var tilesNeeded = Math.floor( Math.random() * (5 - 0));

    // slowly increase the difficulty by increasing how often boxes spawn and how fast they move
    if (this.rate > 200) {
        this.rate -= 10;
        this.tileVelocity = -(675000 / this.rate);
    }

    // Add the boxes to the game
    for (var i = 0; i < tilesNeeded; i++) {
        // we want the boxes to be created just outside the right side of the screen
        this.addBox(this.game.world.width , this.game.world.height - this.tileHeight - ((i + 1)* this.boxHeight ));
    }
}

The function above doesn’t actually add the boxes to the map, that’s done by addBox, which creates a box at the given x and y coordinates.

addBox: function (x, y) {

    // get the boxes that have already been moved outside the screen
    var tile = this.boxes.getFirstDead();

    tile.reset(x, y);
    // set the velocity of the set of boxes
    tile.body.velocity.x = this.tileVelocity;
    tile.body.immovable = true;
    tile.checkWorldBounds = true;
    // destroy them when they go outside the screen
    tile.outOfBoundsKill = true;
}

Movement

Now we need to give the player a way to actually jump over the boxes when we press the UP arrow. This is taken care of in the update function which can constantly checks for input. We’ll also be implementing a double jump mechanism that we talked about earlier. This isn’t a part of the original game, but makes it more interesting. We’ll also be checking for collisions between the other tiles and the player.If the player touches a box, the game is over.

update: function() {

    // collide with the floor
    this.game.physics.arcade.collide(this.player, this.floor);
    // collide with the boxes and call gameOver when the player hits a box
    this.game.physics.arcade.collide(this.player, this.boxes, this.gameOver, null, this);

    // implementing the double jump
    var onTheGround = this.player.body.touching.down;

    // If the player is touching the ground, let him have 2 jumps
    if (onTheGround) {
        this.jumps = 2;
        this.jumping = false;
    }

    // Jump!
    if (this.jumps > 0 && this.upInputIsActive(5)) {
        this.player.body.velocity.y = -1000;
        this.jumping = true;
    }

    // Reduce the number of available jumps if the jump input is released
    if (this.jumping && this.upInputReleased()) {
        this.jumps--;
        this.jumping = false;
    }

}

There are 2 more methods we need to implement, one for checking if the up arrow is held down, and one to check if its released.

// This function returns true when the player presses the "jump" control
upInputIsActive: function (duration) {
    var isActive = false;

    isActive = this.input.keyboard.downDuration(Phaser.Keyboard.UP, duration);
    isActive |= (this.game.input.activePointer.justPressed(duration + 1000 / 60) &&
        this.game.input.activePointer.x > this.game.width / 4 &&
        this.game.input.activePointer.x < this.game.width / 2 + this.game.width / 4);

    return isActive;
},

// This function returns true when the player releases the "jump" control
upInputReleased: function () {
    var released = false;

    released = this.input.keyboard.upDuration(Phaser.Keyboard.UP);
    released |= this.game.input.activePointer.justReleased();

    return released;
}

Game Over

For the last part of our project, we need to do something when the player hits a box and the game is over. In this case since we don’t have a Start Screen we’ll just load up the game again, i.e main.jsSo put this line in gameOver

this.game.state.start('GameOver');

Code & Demo

If you want the code for this project, fork this GitHub repo - Dinosaur game code

Check out the code in action here, play it yourself - Live demo

Blog

Making the Chrome dinosaur game with Phaser

Aveek Saha