<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);
This Pen doesn't use any external CSS resources.