Hello World Phaser Example

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

by DOK_UA

HTML

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

CSS

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

JavaScript

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 400, 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() { 
		// Function called first to load all the assets
        game.load.image('hello', 'https://s3.amazonaws.com/uploads-1969f46zwpmbh5cm3kr2/hello.png');
    },

    create: function() { 
    		game.physics.startSystem(Phaser.Physics.P2JS);
    		game.physics.p2.restitution = 0.7;
      
      	//start drawing a circle
        var graphics = game.add.graphics(200, 200);
        graphics.beginFill(0xFF3300);
        graphics.lineStyle(0);
        graphics.beginFill(0xFFFF0B);
        graphics.drawCircle(100, 100, 40);
        graphics.endFill();
       //creating an sprite from draw
        var spriteCircle = game.add.sprite(100, 300, graphics.generateTexture());
        //  And destroy the original graphics object
   			graphics.destroy();
    		spriteCircle.anchor.set(0.5);
        game.physics.p2.enable([ spriteCircle ], false);
        spriteCircle.body.setCircle(20);// 20 radius
       
        spriteCircle.body.mass = 1;
        spriteCircle.body.debug = true;
        //give some initial velocity
        spriteCircle.body.velocity.x = 5000
        spriteCircle.body.velocity.y = 20000
        
        spriteCircle.body.damping = 0.5;
    	  

    
    },
    
    update: function() {
		
    },
};

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