This is PHASER!

Loading WebGL...

Fork this example in Codepen here

Juan David Nicholls Cardona

What can Phaser do for you?

Drawings

Animations

Mobile Games

Physics

 

Amazing Websites

 

2D Games

HELLO WORLD!

var game = new Phaser.Game(415, 570, Phaser.AUTO, '', {
    init: function() {
        this.stage.backgroundColor = "#FF0000";
    },
    create: function() {

      this.helloWorld = this.game.add.text(
        this.game.world.centerX, 
        this.game.world.centerY, 
        "Hello World", { 
          font: "60px Arial", 
          fill: "#ffffff" 
        }
      );
      this.helloWorld.anchor.set(0.5);
    },
    update: function() {
      this.helloWorld.angle += 1;
    }
});

Fork this example in Codepen here

var game = new Phaser.Game(400, 400, Phaser.AUTO, 'game', {
  preload: function(){
    //By default if the browser tab loses focus the game will pause.
    this.stage.disableVisibilityChange = true;

    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;
    this.game.stage.backgroundColor = '#FFF';
    this.game.load.image('heart', heartURI);
    this.game.load.spritesheet('button', buttonURI, 150, 149);
  },
  create:function(){
    var midX = this.game.world.centerX;
    var midY = this.game.world.centerY;
  	
    this.lives = this.game.add.group();
    this.lives.create(midX - 64, midY - 30, 'heart').anchor.set(0.5);
    this.lives.create(midX - 32, midY - 30, 'heart').anchor.set(0.5);
    this.lives.create(midX, midY - 30, 'heart').anchor.set(0.5);
    this.lives.create(midX + 32, midY - 30, 'heart').anchor.set(0.5);
    this.lives.create(midX + 64, midY - 30, 'heart').anchor.set(0.5);
    
    this.btnKill = this.game.add.button(
        this.game.world.centerX, 
        this.game.world.centerY + 50, 
        'button', 
        this.kill, 
        this, 
        1, 1, 0, 1);
    this.btnKill.scale.set(0.5);
    this.btnKill.anchor.set(0.5);
  },
  kill: function(){
    this.lives.getTop().destroy();
    if(this.lives.length == 0){
      setTimeout(function(){
        game.state.restart();
      }, 1000);
    }
  }
});

Buttons, Groups and Images(Sprites)!

Fork this example in Codepen here

var RotateSprite = function (game, x, y, key, frame, keyRotate) {    
    Phaser.Sprite.call(this, game, x, y, key, frame);
    var self = this;
    //Code Code Code  
    //self.onDragStart();
    return self;
};
RotateSprite.prototype = Object.create(Phaser.Sprite.prototype);
RotateSprite.prototype.constructor = RotateSprite;
RotateSprite.prototype.update = function() {
  var self = this;
};
//Other methods
RotateSprite.prototype.onDragStart = function(sprite) {
  this.isDragging = true;
};

Fork this example in Codepen here

Plugins

Check the example here!

More here :)

Phaser Workshop using ES2015 here!