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

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

var config = {
  type: Phaser.AUTO,
  width: 400,
  height: 300,
  zoom: 2,
  pixelArt: true,
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

var game = new Phaser.Game(config);

function preload() {
  this.load.spritesheet("diamonds", "assets/sprites/diamonds32x24x5.png", {
    frameWidth: 32,
    frameHeight: 24
  });
}

function create() {
  group = this.add.group();

  group.createMultiple({
    key: "diamonds",
    frame: [0, 1, 2, 3, 4],
    frameQuantity: 1,
    repeat: 1,
    setXY: { x: 48, y: 48, stepX: 24, stepY: 16 }
  });

  Phaser.Actions.SetHitArea(group.getChildren());

  this.input.on("gameobjectover", function (pointer, obj) {
    obj.setTintFill(0xffffff);
  });

  this.input.on("gameobjectout", function (pointer, obj) {
    obj.clearTint();
  });
}

function update() {}