<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: 5px;
}
// This variable name must be unique among all scenes
let scene1;

function init() {
  // You do need to *read* `this`, once:
  scene1 = this;
  
  scene1.input.keyboard.once('keydown-R', function() {
    scene1.scene.restart();
  });

  scene1.events.once('shutdown', function() {
    scene1 = null;
  });
}

function preload() {
  scene1.load.image('sky', 'assets/skies/space3.png');
  scene1.load.image('logo', 'assets/sprites/phaser3-logo.png');
  scene1.load.image('red', 'assets/particles/red.png');
}

function create() {
  scene1.add.image(400, 300, 'sky');

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

  const logo = scene1.physics.add.image(400, 100, 'logo');

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

  emitter.startFollow(logo);
}

function update() {}

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

const game = new Phaser.Game({
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 200 }
    }
  },
  scene: {
    init: init,
    preload: preload,
    create: create,
    update: update
  },
  loader: {
    baseURL: 'https://labs.phaser.io',
    crossOrigin: 'anonymous'
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/phaser@3.23.0/dist/phaser.js
  2. https://cdn.jsdelivr.net/npm/@samme/colors@1.2.0/dist/colors.umd.js