Build games as easily as you play them — join the Phaser Beam waitlist for Early Access.
// Bullet class - fires from ship and "destroys" planet class Bullet extends Phaser.GameObjects.Image { speed; flame; constructor(scene, x, y) { super(scene, x, y, "bullet"); this.speed = Phaser.Math.GetSpeed(450, 1); this.postFX.addBloom(0xffffff, 1, 1, 2, 1.2); this.name = "bullet"; } fire (x, y) { this.setPosition(x, y); this.setActive(true); this.setVisible(true); } destroyBullet () { if (this.flame === undefined) { // Create particles for flame this.flame = this.scene.add.particles(this.x, this.y, 'flares', { frame: 'white', color: [0xfacc22, 0xf89800, 0xf83600, 0x9f0404], colorEase: 'quad.out', lifespan: 500, scale: { start: 0.70, end: 0, ease: 'sine.out' }, speed: 200, advance: 500, frequency: 50, blendMode: 'ADD', duration: 1000, }); this.flame.setDepth(1); // When particles are complete, destroy them this.flame.once("complete", () => { this.flame.destroy(); }) } // Destroy bullet after 50ms (helps to enter inside of planet) this.scene.time.addEvent({ delay: 50, callback: () => { this.setActive(false); this.setVisible(false); this.destroy(); } }); } // Update bullet position and destroy if it goes off screen update (time, delta) { this.x += this.speed * delta; if (this.x > this.scene.sys.canvas.width) { this.setActive(false); this.setVisible(false); this.destroy(); } } } // Logic game class Example extends Phaser.Scene { ship; bullets; // Control for firing bullets spacebar; constructor () { super({ key: 'MainScene' }); } init () { // Description text for fire bullet this.add.text(10, 10, 'Press "space" to fire bullet', { font: '16px Courier', fill: '#ffffff' }).setDepth(100); // Fade in camera this.cameras.main.fadeIn(800); } preload () { this.load.setBaseURL('https://cdn.phaserfiles.com/v385'); this.load.setPath("assets/"); this.load.image("bullet", "sprites/bullets/bullet6.png"); this.load.image("ship", "sprites/x2kship.png"); this.load.image("bg", "tests/space/nebula.jpg"); this.load.image("planet", "tests/space/blue-planet.png"); this.load.atlas('flares', '/particles/flares.png', '/particles/flares.json'); } create () { // Just stars background const bg = this.add.image(0, 0, "bg") .setOrigin(0, 0) .setTint(0x333333); const planet = this.physics.add.image(this.sys.scale.width - 100, this.sys.scale.height / 2, "planet") .setScale(.2); planet.flipX = true; // Tween to rotate slow planet this.tweens.add({ targets: planet, duration: 5000000, rotation: 360, repeat: -1 }); // FX bloom for the planet const planetFX = planet.postFX.addBloom(0xffffff, 1, 1, 0, 1.2); this.ship = this.add.image(100, this.sys.scale.height / 2, 'ship') .setDepth(2); this.bullets = this.physics.add.group({ classType: Bullet, maxSize: 30, runChildUpdate: true, }); this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); // Effect for planet bloom const planetFXTween = this.tweens.add({ targets: planetFX, blurStrength: 2, yoyo: true, duration: 100, paused: true, onComplete: () => { planetFXTween.restart(); planetFXTween.pause(); } }); this.physics.add.overlap(this.bullets, planet, (planet, bullet) => { // If bullet hits planet, destroy the bullet and play the effect bullet.destroyBullet(); if (!planetFXTween.isPlaying()) { planetFXTween.restart(); planetFXTween.play(); } }) } // Bullet fire update() { if (this.spacebar) { if (Phaser.Input.Keyboard.JustDown(this.spacebar)) { const bullet = this.bullets.get(); if (bullet) { bullet.fire(this.ship.x, this.ship.y); } } } } } const config = { type: Phaser.WEBGL, width: 700, height: 500, physics: { default: 'arcade' }, backgroundColor: '#2f3640', parent: 'phaser-example', scene: Example }; const game = new Phaser.Game(config);
// Bullet class - fires from ship and "destroys" planet
class Bullet extends Phaser.GameObjects.Image
{
speed;
flame;
constructor(scene, x, y) {
super(scene, x, y, "bullet");
this.speed = Phaser.Math.GetSpeed(450, 1);
this.postFX.addBloom(0xffffff, 1, 1, 2, 1.2);
this.name = "bullet";
}
fire (x, y)
{
this.setPosition(x, y);
this.setActive(true);
this.setVisible(true);
}
destroyBullet ()
{
if (this.flame === undefined) {
// Create particles for flame
this.flame = this.scene.add.particles(this.x, this.y, 'flares',
{
frame: 'white',
color: [0xfacc22, 0xf89800, 0xf83600, 0x9f0404],
colorEase: 'quad.out',
lifespan: 500,
scale: { start: 0.70, end: 0, ease: 'sine.out' },
speed: 200,
advance: 500,
frequency: 50,
blendMode: 'ADD',
duration: 1000,
});
this.flame.setDepth(1);
// When particles are complete, destroy them
this.flame.once("complete", () => {
this.flame.destroy();
})
}
// Destroy bullet after 50ms (helps to enter inside of planet)
this.scene.time.addEvent({
delay: 50,
callback: () => {
this.setActive(false);
this.setVisible(false);
this.destroy();
}
});
}
// Update bullet position and destroy if it goes off screen
update (time, delta)
{
this.x += this.speed * delta;
if (this.x > this.scene.sys.canvas.width) {
this.setActive(false);
this.setVisible(false);
this.destroy();
}
}
}
// Logic game
class Example extends Phaser.Scene
{
ship;
bullets;
// Control for firing bullets
spacebar;
constructor ()
{
super({
key: 'MainScene'
});
}
init ()
{
// Description text for fire bullet
this.add.text(10, 10, 'Press "space" to fire bullet', { font: '16px Courier', fill: '#ffffff' }).setDepth(100);
// Fade in camera
this.cameras.main.fadeIn(800);
}
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
this.load.setPath("assets/");
this.load.image("bullet", "sprites/bullets/bullet6.png");
this.load.image("ship", "sprites/x2kship.png");
this.load.image("bg", "tests/space/nebula.jpg");
this.load.image("planet", "tests/space/blue-planet.png");
this.load.atlas('flares', '/particles/flares.png', '/particles/flares.json');
}
create ()
{
// Just stars background
const bg = this.add.image(0, 0, "bg")
.setOrigin(0, 0)
.setTint(0x333333);
const planet = this.physics.add.image(this.sys.scale.width - 100, this.sys.scale.height / 2, "planet")
.setScale(.2);
planet.flipX = true;
// Tween to rotate slow planet
this.tweens.add({
targets: planet,
duration: 5000000,
rotation: 360,
repeat: -1
});
// FX bloom for the planet
const planetFX = planet.postFX.addBloom(0xffffff, 1, 1, 0, 1.2);
this.ship = this.add.image(100, this.sys.scale.height / 2, 'ship')
.setDepth(2);
this.bullets = this.physics.add.group({
classType: Bullet,
maxSize: 30,
runChildUpdate: true,
});
this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
// Effect for planet bloom
const planetFXTween = this.tweens.add({
targets: planetFX,
blurStrength: 2,
yoyo: true,
duration: 100,
paused: true,
onComplete: () => {
planetFXTween.restart();
planetFXTween.pause();
}
});
this.physics.add.overlap(this.bullets, planet, (planet, bullet) => {
// If bullet hits planet, destroy the bullet and play the effect
bullet.destroyBullet();
if (!planetFXTween.isPlaying()) {
planetFXTween.restart();
planetFXTween.play();
}
})
}
// Bullet fire
update() {
if (this.spacebar)
{
if (Phaser.Input.Keyboard.JustDown(this.spacebar))
{
const bullet = this.bullets.get();
if (bullet) {
bullet.fire(this.ship.x, this.ship.y);
}
}
}
}
}
const config = {
type: Phaser.WEBGL,
width: 700,
height: 500,
physics: {
default: 'arcade'
},
backgroundColor: '#2f3640',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);