Example
- Create a folder
- Create an index.html inside the new directory. Open it in the Bracket editor
- Download the Phaser repository from github, then grab the phaser.js file from the build folder. Place the file inside your project directory.
- 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>
- Create another js file inside the directory named game.js
- 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.
}
- Save all files and open index.html using Bracket liveserver (top right icon).
- The Phaser development environment is now created. A console screen should appear in the browser for error verification.