Hello World Phaser Example

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

by nkovacs

HTML

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

CSS

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

JavaScript

// Phaser 2.1.3

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(1920, 1080, Phaser.CANVAS, 'game_div', null, false, false);
var game_state = {};

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

    preload: function() { 
        this.game.time.advancedTiming = true;
        this.stage.disableVisibilityChange = true;
        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.parentIsWindow = true;
        this.game.world.scale.x = 4;
        this.game.world.scale.y = 4;
        this.game.scale.pageAlignHorizontally = true;
        this.game.scale.pageAlignVeritcally = true;
        this.game.scale.refresh();
        
		// Function called first to load all the assets
        game.load.image('hello', 'https://s3.amazonaws.com/uploads-1969f46zwpmbh5cm3kr2/hello.png');
    },

    addSprite: function() {
        var hello_sprite = game.add.sprite(0, 150, 'hello');
        var tween = game.add.tween(hello_sprite);
        var duration = 10000;
        var endX = 400;
        tween.to({ x: endX }, duration).start();
        var startTime = new Date().getTime();
        var interval = setInterval(function() {
            var currentTime = new Date().getTime();
            var elapsed = currentTime - startTime;
            if (elapsed > duration) {
                elapsed = duration;
            }
            var ratio = elapsed / duration;
            var calculatedX = 0 + endX * ratio;
            console.log(hello_sprite.x - calculatedX);
        }, 1000);
        setTimeout(function() {
            clearInterval(interval)
        }, duration + 200);
    },
    create: function() { 
    	// Fuction called after 'preload' to setup the game
        this.addSprite();
    },
    render: function() {
        this.game.debug.text(this.game.time.fps || '--', 2, 44,...