J.D Nicholls
Founding Full-Stack Web3 Engineer at @baxusco | Digital nomad 🎒 | Mentor 👨🏫 | Speaker 🗣️ | Developer 👨💻 | Creator of @proyecto26 #opensource #developer
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!
By J.D Nicholls
A talk about Phaser Framework and 2D Games!
Founding Full-Stack Web3 Engineer at @baxusco | Digital nomad 🎒 | Mentor 👨🏫 | Speaker 🗣️ | Developer 👨💻 | Creator of @proyecto26 #opensource #developer