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/liyi93319/phaser3_rpg/main/part1/assets/';
    this.load.spritesheet('player', 'RPG_assets.png', {
      frameWidth: 16,
      frameHeight: 16
    });
  }
  create() {
    this.player = this.physics.add.sprite(100, 50, 'player', 6).setScale(5);
    this.cursors = this.input.keyboard.createCursorKeys();

    this.anims.create({
      key: 'left',
      frames: this.anims.generateFrameNumbers('player', {
        frames: [1, 7, 1, 13]
      }),
      frameRate: 10,
      repeat: -1
    });

    // animation with key 'right'
    this.anims.create({
      key: 'right',
      frames: this.anims.generateFrameNumbers('player', {
        frames: [1, 7, 1, 13]
      }),
      frameRate: 10,
      repeat: -1
    });

  }

  update() {
    this.player.body.setVelocity(0);
    if (this.cursors.left.isDown) {
      this.player.body.setVelocityX(-80);
      this.player.anims.play('left', true); // walk animation
      this.player.flipX = true;
    } else if (this.cursors.right.isDown) {
      this.player.body.setVelocityX(80);
      this.player.anims.play('right', true);
      this.player.flipX = false;
    } else {
      this.player.anims.stop();
    }
  }
}

var config = {
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
    }
  },
  scene: [BootScene]
}

var game = new Phaser.Game(config);