JSFiddle - React, Tailwind, and code Playground

by shiqangpan

HTML

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

CSS

html,
    body,
    div,
    canvas {
      margin: 0;
      padding: 0;
    }

JavaScript

class BootScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'BootScene'
    });
  }
  preload() {
    this.load.path = 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/';
    this.load.image('pic', 'pics/barbarian-loading.png');

  }
  create() {
    const pic = this.add.image(400, 300, 'pic');
    //Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600));
    let btn = this.add.rectangle(800, 600, 200, 150, '#000').setOrigin(1)

    btn.setInteractive();
    btn.on('pointerdown', () => {
      console.log('pointerdown');
    });
  }
}

var config = {
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
      debug: false // set to true to view zones
    }
  },
  backgroundColor: '#666', //0xf3f3f3
  scene: [BootScene]
}

var game = new Phaser.Game(config);