phaser-framework Getting started with phaser-framework Getting Started Phaser


  1. Create a folder
  2. Create an index.html inside the new directory. Open it in the Bracket editor
  3. Download the Phaser repository from github, then grab the phaser.js file from the build folder. Place the file inside your project directory.
  4. Open index.html and link the phaser.js inside the header tag.
<!doctype html> 
<html lang="en"> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        <div id="gameContainer"></div>
  1. Create another js file inside the directory named game.js
  2. Open game.js file in editor and write the following code:
// Phaser instance, width 800px, height 600px render as CANVAS. 
// Method signature - preload, create and update

var game = new Phaser.Game(800, 600, Phaser.CANVAS,'gameContainer', { preload: preload, create: create, update: update });

function preload() {
// this method used to load your game assets

function create() {
// this method run only once used to create to game world

function update() {
// this method loop 60 times in a seconds, used to handle gameplay.
  1. Save all files and open index.html using Bracket liveserver (top right icon).
  2. The Phaser development environment is now created. A console screen should appear in the browser for error verification.