JSFiddle - React, Tailwind, and code Playground

by Gaurav D

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<div id="test"></div>

JavaScript

var game = new Phaser.Game(500, 400, Phaser.AUTO, 'test', {
   preload: preload,
   create: create,
   update: update
 });

 function preload() {
   this.game.load.crossOrigin = true;

   this.game.load.image('bg', 'https://i.imgur.com/3KnTflU.jpg'); //Enceladus
   this.game.load.image('logo', 'https://i.imgur.com/9mH9nwS.png'); //Nasa
   this.game.load.image('start', 'https://i.imgur.com/va1Gb.png'); //Pokemon start
 }

 function create() {

   this.titles = this.game.add.group();

   //background
   this.bg = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'bg');
   this.bg.anchor.setTo(0.5);
   this.bg.scale.setTo(0.5);
   this.titles.add(this.bg);

   //logo
   this.logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 100, 'logo');
   this.logo.anchor.setTo(0.5);
   this.logo.scale.setTo(0.1);
   this.titles.add(this.logo);

   //text for instructions 
   this.style = {
     font: "26px Arial",
     fill: '#fff'
   };
   this.text1 = this.game.add.text(
     this.game.world.centerX, this.game.world.centerY + 50,
     'Instructions: blah de blah de blah.', this.style, this.titles);
   this.text1.anchor.setTo(0.5);
   this.titles.add(this.text1);

   //start button
   this.startbtn = this.game.add.button(this.game.world.centerX, this.game.world.height - 70, 'start', this.startGame, this, 1, 0, 1);
   this.startbtn.anchor.setTo(0.5);
   this.startbtn.scale.setTo(0.5);
   this.titles.add(this.startbtn);
 }

 function update() {}