JSFiddle - React, Tailwind, and code Playground

by shiqangpan

HTML

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

JavaScript

class gameScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'gameScene'
    });
  }
  preload() {
    this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', {
      frameWidth: 48,
      frameHeight: 48
    });
  }
  create() {
    const cody = this.add.sprite(200, 70, 'brawler');
  }
}

var config = {
  type: Phaser.AUTO,
  scale: {
    mode: Phaser.Scale.FIT,
    parent: 'phaser-example',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth,
    height: window.innerHeight,
  },

  scene: [{
      key: 'background',
      create: function() {
        // Game size
        let width = 800;
        let height = 600;

        // Get The game Scene
        let gameScene = this.game.scene.getScene('gameScene');

        // Set Zone for the Game-Scene
        gameScene.parent = this.add.zone(this.cameras.main.centerX, this.cameras.main.centerY, width, height);

        // set the part of the scene that should be displayed
        gameScene.cameras.main
          .setViewport(gameScene.parent.x - gameScene.parent.width / 2, gameScene.parent.y - gameScene.parent.height / 2, gameScene.parent.width, gameScene.parent.height);
      },
    },
    gameScene
  ]
};


var game = new Phaser.Game(config);