JSFiddle - React, Tailwind, and code Playground
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);
// MOD #1
// This is event #1 added to background sprite
var bg = game.add.sprite(0, 0);
bg.fixedToCamera = true;
bg.scale.setTo(game.width, game.height);
bg.inputEnabled = true;
bg.input.priorityID = 0; // lower priority
bg.events.onInputDown.add(particleBurst);
//This is Clickable text
textButton = game.add.text(game.world.width - 5, 5, "CLICK ME", fontStyle);
textButton.anchor.setTo(1, 0);
...