In this tutorial, we will be using Phaser.js to create a platform game. The objective of the game is for the player to move around, collect stars, and reach the end. Let’s get started!

Setup the Project

To begin, make sure you have an empty folder and run the following commands:

npm init -y

This will initialize a minimal package.json file for your project. Then, install Phaser by running:

npm install phaser

If you haven’t already, install Parcel (a bundler) by running:

npm install -g parcel-bundler

Create an app.js file and run the following command:

parcel watch app.js

This command will tell Parcel to build your game in the dist/app.js file.

Next, create an index.html file with the following content:

<!DOCTYPE html>
<html>
  <head>
    <script src="./dist/app.js"></script>
  </head>
</html>

To run an HTTP server with the content of the folder, install browser-sync by running:

npm install -g browser-sync

Then, run the following command:

browser-sync start --server --files "."

This will launch a web server on port 3000 and automatically open a browser window to connect to the server. Anytime you make changes to your files, the browser will refresh, making the development process faster.

Initialize Phaser

Open the app.js file and import Phaser:

import Phaser from 'phaser'

Add the following minimal configuration to create a game:

const config = {
  width: 800,
  height: 600,
  backgroundColor: 0xffffff,
  scene: {
    preload,
    create,
    update
  },
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: false
    }
  }
}

const game = new Phaser.Game(config)

Now, let’s create the necessary functions: preload(), create(), and update():

function preload() {
  // Preload assets here
}

function create() {
  // Create game elements here
}

function update() {
  // Update game logic here
}

Add the Artwork

Download the following image files and save them in an assets folder:

Now, load the assets in the preload() function:

function preload() {
  this.load.image('ground', 'assets/ground.png')
  this.load.image('island', 'assets/island.png')
  this.load.image('star', 'assets/star.png')
  this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 32,
    frameHeight: 48
  })
}

Create the Platforms

We will create platforms for the player to stand on. Add the following code to the create() function:

let platforms = this.physics.add.staticGroup()

platforms.create(400, 588, "ground")
platforms.create(600, 450, "island")
platforms.create(50, 250, "island")
platforms.create(650, 220, "island")
platforms.create(250, 520, "island")
platforms.create(250, 320, "island")

Add the Player

Next, let’s add the player character. Declare a variable called player outside any function at the top of the file:

let player

In the create() function, add the following code to create and set up the player:

player = this.physics.add.sprite(380, 500, "player")

player.setBounce(0.2)
player.setCollideWorldBounds(true)

this.physics.add.collider(player, platforms)

Make the Player Move

To allow the player to move, add the following code to the update() function:

function update() {
  if (cursors.left.isDown) {
    player.setVelocityX(-160)
  } else if (cursors.right.isDown) {
    player.setVelocityX(160)
  } else {
    player.setVelocityX(0)
  }
}

Animate the Player

Now it’s time to make the player’s image change when it’s moving. In the create() function, add the following code to create animations for the player:

this.anims.create({
  key: 'still',
  frames: [{ key: 'player', frame: 4 }],
  frameRate: 20
})

this.anims.create({
  key: 'left',
  frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
  frameRate: 10,
  repeat: -1
})

this.anims.create({
  key: 'right',
  frames: this.anims.generateFrameNumbers('player', { start: 5, end: 8 }),
  frameRate: 10,
  repeat: -1
})

Then, in the update() function, update the code as follows:

function update() {
  if (cursors.left.isDown) {
    player.setVelocityX(-160)
    player.anims.play('left', true)
  } else if (cursors.right.isDown) {
    player.setVelocityX(160)
    player.anims.play('right', true)
  } else {
    player.setVelocityX(0)
    player.anims.play('still')
  }
}

Jump

To enable the player to jump, add the following code to the update() function:

if (cursors.up.isDown && player.body.touching.down) {
  player.setVelocityY(-330)
}

Add the Stars

Let’s add stars for the player to collect. In the create() function, add the following code:

let stars = this.physics.add.group()
stars.create(22, 0, "star")
stars.create(122, 0, "star")
stars.create(222, 0, "star")
stars.create(322, 0, "star")
stars.create(422, 0, "star")
stars.create(522, 0, "star")
stars.create(622, 0, "star")
stars.create(722, 0, "star")

this.physics.add.collider(stars, platforms)

Allow the Player to Collect Stars

To enable the player to collect stars, update the create() function as follows:

let score = 0
let scoreText = this.add.text(16, 16, "Stars: 0", {
  fontSize: "32px",
  fill: "#000",
})

this.physics.add.overlap(
  player,
  stars,
  (player, star) => {
    star.disableBody(true, true)
    score += 1
    scoreText.setText("Stars: " + score)
  },
  null,
  this
)

That’s it! You have created a platform game using Phaser.js. Have fun expanding on this foundation and adding more features to create your own unique game.