Added stone splashes when an asteroid is destroyed

src/Application.js

@@ -1,6 +1,5 @@
 import BlockCollection from "./BlockCollection";
 import {BigAsteroidFactory, MediumAsteroidFactory, SmallAsteroidFactory} from "./factory/AsteroidFactory";
-import FlashFactory from "./factory/FlashFactory";
 import BulletFactory from "./factory/BulletFactory";
 import ShipFactory from "./factory/ShipFactory";
 import ScoreLabel from "./block/ScoreLabel";
@@ -9,24 +8,26 @@ import CollisionProcessor from "./processor/CollisionProcessor";
 import AnimationProcessor from "./processor/AnimationProcessor";
 import GameProcessor from "./processor/GameProcessor";
 import GarbageProcessor from "./processor/GarbageProcessor";
+import {FireSplashFactory, StoneSplashFactory} from "./factory/SplashFactory";
 
 export default class Application {
     run(canvas) {
         const context = canvas.getContext('2d');
 
-        const asteroidCollection = new BlockCollection();
-        const smallAsteroidFactory = new SmallAsteroidFactory(canvas.width, canvas.height, asteroidCollection);
-        const mediumAsteroidFactory = new MediumAsteroidFactory(canvas.width, canvas.height, asteroidCollection, smallAsteroidFactory);
-        const bigAsteroidFactory = new BigAsteroidFactory(canvas.width, canvas.height, asteroidCollection, mediumAsteroidFactory);
+        const splashCollection = new BlockCollection();
+        const fireSplashFactory = new FireSplashFactory(canvas.width, canvas.height, splashCollection);
+        const stoneSplashFactory = new StoneSplashFactory(canvas.width, canvas.height, splashCollection);
 
-        const flashCollection = new BlockCollection();
-        const flashFactory = new FlashFactory(canvas.width, canvas.height, flashCollection);
+        const asteroidCollection = new BlockCollection();
+        const smallAsteroidFactory = new SmallAsteroidFactory(canvas.width, canvas.height, asteroidCollection, stoneSplashFactory);
+        const mediumAsteroidFactory = new MediumAsteroidFactory(canvas.width, canvas.height, asteroidCollection, stoneSplashFactory, smallAsteroidFactory);
+        const bigAsteroidFactory = new BigAsteroidFactory(canvas.width, canvas.height, asteroidCollection, stoneSplashFactory, mediumAsteroidFactory);
 
         const bulletCollection = new BlockCollection();
-        const bulletFactory = new BulletFactory(canvas.width, canvas.height, bulletCollection, flashFactory);
+        const bulletFactory = new BulletFactory(canvas.width, canvas.height, bulletCollection, fireSplashFactory);
 
         const shipCollection = new BlockCollection();
-        const shipFactory = new ShipFactory(canvas.width, canvas.height, shipCollection, bulletFactory, flashFactory);
+        const shipFactory = new ShipFactory(canvas.width, canvas.height, shipCollection, bulletFactory, fireSplashFactory);
 
         const ship = shipFactory.create();
         ship.setPosition(canvas.width / 2, canvas.height / 2);
@@ -37,9 +38,9 @@ export default class Application {
 
         const pipeline = new Pipeline(
             new CollisionProcessor(shipCollection, bulletCollection, asteroidCollection),
-            new AnimationProcessor(context, shipCollection, bulletCollection, asteroidCollection, flashCollection, labelCollection),
+            new AnimationProcessor(context, shipCollection, bulletCollection, asteroidCollection, splashCollection, labelCollection),
             new GameProcessor(shipCollection, asteroidCollection, bigAsteroidFactory, scoreLabel),
-            new GarbageProcessor(shipCollection, bulletCollection, asteroidCollection, flashCollection),
+            new GarbageProcessor(shipCollection, bulletCollection, asteroidCollection, splashCollection),
         );
 
         function render(time) {

src/block/Asteroid.js

@@ -1,10 +1,11 @@
 import Block from "./Block";
 
 export default class Asteroid extends Block {
-    constructor(canvasWidth, canvasHeight, size, asteroidFactory) {
+    constructor(canvasWidth, canvasHeight, size, splashFactory, asteroidFactory) {
         const radius = size === 3 ? 20 : size === 2 ? 15 : 10;
         super(canvasWidth, canvasHeight, radius);
         this.size = size;
+        this.splashFactory = splashFactory;
         this.asteroidFactory = asteroidFactory;
         this.endurance = size;
         this.rotation = 0;
@@ -17,6 +18,12 @@ export default class Asteroid extends Block {
         this.angles.push(this.angles[0]);
     }
     onDestroy() {
+        for (let i = 0; i < 6; i++) {
+            const splash = this.splashFactory.create();
+            splash.setPosition(this.position.x, this.position.y);
+            splash.setDirection(this.getDirection() + (i - 3) * Math.random() * 55);
+            splash.setSpeed(1.2 + Math.random() * 3);
+        }
         if (this.size <= 1) {
             return;
         }

src/block/Bullet.js

@@ -1,9 +1,9 @@
 import Block from "./Block";
 
 export default class Bullet extends Block {
-    constructor(canvasWidth, canvasHeight, flashFactory) {
+    constructor(canvasWidth, canvasHeight, splashFactory) {
         super(canvasWidth, canvasHeight, 2);
-        this.flashFactory = flashFactory;
+        this.splashFactory = splashFactory;
         this.setSpeed(4);
     }
     onDraw(context) {
@@ -22,10 +22,10 @@ export default class Bullet extends Block {
     }
     onDestroy() {
         for (let i = 0; i < 10; i++) {
-            const flash = this.flashFactory.create();
-            flash.setPosition(this.position.x, this.position.y);
-            flash.setDirection(this.getDirection() - 180 + (i - 5) * Math.random() * 14);
-            flash.setSpeed(3 + Math.random() * 3);
+            const splash = this.splashFactory.create();
+            splash.setPosition(this.position.x, this.position.y);
+            splash.setDirection(this.getDirection() - 180 + (i - 5) * Math.random() * 14);
+            splash.setSpeed(3 + Math.random() * 3);
         }
     }
 }

src/block/Splash.js

@@ -1,29 +1,53 @@
 import Block from "./Block";
 
-export default class Flash extends Block {
-    constructor(canvasWidth, canvasHeight) {
+class Splash extends Block {
+    constructor(canvasWidth, canvasHeight, lifetime) {
         super(canvasWidth, canvasHeight, 2);
+        this.lifetime = lifetime;
+        this.createTime = null;
+        this.transparency = 0.3;
     }
     onUpdate(time) {
         if (this.stateTime == null) {
             return;
         }
-        if (this.stateTime + 5000 < time) {
+        if (this.createTime == null) {
+            this.createTime = this.stateTime;
+        }
+        if (this.createTime + this.lifetime < time) {
             this.isDestroyed = true;
+        } else {
+            this.transparency *= (this.lifetime - (time - this.createTime)) / this.lifetime;
         }
     }
+    onOutOfScreen() {
+        this.isDestroyed = true;
+    }
+}
+
+export class FireSplash extends Splash {
     onDraw(context) {
         context.save();
         context.translate(this.position.x, this.position.y);
         context.rotate(this.direction);
         context.beginPath();
         context.moveTo(0, 1);
         context.lineTo(0, -1);
-        context.strokeStyle = 'rgb(255, 150, 150, 0.3)';
+        context.strokeStyle = 'rgb(255, 150, 150, ' + this.transparency + ')';
         context.stroke();
         context.restore();
     }
-    onOutOfScreen() {
-        this.isDestroyed = true;
+}
+
+export class StoneSplash extends Splash {
+    onDraw(context) {
+        context.save();
+        context.translate(this.position.x, this.position.y);
+        context.rotate(this.direction);
+        context.beginPath();
+        context.arc(0, 0, 2, 0, Math.PI * 2, true);
+        context.fillStyle = 'rgb(110, 110, 110, ' + this.transparency + ')';
+        context.fill();
+        context.restore();
     }
 }

src/factory/AsteroidFactory.js

@@ -1,25 +1,26 @@
 import BlockFactory from "./BlockFactory";
 import Asteroid from "../block/Asteroid";
 
-export class AsteroidFactory extends BlockFactory {
-    constructor(canvasWidth, canvasHeight, collection, asteroidFactory) {
+class AsteroidFactory extends BlockFactory {
+    constructor(canvasWidth, canvasHeight, collection, splashFactory, asteroidFactory) {
         super(canvasWidth, canvasHeight, collection);
+        this.splashFactory = splashFactory;
         this.asteroidFactory = asteroidFactory;
     }
 }
 
 export class BigAsteroidFactory extends AsteroidFactory {
     doCreate(radius, positionX, positionY, direction, speed) {
-        return new Asteroid(this.canvasWidth, this.canvasHeight, 3, this.asteroidFactory);
+        return new Asteroid(this.canvasWidth, this.canvasHeight, 3, this.splashFactory, this.asteroidFactory);
     }
 }
 export class MediumAsteroidFactory extends AsteroidFactory {
     doCreate(radius, positionX, positionY, direction, speed) {
-        return new Asteroid(this.canvasWidth, this.canvasHeight, 2, this.asteroidFactory);
+        return new Asteroid(this.canvasWidth, this.canvasHeight, 2, this.splashFactory, this.asteroidFactory);
     }
 }
 export class SmallAsteroidFactory extends AsteroidFactory {
     doCreate(radius, positionX, positionY, direction, speed) {
-        return new Asteroid(this.canvasWidth, this.canvasHeight, 1, this.asteroidFactory);
+        return new Asteroid(this.canvasWidth, this.canvasHeight, 1, this.splashFactory, this.asteroidFactory);
     }
 }

src/factory/SplashFactory.js

@@ -1,8 +1,17 @@
-import Splash from "../block/Flash";
 import BlockFactory from "./BlockFactory";
+import {FireSplash, StoneSplash} from "../block/Splash";
 
-export default class FlashFactory extends BlockFactory {
+class SplashFactory extends BlockFactory {
+}
+
+export class FireSplashFactory extends SplashFactory {
+    doCreate() {
+        return new FireSplash(this.canvasWidth, this.canvasHeight, 2000);
+    }
+}
+
+export class StoneSplashFactory extends SplashFactory {
     doCreate() {
-        return new Splash(this.canvasWidth, this.canvasHeight);
+        return new StoneSplash(this.canvasWidth, this.canvasHeight, 1500);
     }
 }