Update game-scene.ts

src/boilerplates/webpack-boilerplate/src/config.ts

@@ -12,7 +12,8 @@ export const GameConfig: Phaser.Types.Core.GameConfig = {
   physics: {
     default: 'arcade',
     arcade: {
-      gravity: { y: 200 }
+      gravity: { y: 200 },
+      debug: true,
     }
   },
   scene: [MainScene]

src/boilerplates/webpack-boilerplate/src/objects/redhat.ts

@@ -17,8 +17,9 @@ export class Redhat extends Phaser.GameObjects.Image {
 
   private initPhysics() {
     this.scene.physics.world.enable(this);
-    this.body.setVelocity(100, 200);
+    this.body.setVelocity(300, 400);
     this.body.setBounce(1, 1);
+    this.body.setSize(200,200)
     this.body.setCollideWorldBounds(true);
   }
 }

src/games/asteroid/src/config.ts

@@ -20,7 +20,7 @@ export const GameConfig: Phaser.Types.Core.GameConfig = {
   physics: {
     default: 'arcade',
     arcade: {
-      debug: false
+      debug: true
     }
   },
   backgroundColor: '#000000',

src/games/breakout/assets/images/flares.json

@@ -0,0 +1,57 @@
+{"frames": {
+
+    "blue":
+    {
+        "frame": {"x":2,"y":2,"w":128,"h":128},
+        "rotated": false,
+        "trimmed": false,
+        "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+        "sourceSize": {"w":128,"h":128},
+        "pivot": {"x":0.5,"y":0.5}
+    },
+    "green":
+    {
+        "frame": {"x":132,"y":2,"w":128,"h":128},
+        "rotated": false,
+        "trimmed": false,
+        "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+        "sourceSize": {"w":128,"h":128},
+        "pivot": {"x":0.5,"y":0.5}
+    },
+    "red":
+    {
+        "frame": {"x":262,"y":2,"w":128,"h":128},
+        "rotated": false,
+        "trimmed": false,
+        "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+        "sourceSize": {"w":128,"h":128},
+        "pivot": {"x":0.5,"y":0.5}
+    },
+    "white":
+    {
+        "frame": {"x":392,"y":2,"w":128,"h":128},
+        "rotated": false,
+        "trimmed": false,
+        "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+        "sourceSize": {"w":128,"h":128},
+        "pivot": {"x":0.5,"y":0.5}
+    },
+    "yellow":
+    {
+        "frame": {"x":522,"y":2,"w":128,"h":128},
+        "rotated": false,
+        "trimmed": false,
+        "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+        "sourceSize": {"w":128,"h":128},
+        "pivot": {"x":0.5,"y":0.5}
+    }},
+    "meta": {
+        "app": "http://www.codeandweb.com/texturepacker",
+        "version": "1.0",
+        "image": "flares.png",
+        "format": "RGBA8888",
+        "size": {"w":652,"h":132},
+        "scale": "1",
+        "smartupdate": "$TexturePacker:SmartUpdate:f2781d89823d5a67fc31381af364b421:da82646b19b2f0c08684086824b1e581:71625947cf221c10549b852c13ffedc7$"
+    }
+    }

src/games/breakout/assets/pack.json

@@ -6,6 +6,12 @@
         "key": "font",
         "textureURL": "./assets/font/font.png",
         "fontDataURL": "./assets/font/font.fnt"
+      },
+      {
+        "type": "atlas",
+        "key": "flares",
+        "textureURL": "./assets/images/flares.png",
+        "atlasURL": "./assets/images/flares.json"
       }
     ]
   }

src/games/breakout/src/config.ts

