How to Make a 2D Platformer in HTML5 with Phaser

This is a short Phaser tutorial that will show you how to create a simple 2D Platformer.

This tutorial assumes that you are already a little familiar with Phaser. If that's not the case, you should first read my complete beginner tutorial on how to make Flappy Bird with Phaser.

Empty Game

Let's start by creating the structure of our game, which is basically an empty Phaser project.

 // Create the state that will contain the whole game
var mainState = {  
    preload: function() {  
        // Here we preload the assets
    },

    create: function() {  
        // Here we create the game
    },

    update: function() {  
        // Here we update the game 60 times per second
    },
};

// Initialize the game and start our state
var game = new Phaser.Game(500, 200);  
game.state.add('main', mainState);  
game.state.start('main');

We can add this inside the create() function to set some game settings.

// Set the background color to blue
game.stage.backgroundColor = '#3598db';

// Start the Arcade physics system (for movements and collisions)
game.physics.startSystem(Phaser.Physics.ARCADE);

// Add the physics engine to all game objects
game.world.enableBody = true;

And we should also load all our sprites like this, in the preload() function.

game.load.image('player', 'assets/player.png');
game.load.image('wall', 'assets/wall.png');
game.load.image('coin', 'assets/coin.png');
game.load.image('enemy', 'assets/enemy.png');

Add the Player

Let's start by adding a player we can control with the arrow keys.

So add this in the create() function.

// Variable to store the arrow key pressed
this.cursor = game.input.keyboard.createCursorKeys();

// Create the player in the middle of the game
this.player = game.add.sprite(70, 100, 'player');

// Add gravity to make it fall
this.player.body.gravity.y = 600;

And this in the update() function.

// Move the player when an arrow key is pressed
if (this.cursor.left.isDown) 
    this.player.body.velocity.x = -200;
else if (this.cursor.right.isDown) 
    this.player.body.velocity.x = 200;
else 
    this.player.body.velocity.x = 0;

// Make the player jump if he is touching the ground
if (this.cursor.up.isDown && this.player.body.touching.down) 
    this.player.body.velocity.y = -250;

Create the Level

The next step is to have a level for our player. We can set it up like this, in the create() function.

// Create 3 groups that will contain our objects
this.walls = game.add.group();
this.coins = game.add.group();
this.enemies = game.add.group();

// Design the level. x = wall, o = coin, ! = lava.
var level = [
    'xxxxxxxxxxxxxxxxxxxxxx',
    '!         !          x',
    '!                 o  x',
    '!         o          x',
    '!                    x',
    '!     o   !    x     x',
    'xxxxxxxxxxxxxxxx!!!!!x',
];

And to actually have the level displayed, add this just below the previous code.

// Create the level by going through the array
for (var i = 0; i < level.length; i++) {
    for (var j = 0; j < level[i].length; j++) {

        // Create a wall and add it to the 'walls' group
        if (level[i][j] == 'x') {
            var wall = game.add.sprite(30+20*j, 30+20*i, 'wall');
            this.walls.add(wall);
            wall.body.immovable = true; 
        }

        // Create a coin and add it to the 'coins' group
        else if (level[i][j] == 'o') {
            var coin = game.add.sprite(30+20*j, 30+20*i, 'coin');
            this.coins.add(coin);
        }

        // Create a enemy and add it to the 'enemies' group
        else if (level[i][j] == '!') {
            var enemy = game.add.sprite(30+20*j, 30+20*i, 'enemy');
            this.enemies.add(enemy);
        }
    }
}

We need the wall.body.immovable = true; line to make sure the walls won't start to fall when the player walks on them.

Note that this is not a very efficient way to create the level. We currently have about 50 tiny walls, but we could reduce that number to 5 if we stretched the walls horizontally or vertically. This optimization will be explained in another tutorial.

Handle Collisions

Finally we need to handle all the collisions of our platformer like this, in the update() function.

// Make the player and the walls collide
game.physics.arcade.collide(this.player, this.walls);

// Call the 'takeCoin' function when the player takes a coin
game.physics.arcade.overlap(this.player, this.coins, this.takeCoin, null, this);

// Call the 'restart' function when the player touches the enemy
game.physics.arcade.overlap(this.player, this.enemies, this.restart, null, this);

And we should add these 2 new functions to our state.

// Function to kill a coin
takeCoin: function(player, coin) {
    coin.kill();
},

// Function to restart the game
restart: function() {
    game.state.start('main');
}

Result

Here's the little 2D platformer that we built together.

Conclusion

With less than 80 lines of code we have a simple 2D platformer. It's quite basic, but you can easily improve it if you want.

If you want to learn more about Phaser, you should check out my ebook Discover Phaser. It explains in detail how to build a full featured game with Phaser. More information on DiscoverPhaser.com.

Get my free ebook "How To Create and Promote Your Own Games"
and be notified when I write new tutorials

More than 12,000 people already joined. No spam and unsubscribe at any time.

Wait! Get my free ebook :-)

Want to get my free ebook
"How To Create and Promote Your Own Games"
and be notified when I write new gamedev tutorials?

Then join the newsletter below.

More than 12,000 people already joined.
No spam and unsubscribe at any time.