JSFiddle - React, Tailwind, and code Playground

by shiqangpan

HTML

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

CSS

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

JavaScript

var BootScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize:
    function BootScene ()
    {
        Phaser.Scene.call(this, { key: 'BootScene' });
    },
    preload: function ()
    {
        // load the resources here
    },
    create: function ()
    {
/*         this.scene.start('WorldScene'); */
        this.add.text(50, 200, 'BootScene!', { color: 'green' });
    }
});

var WorldScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize:
    function WorldScene ()
    {
        Phaser.Scene.call(this, { key: 'WorldScene' });
    },
    preload: function ()
    {
        
    },
    create: function ()
    {
        // create your world here
        this.add.text(50, 200, 'WorldScene!', { color: 'green' });
    }
});

var config = {
    type: Phaser.AUTO,
    parent: 'content',
    width: 320,
    height: 240,
    zoom: 2,
    pixelArt: true,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 }
        }
    },
    scene: [
        BootScene,        
        WorldScene,
    ]
};
var game = new Phaser.Game(config);