JSFiddle - React, Tailwind, and code Playground

by Alexander Arutuniants

HTML

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

JavaScript

//  Here is our custom Particle
MonsterParticle = function (game, x, y) {

    Phaser.Particle.call(this, game, x, y, game.cache.getBitmapData('particleShade'));

};

//Clicable text style
var fontStyle = {
    font: "bold 25px Arial",
    fill: "#FFCC00",
    stroke: "#333",
    strokeThickness: 0,
    align: "center"
};

MonsterParticle.prototype = Object.create(Phaser.Particle.prototype);
MonsterParticle.prototype.constructor = MonsterParticle;

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


function preload() {
    game.stage.backgroundColor = '#003663';

    //  Create our bitmapData which we'll use as our particle texture
    var bmd = game.add.bitmapData(32, 32);

    var radgrad = bmd.ctx.createRadialGradient(8, 8, 2, 8, 8, 8);

    radgrad.addColorStop(0, 'rgba(255, 255, 255, 1)');
    radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)');

    bmd.context.fillStyle = radgrad;
    bmd.context.fillRect(0, 0, 15, 15);

    //  Put the bitmapData into the cache
    game.cache.addBitmapData('particleShade', bmd);
}

function create() {
    //  Create our emitter
    emitter = game.add.emitter(0, 0, 50);

    //  Here is the important line. This will tell the Emitter to emit our custom MonsterParticle class instead of a normal Particle object.
    emitter.particleClass = MonsterParticle;

    emitter.makeParticles();
    emitter.gravity = 200;

    //This event is fired on click anywhere event # 1
    game.input.onDown.add(particleBurst, this);
    
    //This is Clickable text
    textButton = game.add.text(game.world.width - 5, 5, "CLICK ME", fontStyle);
    textButton.anchor.setTo(1, 0);
    textButton.inputEnabled = true;

    //This event is fired on click on text event # 2
    textButton.events.onInputDown.add(function () {
        console.log("button is Clicked");
    }, this, 2);
}

function particleBurst(pointer) {

    //  Position the emitter where the mouse/touch event was
   ...