<footer><div id=version></div></footer>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 5px;
  top: 400px;
}

/* global Phaser, PhaserSceneWatcherPlugin */

class BootScene extends Phaser.Scene {
  preload () {
    this.load.image('sky', 'assets/skies/space3.png');
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    this.load.image('red', 'assets/particles/red.png');
    this.load.image('cockpit', 'assets/pics/cockpit.png');
  }

  update () {
    this.scene.launch('game').launch('hud').remove();
  }
}

class GameScene extends Phaser.Scene {
  create () {
    this.add.image(400, 300, 'sky');

    var particles = this.add.particles('red');

    var emitter = particles.createEmitter({
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: 'ADD'
    });

    var logo = this.physics.add.image(400, 100, 'logo');

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    emitter.startFollow(logo);
  }
}

class HUDScene extends Phaser.Scene {
  create () {
    this.add.image(0, 0, 'cockpit').setOrigin(0).setScale(2);
    
    this.text = this.add.text(320, 300, '').setAlign('center').setOrigin(0.5, 0);
  }
  
  update () {
    this.text.setText('Score:\n\n' + this.game.loop.frame);
  }
}

document.getElementById('version').textContent = 'Phaser v' + Phaser.VERSION;

var physicsConfig = {
  arcade: {
    gravity: { y: 200 }
  }
};

var config = {
  type: Phaser.AUTO,
  width: 640,
  height: 400,
  scene: [
    new BootScene({ key: 'boot' }), // implied { active: true }
    new GameScene({ key: 'game', physics: physicsConfig }), // implied { active: false }
    new HUDScene({ key: 'hud' }) // implied { active: false }
  ],
  loader: {
    baseURL: 'https://labs.phaser.io',
    crossOrigin: 'anonymous'
  },
  plugins: {
    global: [
      { key: 'SceneWatcher', plugin: PhaserSceneWatcherPlugin, start: true }
    ]
  },
  callbacks: {
    postBoot: function (game) {
      game.plugins.get('SceneWatcher').watchAll();
    }
  }
};

new Phaser.Game(config);