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


Example

  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"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>
  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.