@@ -1,5 +1,5 @@
-import { BootScene } from './scenes/boot-scene';
-import { GameScene } from './scenes/game-scene';
+import { BootScene } from './scenes/bootScene';
+import { GameScene } from './scenes/gameScene';
 
 export const GameConfig: Phaser.Types.Core.GameConfig = {
   title: 'Breakout',
@@ -14,7 +14,8 @@ export const GameConfig: Phaser.Types.Core.GameConfig = {
   physics: {
     default: 'arcade',
     arcade: {
-      gravity: { x: 0, y: 0 }
+      gravity: { x: 0, y: 0 },
+      // debug: true,
     }
   },
   scale: {

src/games/breakout/src/interfaces/interfaces.ts

@@ -1,4 +1,4 @@
-export interface IRectangleConstructor {
+interface IRectangleConstructor {
   scene: Phaser.Scene;
   x: number;
   y: number;

src/games/breakout/src/objects/ball.ts

@@ -1,8 +1,8 @@
-import { IRectangleConstructor } from '../interfaces/interfaces';
+
 
 export class Ball extends Phaser.GameObjects.Rectangle {
   body: Phaser.Physics.Arcade.Body;
-
+  emitter!: Phaser.GameObjects.Particles.ParticleEmitter;
   constructor(aParams: IRectangleConstructor) {
     super(
       aParams.scene,
@@ -16,6 +16,7 @@ export class Ball extends Phaser.GameObjects.Rectangle {
 
     this.initRectangle();
     this.initPhysics();
+    this.initPractices();
     this.scene.add.existing(this);
   }
 
@@ -32,8 +33,21 @@ export class Ball extends Phaser.GameObjects.Rectangle {
     this.body.setCollideWorldBounds();
   }
 
+  private initPractices(): void {
+    const particles = this.scene.add.particles('flares');
+    this.emitter = particles.createEmitter({
+      frame: 'red',
+      speed: 100,
+      scale: { start: 0.1, end: 0 },
+      angle: {min: 60, max:100},
+      blendMode: 'ADD'
+    }).stop();
+    this.emitter.startFollow(this, 5,5);
+  }
+
   public applyInitVelocity(): void {
     this.body.setVelocity(Phaser.Math.RND.between(-200, 200), 200);
     this.body.speed = 800;
+    this.emitter.start()
   }
 }

src/games/breakout/src/objects/brick.ts

@@ -1,8 +1,8 @@
-import { IRectangleConstructor } from '../interfaces/interfaces';
+import { settings } from '../settings';
 
 export class Brick extends Phaser.GameObjects.Rectangle {
   body: Phaser.Physics.Arcade.Body;
-
+  isdestroyed!: boolean;
   constructor(aParams: IRectangleConstructor) {
     super(
       aParams.scene,
@@ -13,18 +13,55 @@ export class Brick extends Phaser.GameObjects.Rectangle {
       aParams.fillColor,
       aParams.fillAlpha
     );
-
+    this.isdestroyed = false;
     this.initRectangle();
-    this.initPhysics();
+    this.initPhysics(); 
     this.scene.add.existing(this);
   }
 
   private initRectangle(): void {
     this.setOrigin(0);
+    this.setScale(0,0);
+    const x = this.x / (settings.BRICK.WIDTH + settings.BRICK.SPACING);
+    const y = (this.y - settings.BRICK.MARGIN_TOP) / (settings.BRICK.HEIGHT + settings.BRICK.SPACING);
+    const WIDTH = settings.LEVELS[settings.currentLevel].WIDTH;
+    this.scene.tweens.add({
+      targets: this,
+      scaleX: 1,
+      scaleY: 1,
+      ease: 'Sine.easeInOut',
+      duration: 300,
+      delay: this.scene.tweens.stagger(50, {}),
+      repeat: 0,
+      yoyo: false,
+      onComplete: () => {
+        this.body.setSize(settings.BRICK.WIDTH, settings.BRICK.HEIGHT);
+      }
+    });
+
+  }
+
+  update(): void {
+    if(this.y > this.scene.scale.height - 100)
+      this.destroy();
   }
 
   private initPhysics(): void {
     this.scene.physics.world.enable(this);
     this.body.setImmovable(true);
   }
+
+  public destroyBrick(): void {
+    this.isdestroyed = true;
+    this.setOrigin(0.5,0.5);
+    this.body.setAccelerationY(150);
+    this.body.checkCollision.none = true;
+    this.scene.tweens.add({
+      targets: this,
+      duration: 1000,
+      yoyo: false,
+      angle: 360,
+      repeat: -1,
+    });
+  }
 }

src/games/breakout/src/objects/player.ts

@@ -1,4 +1,3 @@
-import { IRectangleConstructor } from '../interfaces/interfaces';
 
 export class Player extends Phaser.GameObjects.Rectangle {
   body: Phaser.Physics.Arcade.Body;

src/games/breakout/src/scenes/bootScene.ts

@@ -0,0 +1,61 @@
+export class BootScene extends Phaser.Scene {
+  private loadingBar: Phaser.GameObjects.Graphics;
+  private progressBar: Phaser.GameObjects.Graphics;
+
+  constructor() {
+    super({
+      key: 'BootScene'
+    });
+  }
+
+  preload(): void {
+    // set the background and create loading bar
+    // this.cameras.main.setBackgroundColor(0x98d687);
+    this.createLoadingbar();
+
+    // pass value to change the loading bar fill
+    this.load.on(
+      'progress',
+      function (value: number) {
+        this.progressBar.clear();
+        this.progressBar.fillStyle(0xfff6d3, 1);
+        this.progressBar.fillRect(
+          this.cameras.main.width / 4,
+          this.cameras.main.height / 2 - 16,
+          (this.cameras.main.width / 2) * value,
+          16
+        );
+      },
+      this
+    );
+
+    // delete bar graphics, when loading complete
+    this.load.on(
+      'complete',
+      function () {
+        this.progressBar.destroy();
+        this.loadingBar.destroy();
+      },
+      this
+    );
+
+    // load out package
+    this.load.pack('preload', './assets/pack.json', 'preload');
+  }
+
+  update(): void {
+    this.scene.start('GameScene');
+  }
+
+  private createLoadingbar(): void {
+    this.loadingBar = this.add.graphics();
+    this.loadingBar.fillStyle(0x5dae47, 1);
+    this.loadingBar.fillRect(
+      this.cameras.main.width / 4 - 2,
+      this.cameras.main.height / 2 - 18,
+      this.cameras.main.width / 2 + 4,
+      20
+    );
+    this.progressBar = this.add.graphics();
+  }
+}