JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

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

JavaScript

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

var emitter;

function preload() {
    game.load.image('wasp', 'assets/glass.png');
    game.load.image('glass', 'assets/glass.png');
    game.load.image('water', 'assets/blue-raster-floor.png');

}

function create() {

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.add.tileSprite(0, 344, 800, 256, 'water');

    emitter = game.add.emitter(game.world.centerX, 200);

    emitter.makeParticles('glass');

    emitter.setXSpeed(-200, 200);
    emitter.setYSpeed(-150, -250);

    emitter.bringToTop = true;
    emitter.setAlpha(0.1, 1, 500);
    emitter.setScale(-2, 2, 1, 1, 3000, Phaser.Easing.Sinusoidal.InOut, true);
    emitter.gravity = 300;


    emitter.start(false, 5000, 700, 50);


    game.time.events.add(3000, destroyEmitter, this);

}

function tweens(cash) {



    var bugs;
    var index = 0;
    var data;
    var pos = [];
    var tween;

    var tweenData = { x: 0, y: 0 };

    tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, "Sine.easeInOut");

    tween.yoyo(true);

    data = tween.generateData(60);

    bugs = game.add.group();
    pos.push(new Phaser.Point(32, 0));
    pos.push(new Phaser.Point(300, 100));
    pos.push(new Phaser.Point(600, 70));

    bugs.create(pos[0].x, pos[0].y, 'wasp');
    bugs.create(pos[1].x, pos[1].y, 'wasp');
    bugs.create(pos[2].x, pos[2].y, 'wasp');

    tween.onUpdateCallback(function () {
        bugs.getAt(0).x = pos[0].x + data[index].x;
        bugs.getAt(0).y = pos[0].y + data[index].y;
        bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
        bugs.getAt(1).y = pos[1].y + data[index].y;

        //  Inverse one of the values
        bugs.getAt(2).x = pos[2].x - data[index].x;
        bugs.getAt(2).y = pos[2].y + data[index].y;

        index++;

        if (index === data.length)
        {
            index = 0;
        }
    });

    tween.start();

}

function...