Building a JavaScript Game with Phaser: A Step-by-Step Guide

Creating a game with Phaser, an easy-to-use and popular platform with physics support, is an exciting project. Whether you want to distribute your game through the web or package it as a desktop or mobile app, Phaser, which is based on HTML5 technologies, has got you covered.

In this tutorial, we will cover the basics of setting up a modern project using Phaser 3 and get you started on your journey to building your own JavaScript HTML5 game.

First, let’s install Phaser in a folder using npm by running the following commands:

1 2	npm init -y npm install phaser

Next, we will set up Parcel to bundle our game. Install Parcel globally by executing:

1	npm install -g parcel-bundler

Create a game.js file and include the following code:

1
2
3

import Phaser from 'phaser'

new Phaser.Game()

To build our JavaScript using Parcel, run the following command:

1	parcel watch game.js

Parcel will generate a dist/game.js file containing the bundled JavaScript code.

Now, create an index.html file and add the following content:

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

To run an HTTP server with the content of this folder, we will use browser-sync. Install it globally using the command:

1	npm install -g browser-sync

Start the server and enable file watching by running:

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

The server will launch on port 3000 and automatically open a browser window to connect to it. It will also refresh the browser whenever a file in the current folder (including subfolders) is modified. This feature is extremely useful for rapid prototyping during game development.

If everything is set up correctly, you should see a blank screen in your browser.

To initialize Phaser and make something happen on the screen, replace the existing code in game.js with the following:

import Phaser from 'phaser'

function preload() {
 this.load.setBaseURL('http://labs.phaser.io')
 this.load.image('sky', 'assets/skies/space3.png')
 this.load.image('logo', 'assets/sprites/phaser3-logo.png')
 this.load.image('red', 'assets/particles/red.png')
}

function create() {
 this.add.image(400, 300, 'sky')

 const particles = this.add.particles('red')

 const emitter = particles.createEmitter({
 speed: 100,
 scale: { start: 1, end: 0 },
 blendMode: 'ADD'
 })

 const logo = this.physics.add.image(400, 100, 'logo')

 logo.setVelocity(100, 200)
 logo.setBounce(1, 1)
 logo.setCollideWorldBounds(true)

 emitter.startFollow(logo)
}

const config = {
 type: Phaser.AUTO,
 width: 800,
 height: 600,
 physics: {
 default: 'arcade',
 arcade: {
 gravity: { y: 200 }
 }
 },
 scene: {
 preload: preload,
 create: create
 }
}

const game = new Phaser.Game(config)

You can download the assets required for this code from here.

Once you’ve updated the game.js file, you should see the Phaser demo app running successfully in your browser. Exciting, isn’t it?

This marks the end of the introduction to building games with Phaser series. Stay tuned for more posts in the Phaser tag, where we will dive deeper into game development using this powerful platform.

tags: [“Phaser”, “JavaScript game development”, “HTML5”, “game programming”]