<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 config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  pixelArt: true,
  scene: {
    preload: preload,
    create: create
  },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

function preload() {
  this.load.tilemapTiledJSON(
    "map",
    "assets/tilemaps/maps/level-with-coin-objects.json"
  );
  this.load.spritesheet("coin", "assets/sprites/coin.png", {
    frameWidth: 32,
    frameHeight: 32
  });
  this.load.image("ground_1x1", "assets/tilemaps/tiles/ground_1x1.png");
}

function create() {
  var map = this.add.tilemap("map");
  var tiles = map.addTilesetImage("ground_1x1");
  var layer = map.createLayer("Tile Layer", tiles);

  this.anims.create({
    key: "spin",
    frames: this.anims.generateFrameNumbers("coin", { start: 0, end: 6 }),
    frameRate: 10,
    repeat: -1
  });

  // Create sprites from each tile with index 1, replacing with index -1 (empty tile)
  var coins = layer.createFromTiles(1, -1, { key: "coin", origin: 0 });

  this.anims.staggerPlay("spin", coins, 50);
}

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

new Phaser.Game(config);