JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.3.0/phaser.min.js"></script>
JavaScript
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
}
var sprite;
var bullets;
var emitter;
var fireRate = 5;
var nextFire = 0;
function create() {
// create a new bitmap data object
var bulletSprite = game.add.bitmapData(20,20);
// draw to the canvas context like normal
bulletSprite.ctx.beginPath();
bulletSprite.ctx.rect(0,0,128,128);
bulletSprite.ctx.fillStyle = '#ff0000';
bulletSprite.ctx.fill();
// create a new bitmap data object
var emitterSprite = game.add.bitmapData(5,5);
// draw to the canvas context like normal
emitterSprite.ctx.beginPath();
emitterSprite.ctx.rect(0,0,128,128);
emitterSprite.ctx.fillStyle = '#ff0000';
emitterSprite.ctx.fill();
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#313131';
bullets = game.add.group();
bullets.enableBody = true;
bullets.physicsBodyType = Phaser.Physics.ARCADE;
bullets.createMultiple(50, bulletSprite);
bullets.setAll('checkWorldBounds', true);
bullets.setAll('outOfBoundsKill', true);
sprite = game.add.sprite(400, 300, bulletSprite);
sprite.anchor.set(0.5);
game.physics.enable(sprite, Phaser.Physics.ARCADE);
sprite.body.allowRotation = false;
emitter = game.add.emitter(0, 0, 100);
emitter.makeParticles(emitterSprite);
emitter.gravity = 0;
}
function update() {
sprite.rotation = game.physics.arcade.angleToPointer(sprite);
if (game.input.activePointer.isDown){
fire();
}
bullets.forEachAlive(function(item) {
if( this.math.fuzzyEqual(item.x,item.endPointX,5) && this.math.fuzzyEqual(item.y,item.endPointY,5) ){
emitter.x = item.x;
emitter.y = item.y;
emitter.start(true, 2000, null, 10);
item.kill();
}
}, this);
}
function...