Hello World Phaser Example

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

by ggaudrea

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.1.3/phaser.min.js"></script>
<div id="game_div"> </div>

CSS

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

JavaScript

// This should initialize a landscape you can drag

// Please note that the top clipping is due to the fact that my 
// tilemap cells are 16x16px but my tilemapLayer images are 16x64 (for performance)
// I patch Phaser.TilemapLayer.prototype.render at runtime to fix this in v 2.1. 
// I have not done so for 2.2 because it breaks. So, I am leaving the patch out of this example

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, 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 = {

    data: {},
    current: {},
    prevDragPoint: null,

    preload: function() {
        // Function called first to load all the assets
        game.load.image('tiles', 'http://sploderheads.sploder.kicks-ass.net:3000/gamedata/first/02/images/tiles.png');
        game.load.image('skies', 'http://sploderheads.sploder.kicks-ass.net:3000/gamedata/first/02/images/skies.png');
    },

    create: function() {

        this.data = {
            mapWidth: 128,
            mapHeight: 48,
            groundContour:...