<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(){
      this.load.image('bg', 'assets/pics/the-end-by-iloe-and-made.jpg');
      this.load.image('block', 'assets/sprites/block.png');
  }// End preload

  create(){
      this.physics.world.fixedStep = false;
      this.physics.world.setBounds(0, 0, 1920, 1080);
    
      this.add.image(0,0,'bg')
          .setOrigin(0);
    
      this.player = this.physics.add.image(150, 150, 'block')
          .setScale(0.3);
      this.player.setVelocity(200, 50);
      this.player.setCollideWorldBounds();
      this.player.setBounce(1);
    
      
      setTimeout(() => {
        let cam = this.cameras.main;
        
        cam.pan(this.player.x, 
                this.player.y, 
                2000, 
                'Sine.easeInOut', 
                true, 
                (cam, progress) => { 
                         cam.panEffect.destination.x = this.player.x;
                         cam.panEffect.destination.y = this.player.y;
                         if(progress == 1){
                           cam.startFollow(this.player, false, 0.1, 0.1);
                           this.label.destroy();
                         }
                       }
               );
      }, 3000);
    
    this.label = this.add.text(150, 240, 'Camera pan delayed 3s').setOrigin(0.5, 0.5);
  }//End create

}// End class

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

var game = new Phaser.Game(config);