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

  preload() {
    this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
    this.load.image('magicAttack', 'magicAttack.png');

    this.load.spritesheet('cooldown_sheet', 'cooldown_sheet.png', {
      frameWidth: 48,
      frameHeight: 48
    });
  }

  setupAnimation() {
    this.anims.create({
      key: 'cooldown_animation',
      frames: this.anims.generateFrameNumbers('cooldown_sheet', {
        start: 0,
        end: 15
      }),
      frameRate: 6,
      repeat: 0,
    });
  }

  create() {
    // btn background 
    this.add.image(100, 100, 'magicAttack').setScale(1)
    var cd = this.add.sprite(100, 100, 'cooldown1').setFlipX(false).setScale(1.5)

    this.setupAnimation();
    cd.play('cooldown_animation');

    // button
    let circle2 = this.add.circle(100, 100, 150, 0x000000, 0).setScale(.2)
    cd.on('animationcomplete', () => {
      cd.setVisible(false)
    });
    circle2.setStrokeStyle(50, 0x000000, 1);
  }

}

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

var game = new Phaser.Game(config);