JSFiddle - React, Tailwind, and code Playground

by Chad Neff

HTML

<div id='gamearea'></div>
<script src='https://rawgithub.com/photonstorm/phaser/master/build/phaser.js'></script>

JavaScript

(function (shipDataUri, shipDataJson) {

    var shipImage = new Image();
    shipImage.url = shipDataUri;
    var worldSize = new Phaser.Point(640, 480);

    var preload = function () {
        var game = this.game;
        game.load.addToFileList('textureatlas', 'shooter', shipDataUri, {
            atlasURL: null,
            atlasData: shipDataJson,
            format: Phaser.Loader.TEXTURE_ATLAS_JSON_HASH
        });
        game.cache.addImage('shooter', shipDataUri, shipImage);
    };

    var create = function () {
        var game = this.game;
        var cursorKeys = game.input.keyboard.createCursorKeys();
        var player1 = game.add.sprite(worldSize.x / 2, worldSize.y / 2, 'shooter', 'playerShip1_blue.png');
        player1.rotationSpeed = 180;
        player1.accelerationSpeed = 200;
        player1.maxSpeed = 250;
        player1.anchor.setTo(0.5, 0.5);

        game.physics.enable(player1, Phaser.Physics.ARCADE);

        player1.body.drag.setTo(0);
        player1.body.maxVelocity.setTo(player1.maxSpeed, player1.maxSpeed);
        player1.body.collideWorldBounds = true;
        // player1.angle = -90;
 
        player1.update = function () {
            var dt = this.game.time.physicsElapsed;
            if (cursorKeys.left.isDown) {
                this.body.angularVelocity = -this.rotationSpeed;
            } else if (cursorKeys.right.isDown) {
                this.body.angularVelocity = this.rotationSpeed;
            } else {
                this.body.angularVelocity = 0;
            }

            if (cursorKeys.up.isDown) {
                this.body.acceleration.x = Math.cos(this.rotation) * this.accelerationSpeed;
                this.body.acceleration.y = Math.sin(this.rotation) * this.accelerationSpeed;
            } else if (cursorKeys.down.isDown) {
                this.body.acceleration.x = -Math.cos(this.rotation) * this.accelerationSpeed;
                this.body.acceleration.y = -Math.sin(this.rotation) *...