Hello World Phaser Example

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

by darthdeus

HTML

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

CSS

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

Babel + JSX

// Initialize Phaser, and creates a 400x490px game
var game = window.game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
var game_state = {};

var box, cursors;

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

    preload: function() { 
		// Function called first to load all the assets
    },

    create: function() { 
    	// Fuction called after 'preload' to setup the game
        box = game.add.sprite(250, 300, 'hello');
        
        game.physics.arcade.enable(box);
        
        box.body.collideWorldBounds = true;
        box.body.bounce.setTo(0.5, 0.5);
        box.body.setCircle(20);
        box.body.velocity.x = 150;


    		cursors = game.input.keyboard.createCursorKeys();
    },
    
    update: function() {
    	if (cursors.up.isDown) {
      	box.body.velocity.x += 10;
      }
      
      if (cursors.down.isDown) {
      	box.body.velocity.x -= 10;
      }
		},
    
    render: function() {
    	game.debug.body(box);
    }
};

// Add and start the 'main' state to start the game
game.state.add('main', game_state.main);  
game.state.start('main');