<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: 0;
  top: 0;
  padding: 5px;
  background: rgba(0, 0, 0, 0.8)
}

var player1;
var player2;
var graphic;
var mid = new Phaser.Math.Vector2();
var WIDTH = 2048;
var HEIGHT = 1536;
var FOLLOW_LERP_X = 0.05;
var FOLLOW_LERP_Y = 0.05;
var ZOOM_MIN = 0.1;
var ZOOM_MAX = 2;
var ZOOM_LERP = 0.05;

var config = {
  type: Phaser.AUTO,
  parent: "phaser-example",
  physics: {
    default: "arcade",
    arcade: { gravity: { y: 300 } }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

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

var game = new Phaser.Game(config);

function preload() {
  this.load.image("block", "assets/sprites/block.png");
}

function create() {
  this.cameras.main.setBounds(0, 0, WIDTH, HEIGHT);
  this.physics.world.setBounds(0, 0, WIDTH, HEIGHT);

  this.add
    .grid(
      0,
      0,
      WIDTH,
      HEIGHT,
      128,
      128,
      colors.hexColors.black,
      1,
      colors.hexColors.blue,
      1
    )
    .setOrigin(0)
    .setAlpha(0.5);

  player1 = this.physics.add
    .image(400, 300, "block")
    .setBounce(1)
    .setVelocity(300)
    .setCollideWorldBounds(true);
  
  player2 = this.physics.add
    .image(400, 300, "block")
    .setBounce(1)
    .setVelocity(-300)
    .setCollideWorldBounds(true);
  
  graphic = this.add.graphics({ fillStyle: { color: colors.hexColors.red } });

  this.cameras.main.startFollow(mid, false, FOLLOW_LERP_X, FOLLOW_LERP_Y);
}

function update() {
  mid.copy(player1.body.center).lerp(player2.body.center, 0.5);

  graphic.clear().fillPointShape(mid, 10);

  var dist = Phaser.Math.Distance.BetweenPoints(
    player1.body.position,
    player2.body.position
  );
  var cam = this.cameras.main;
  var min = Math.min(this.scale.width, this.scale.height) / 1.5;

  cam.setZoom(
    Phaser.Math.Linear(
      cam.zoom,
      Phaser.Math.Clamp(min / dist, ZOOM_MIN, ZOOM_MAX),
      ZOOM_LERP
    )
  );
}