Hello World Phaser Example

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

by Fotios Kossyvas

HTML

<script src="http://examples.phaser.io/_site/phaser/phaser.2.4.6.min.js"></script>
<div id="game_div"> </div>

CSS

#game_div {
      width: 800px;
    }

JavaScript

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'game_div');
var game_state = {};

// Creates a new 'main' state that wil contain the game
game_state.main = function() { };  
game_state.main.prototype = {

preload: function(){
    game.load.tilemap('map', 'http://examples.phaser.io/assets/tilemaps/maps/features_test.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('ground_1x1', 'http://examples.phaser.io/assets/tilemaps/tiles/ground_1x1.png');
    game.load.image('walls_1x2', 'http://examples.phaser.io/assets/tilemaps/tiles/walls_1x2.png');
    game.load.image('tiles2', 'http://examples.phaser.io/assets/tilemaps/tiles/tiles2.png');
    game.load.spritesheet('coin', 'http://examples.phaser.io/assets/sprites/coin.png', 32, 32);
    game.load.image('phaser', 'http://examples.phaser.io/assets/sprites/arrow.png');
},

create: function(){
    this.map = game.add.tilemap('map');
    this.map.addTilesetImage('ground_1x1');
    this.map.addTilesetImage('walls_1x2');
    this.map.addTilesetImage('tiles2');
    this.bglayer = this.map.createLayer('Tile Layer 3');
    this.oblayer = this.map.createLayer('Tile Layer 2');
    this.layer = this.map.createLayer('Tile Layer 1');
    this.layer.resizeWorld();
    this.map.setLayer(this.layer);
    this.sprite = game.add.sprite(260, 100, 'phaser');
    game.camera.follow(this.sprite);
    game.input.onTap.add(this.showTileType, this);
    this.text1="";
    this.text2="";
    this.text3="";
},

update: function(){
},

render: function(){
 	game.debug.text(this.text1, 32, 32, 'rgb(255,255,255)');
 	game.debug.text(this.text2, 32, 48, 'rgb(255,255,255)');
 	game.debug.text(this.text3, 32, 64, 'rgb(255,255,255)');
},

showTileType: function(pointer){
    this.currentTile = this.map.getTileWorldXY(pointer.worldX,pointer.worldY,32,32,this.layer);
    this.text1="pointer.worldX:"+pointer.worldX;
    this.text2="pointer.worldX:"+pointer.worldX;
    this.text3="currentTile index:"+this.currentTile.index;
}

}

// Add and...