How to develop a game with Phaser CE
It is now known that PhaserJS is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
But, how to start developping your game ?
So, you’ll need to read the official tutorial on GitHub or read it online on the tutorial page of the framework site but I know it’s not easy, this is why I am writing this article, so let’s go
First, you’ll need to build an index.html page like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Phaser Game</title>
</head> <body> <div id='game'></div> <script type="text/javascript" src="js/phaser.min.js"></script> <script src="js/game.js" type="text/javascript"></script></body></html>
As you can see it contain a script link to the last phaser-ce build in the folder /js/, that you can replace by a link to the last version of Phaser CE that you can find on the official repository if you are like me and have made some w3school tutorials
The actual version of Phaser CE (when the article was written) is:
//cdn.jsdelivr.net/npm/phaser-ce@2.11.0Then, at the end of your index.html you can add the script that contains your game.js code which in short should look like the phaser.io examples
So if you want to just display an image it will look like this:
var game = new Phaser.Game(640, 360, Phaser.CANVAS, 'game', { preload: preload, create: create });function preload() { game.load.image('link', 'assets/sprites/link.png');}function create() { var sprite = game.add.sprite(80, 0, 'link');}
You can find this code on the example of displaying an image, of course the image will be put in a folder called /assets/ so your porject will look like

Once this is done just load the index.html file in your browser and it will displays a funny draw of link
If you want to run it in a server you’ll need to take a look at the documentation from expressjs site, it means you’ll need to install expressjs with nodejs then put all the code in a folder, for example /public/ at the root of your project then create a file called app.js like this:
var express = require('express');
var app = express();
var server = require('http').Server(app);
app.use('/css', express.static(__dirname + '/css')); app.use('/js', express.static(__dirname + '/js')); app.use('/assets', express.static(__dirname + '/assets'));
app.get('/', function(req,res){ res.sendFile(__dirname+'/index.html'); });server.listen(3000, function(){ console.log('Listening on '+ server.address().port); });
Your project will look like this:

Then just run
node app.jsThen connect to http://localhost:3000 in your browser to see the result
That’s all
If you want to deploy your game on heroku please read about How to deploy a NodeJS app to Heroku from Github
If you want to develop an entiere game feel free to read (in french) about Zelda mystery of Phaser CE
