<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('volcano', 'assets/pics/the-end-by-iloe-and-made.jpg');
  }// End preload

  create(){
      this.add.image(0,0,'volcano');
      
      const camera = this.cameras.main;
      
      camera.setZoom(0.5);
      
      const tweenConfig = {
          targets: camera,
          zoom: 1.5,
          duration: 3000,
          ease: 'Sine.easeInOut',
          yoyo: true,
          repeat: -1
      }
      
      this.tweens.add(tweenConfig);
      
      
  }//End create

}// 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);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/phaser/3.24.1/phaser.min.js