JSFiddle - React, Tailwind, and code Playground

by Lteoo

JavaScript

var player = null
var cursors = null

function preload() {
  this.load.spritesheet('player', '../assets/sprites/playerSprites.png', { frameWidth: 18, frameHeight: 23 })
  this.load.spritesheet('enemy', '../assets/sprites/enemySprites.png', { frameWidth: 18, frameHeight: 23 })
}

function create() {

  var player = this.physics.add.sprite(100, 450, 'player').setScale(2, 2)

  this.anims.create({
    key: 'idle',
    frames: [{ key: 'player', frame: 7 }],
    frameRate: 20
  })

  this.anims.create({
    key: 'walkHorizontal',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  })

  this.anims.create({
    key: 'walkVertical',
    frames: this.anims.generateFrameNumbers('player', { start: 4, end: 5 }),
    frameRate: 10,
    repeat: -1
  })

  this.anims.create({
    key: 'enemyWalkHorizontal',
    frames: this.anims.generateFrameNumbers('enemy', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  })

  this.anims.create({
    key: 'enemyWalkVertical',
    frames: this.anims.generateFrameNumbers('enemy', { start: 4, end: 5 }),
    frameRate: 10,
    repeat: -1
  })

  this.anims.create({
    key: 'enemyIdle',
    frames: [{ key: 'enemy', frame: 6 }],
    frameRate: 20
  })

  var path = new Phaser.Curves.Path(50, 500);

  path.lineTo(500, 500);
  path.lineTo(500, 100);
  path.lineTo(50, 100);
  path.lineTo(50, 500);

  var graphics = this.add.graphics();

  graphics.lineStyle(5, 0x00000, 5);

  path.draw(graphics, 128);

  var enemy = this.add.follower(path, 50, 500, 'enemy').setScale(2, 2)

  enemy.startFollow({
    duration: 30000,
    loop: -1,
    onLoop() {
      enemy.flipX = false
    }
  });

  this.cursors = this.input.keyboard.createCursorKeys()

  this.physics.add.collider(player, enemy);

  this.player = player
  this.enemy = enemy
}

function update() {
  var cursors = this.cursors
  var player = this.player
  var enemy = this.enemy

  if (enemy.x >= 500) {
   ...