<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;
}

var config = {
  width: 800,
  height: 600,
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  scene: { preload, create, update }
};

var { red, yellow, blue } = colors.hexColors;

var ball, g1;

function preload() {
  this.load.image("ball", "assets/sprites/shinyball.png");
  this.load.image("dude", "assets/sprites/phaser-dude.png");
}

function create() {
  var curve = new Phaser.Curves.Spline([
    50,
    400,
    200,
    200,
    350,
    300,
    500,
    500,
    700,
    400
  ]);

  var g2 = this.add.graphics().lineStyle(1, blue);
  curve.draw(g2, 64);

  ball = this.add.follower(curve, 50, 400, "ball");
  ball.startFollow(5 * 1000);
  
  g1 = this.add.graphics();
}

function update(time, delta) {
  // `delta` === `this.game.loop.delta`
  
  // `pathDelta` is distance per 1 update.
  // Convert it to a 1-second velocity
  
  var velocity = ball.pathDelta.clone().scale(1000 / delta);

  g1.clear()
    .lineStyle(1, yellow)
    .lineBetween(ball.x, ball.y, ball.x + velocity.x, ball.y + velocity.y);
}

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

new Phaser.Game(config);