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="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.2.1/phaser.min.js"></script>
<div id="game_div"> </div>

CSS

body {
    margin: 0px;
}

#game_div {
      width: 400px;
      margin: 0px;
    }

JavaScript

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

    },

    create: function() { 
        var that = this;
        $(window).resize(function() { that.resize(); } );
        this.resize();
    },
    
    resize: function() {
        console.log("here2");
        var w = 400;
        var h = 490;
        //this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        if (window.innerWidth > window.innerHeight) {
            var width = w+0.2*window.innerWidth;
            var height = (width / window.innerWidth) * window.innerHeight;
        } else {
            var height = h+0.2*window.innerHeight;
            var width = (height / window.innerHeight) * window.innerWidth;
        }
        
        this.game.width = width;
        this.game.height = height;
        this.scale.width = width;
        this.scale.height = height;
        this.game.canvas.width = width;
        this.game.canvas.height = height;
        //this.game.world.setBounds(0, 0, width, height);
        this.game.scale.width = width;
        this.game.scale.height = height;
        this.game.camera.setSize(width, height);
        this.game.camera.setBoundsToWorld();
        this.game.renderer.resize(width, height);
        // Tell ScaleManager that we have changed sizes
        this.game.scale.setSize();  
    },
    
    newSize: function(srcWidth, srcHeight, maxWidth, maxHeight) {
        var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        return { width: srcWidth*ratio, height: srcHeight*ratio };  
    },
    
    update: function() {
        var size = this.newSize(this.game.width, this.game.height, window.innerWidth, window.innerHeight);
        $("canvas").css("width", size.width);
        $("canvas").css("height", size.height);
    ...