<div id="container">
  <div id="phaserdiv"></div>
</div>

#container{
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
}

class MainScene extends Phaser.Scene {
  constructor(){
    super('mainScene');
  }

  preload(){
    // mummy37x45 has 18 frames
    this.load.spritesheet('mummy', 'assets/animations/mummy37x45.png', { frameWidth: 37, frameHeight: 45 });
  }// End preload

  create(){
    // Player
    this.player = this.add.sprite(150,150,'mummy').setScale(2);
    
    // Player animation
    this.anims.create({
      key: 'right',
      frames: this.anims.generateFrameNumbers('mummy', { start: 0, end: 17 }),
      frameRate: 8,
      repeat: 0
    });
    
    // Text
    this.txt = this.add.text(150,80,'Frame: 1').setOrigin(0.5);
    this.add.text(150,210,'Press right').setOrigin(0.5);
    // Animation events
    this.player.on('animationcomplete-right', (anim) => { 
      this.txt.setText(`Texture set to last frame`);
      this.player.setTexture('mummy', 17);
    });
    this.player.on('animationupdate-right', (anim, frame) => { this.txt.setText(`Frame: ${frame.index}`) });    
    
    
    // keyboard cursors
    this.cursors = this.input.keyboard.createCursorKeys();
      
  }//End create
  
  update(){
    if(this.cursors.right.isDown){
      this.player.anims.play('right', true);
    } else this.player.anims.stop('right');
    
  }//End update

}// End class

var config = {
    type: Phaser.WEBGL,
    width: 300,
    height: 300,
    parent: 'phaserdiv',
    scene: [MainScene],
    loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

var game = new Phaser.Game(config);