<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.image("cursor", "assets/sprites/drawcursor.png");
  this.load.image("can", "assets/sprites/cokecan.png");
  this.load.image("mine", "assets/sprites/mine.png");
  this.load.spritesheet("coin", "assets/sprites/coin-16x16x4.png", { frameWidth: 16, frameHeight: 16 });
  this.load.once("filecomplete-spritesheet-coin", () => {
    this.anims.create({ key: "coin", frames: "coin", repeat: -1 });
  })
}

function create() {
  this.cameras.main.centerOn(0, 0);

  const can = this.add.image(0, 0, "can");

  const coin = this.add.sprite(0, 0, "coin").setDepth(-1).play("coin");

  const cursor = this.add.image(0, 0, "cursor");

  this.input.on("pointermove", (pointer) => {
    cursor.setPosition(pointer.worldX, can.y);
  });

  this.input.on("pointerdown", (pointer) => {
    const { worldX } = pointer;
    const distance = Math.abs(can.x - worldX);
    const duration = 2 * distance;
    const rise = 0.5 * distance;
    
    cursor.setPosition(worldX, can.y);

    this.add.tween({
      targets: coin,
      props: {
        x: { from: can.x, to: worldX, duration: duration },
        y: {
          from: can.y,
          to: -rise,
          // yoyo is 1 duration forward + 1 duration backward.
          duration: 0.5 * duration,
          ease: "Quad.easeOut",
          yoyo: true
        }
      }
    });
  });
}

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

const config = {
  width: 720,
  height: 480,
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  scene: {
    preload,
    create
  }
};

const game = new Phaser.Game(config);