Dracarys

Great balls of fire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.17.0/phaser.js"></script>
<div id="content"></div>

JavaScript

// yes, you can make it wider ;)
const SCREENWIDTH = 800;

class Fireball {
  constructor(config) {    
    var x = config.scene.tweens.addCounter({
    	from: config.x,
      to: config.x + config.speed * config.duration / 1000,
      duration: config.duration
    });

    // this does all the work
    this.fireball = config.scene.add.particles('yellow').createEmitter({
      radial: true,
      angle: {
        min: -30,
        max: 30
      },
      lifespan: {
        min: 200,
        max: 1000
      },
      quantity: {
        min: 2,
        max: 7
      },
      gravityY: 2,
      alpha: {
        min: 0.8,
        max: 0.0
      },
      scale: {
        start: 1.0,
        end: 0,
        ease: 'Power3'
      },
      blendMode: 'ADD',
      accelerationX: {
        min: 10,
        max: 100
      },
      accelerationY: {
        min: 10,
        max: 40
      },
      frequency: 5,
      x: {
      	onEmit: function (p, k, v) {
      		return x.getValue();
        }
      },
      y: config.y
    });
    
    // hold on...
    this.fireball.stop();

    // had to give each fireball it's own sound effect
    this.fireball_sfx = config.scene.sound.add('fireball', {
      loop: false,
      volume: 1.0
    });
  }

  // here we go
  start() {
    // start the emitter
    this.fireball.start();
    // bit of sound
    this.fireball_sfx.play();
  }

}


// ================================================================

// Two scene classes, a boot class to load the images and sfx
// and the actual class with the dino

class Dracarys extends Phaser.Scene {
  constructor() {
    super({
      key: 'Dracarys'
    });
  }

  create() {

    this.cameras.main.setBackgroundColor('#6655bb');

    this.container = this.add.container();

    // mr dino - starts offscreen
    this.dino = this.add.sprite(SCREENWIDTH + 400, (768 / 2) + 100, 'dino', 'dino-closed').setOrigin(1.0, 0.5);
    this.container.add(this.dino);

    let self = this;

   ...