<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('block', 'assets/sprites/block.png');
      this.load.image('clown', 'assets/sprites/clown.png');
  }// End preload
    

  create(){
      let showDebug = false;
      this.physics.world.debugGraphic.setVisible(showDebug);
      
      // Block
      this.block = this.physics.add.image(150, 240, 'block')
          .setBounce(0, 0.4)
          .setMass(4)
          .setGravityY(500)
          .setMaxVelocity(0, 400)
          .setOrigin(0.5, 1)
          .setScale(0.5);
      this.block.body.customSeparateX = true;
      
      // Static invisible body under the block 
      const blockFloor = this.createFloor();
      
      // Player
      this.player = this.physics.add.image(150,300, 'clown')
          .setBounce(0.1)
          .setDrag(90, 0)
          .setOrigin(0.5, 1)
          .setCollideWorldBounds(true);
      
      //Colliders
      this.physics.add.collider(blockFloor, this.block); 
      this.physics.add.collider(this.block, this.player);
      
      // Controls
      this.cursors = this.input.keyboard.createCursorKeys();
      
      this.cursors.up.on('down', () => {
          console.log(this.player.body.deltaYFinal());
          if(Math.abs(this.player.body.deltaYFinal()) < 0.2) {
              this.player.setVelocityY(-350);
          }
      })
      
      this.cursors.down.on('down', () => {
          showDebug = !showDebug;
          this.physics.world.debugGraphic.setVisible(showDebug);
          this.physics.world.drawDebug = showDebug;
      })
      
      // Text
      this.add.text(
          150,
          20,
          'UP -> jump\nLEFT -> move left\nRIGHT -> move right\nDOWN -> toggle debug')
          .setAlign('center')
          .setOrigin(0.5, 0);
    
  }//End create
    
    
  createFloor(){
      let g = this.add.graphics();
      g.generateTexture('blocksFloor', 300, 2);
      g.destroy();
      
      return this.physics.add.staticImage(150, this.block.y + 1, 'blocksFloor');
  }
    
  
  update(){
        if(this.cursors.right.isDown){
            console.log('right');
            this.player.setVelocityX(100);
        } else if(this.cursors.left.isDown){
            this.player.setVelocityX(-100);
        }
  }//End update

}// End class

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

var game = new Phaser.Game(config);