Hello World Phaser Example

Kudos Thomas Palef: http://www.lessmilk.com/ http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/

HTML

<script src="https://github.com/photonstorm/phaser/releases/download/v2.4.4/phaser.min.js"></script>
<div id="peli_div"> </div>

CSS

#game_div {
      width: 400px;
      margin: auto;
      margin-top: 50px;
    }

JavaScript

// Initialize Phaser, and creates a 400x490px game
var peli = new Phaser.Game(400, 490, Phaser.CANVAS, 'peli_div');

// player.js

var HardDrive = HardDrive || {};
 
HardDrive.Player = function (peliRef, x, y) {
 	
    // peli was passed into peliRef, although normally we would probably just use 'peli' as well
    console.log(peliRef,x,y)
    Phaser.Sprite.call(this, peliRef, x, y, 'car');
   
    /* ADD USING OUR GAME reference: peliRef */
    peliRef.add.existing(this);
    
    /* or the global variable
    peli.add.existing(this)
    
    /* OR ADD USING sprite's 'game' quick-reference */
    //this.game.add.existing(this)
    
    
};
 
HardDrive.Player.prototype = Object.create(Phaser.Sprite.prototype);
HardDrive.Player.constructor = HardDrive.Player;
 
HardDrive.Player.prototype.create = function () {
  
    console.log("Player create");   
    console.log("this", this) // => HardDrive.Player
    this.game.physics.enable(this, Phaser.Physics.ARCADE);
    this.anchor.setTo(0.5, 0.5);
}

// game.js

var HardDrive = HardDrive || {};
 
HardDrive.Main = function () {
};
 
HardDrive.Main.prototype = {
    
    preload: function() {
        
        // 'this' refers to Main state
        console.log("Main preload", this); 
        // and states have a .game property
    	this.game.load.image('car', 'http://s3.amazonaws.com/uploads-1969f46zwpmbh5cm3kr2/hello.png');
    },
    
    create: function () {
 	   console.log("Main create", this);
        
       // peli defined globally above
       var car2 = new HardDrive.Player(peli,200, 200)
       // you could also do 
       //car2 = new HardDrive.Player(this.game,200,200)
       
       car2.create()
       
    }
}
// 

peli.state.add('main', HardDrive.Main);  
peli.state.start('main');