JSFiddle - React, Tailwind, and code Playground

by shiqangpan

HTML

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

CSS

body { margin: 0; }
canvas { width: 100%; height: 100% }

JavaScript

var total_attack = 0;
var isMagicReady = false;

class BootScene extends Phaser.Scene {
  constructor() {
    super({ key: 'BootScene' });
    console.log(total_attack);
  }
  preload() {
    this.load.path = 'https://raw.githubusercontent.com/albert10jp/web_rpg/main/btn_cast_spell/assets/';
    this.load.spritesheet('cooldown_sheet', 'cooldown_sheet.png', { frameWidth: 48, frameHeight: 48 });
    this.load.image('magicAttack', 'magicAttack.png');
    this.load.atlas('bolt', 'bolt_atlas.png', 'bolt_atlas.json');

    // load brawler (player)
    this.load.spritesheet('brawler', 'brawler48x48.png', {
      frameWidth: 48, frameHeight: 48
    });

    // load frog (enemies)
    this.load.path = 'https://raw.githubusercontent.com/albert10jp/web_rpg/main/btn_cast_spell/assets/frog/';
    for (var i = 1; i < 3; i++) {
      this.load.image("frog_attack" + i, "frog" + i + ".gif");
    }
  }
  setupAnimation() {
    this.anims.create({
      key: 'frog_idle',
      frames: [
        { key: 'frog_attack1' },
        { key: 'frog_attack2' },
        { key: 'frog_attack1' },
      ],
      frameRate: 2,
      repeat: 1
    });

    this.anims.create({
      key: 'player_attack',
      frames: this.anims.generateFrameNumbers(
        'brawler', { frames: [30, 31, 30] }),
      frameRate: 2,
      repeat: 0,
    });

    this.anims.create({
      key: 'magic_effect',
      frames: this.anims.generateFrameNames('bolt', {
        // frames: [0, 1, 2, 3, 4, 5, 6, 7]
        // prefix: 'bolt_ball_', start: 1, end: 10, zeroPad: 4
        prefix: 'bolt_sizzle_', start: 1, end: 10, zeroPad: 4
      }),
      frameRate: 12,
      repeat: 0,
    });

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

  animComplete(animation) {
    if (animation.key === 'player_attack') {
      this.bolt.visible = true;
     ...