JSFiddle - React, Tailwind, and code Playground

by shiqangpan

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

JavaScript

class BootScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'BootScene'
    });
  }

  preload() {

    this.load.path = 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/'
    this.load.atlas('elves', 'elves-craft-pixel.png', 'elves-craft-pixel.json');
  }

  create() {
    let player = this.add.image(100, 100, 'elves', 'blue_idle_0').setOrigin(0);
    this.add.rectangle(100, 100, player.width, player.height, 0xff0000, .3).setOrigin(0);
    console.log(player.width, player.height);

    let bar = new Phaser.GameObjects.Graphics(this);
    this.add.existing(bar);
    this.x = 100 + 10;
    this.y = 100 - 5 - 16;
    bar.fillStyle(0x000000);
    bar.fillRect(this.x, this.y, 80, 16);

    bar.fillStyle(0xffffff);
    bar.fillRect(this.x + 2, this.y + 2, 76, 12);

    bar.fillStyle(0x00ff00);
    let d = 76
    bar.fillRect(this.x + 2, this.y + 2, d, 12);
  }
}

var config = {
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
      debug: false // set to true to view zones
    }
  },
  backgroundColor: '0xD3D3DC',
  scene: [BootScene]
}

var game = new Phaser.Game(config);