html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

PIXI.Sprite.defaultAnchor.x = 0.5;
PIXI.Sprite.defaultAnchor.y = 0.5;

const { colors } = window;

const game = new Phaser.Game({
  width: 480,
  height: 320,
  state: {
    init() {},

    preload() {
      this.load.baseURL =
        "https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/";
      this.load.crossOrigin = "anonymous";
      this.load.image("block", "sprites/block.png");
      this.load.spritesheet("fruit", "sprites/fruitnveg64wh37.png", 64, 64);
    },

    create() {
      const mask = this.add.graphics(0, 0);
      mask.beginFill(0);
      mask.drawCircle(0, 0, 100);
      
      const box = this.add.image(240, 160, "block");

      const bg = this.add.image(240, 160, "block");
      bg.tint = 0x444444;
      bg.mask = mask;

      const fruit = this.add.image(240, 160, "fruit", 14);
      fruit.mask = mask;
      
      const text = this.add.text(0, 0, "Tap on the box", { fill: "white" });
      text.anchor.x = 0;
      text.anchor.y = 0;

      this.input.addMoveCallback((pointer, x, y) => {
        mask.x = x;
        mask.y = y;
      });
    },

    render() {
      const debug = this.game.debug;

      debug.phaser(10, 580);
    }
  }
});