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

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: 2,
    repeat: 1,
    setAlpha: { value: 0.5 },
    setXY: { x: 48, y: 48, stepX: 24, stepY: 16 },
    hitArea: new Phaser.Geom.Rectangle(0, 0, 32, 24),
    hitAreaCallback: Phaser.Geom.Rectangle.Contains
  });
  
  this.input.on('gameobjectover', function (pointer, obj) {
    obj.clearAlpha();
  });
  
  this.input.on('gameobjectout', function (pointer, obj) {
    obj.setAlpha(0.5);
  });

}

function update() {
}

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

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

var game = new Phaser.Game(config);