update game coin-runner

src/games/coin-runner/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/coin-runner/assets/pack.json

@@ -0,0 +1,27 @@
+{
+  "preload": {
+    "files": [
+      {
+        "type": "image",
+        "key": "coin",
+        "url": "./assets/images/coin.png"
+      },
+      {
+        "type": "image",
+        "key": "player",
+        "url": "./assets/images/player.png"
+      },
+      {
+        "type": "image",
+        "key": "background",
+        "url": "./assets/images/background.png"
+      },
+      {
+        "type": "atlas",
+        "key": "flares",
+        "textureURL": "./assets/images/flares.png",
+        "atlasURL": "./assets/images/flares.json"
+      }
+    ]
+  }
+}

src/games/coin-runner/src/config.ts

@@ -1,3 +1,4 @@
+import { BootScene } from './scenes/boot-scene';
 import { GameScene } from './scenes/game-scene';
 
 export const GameConfig: Phaser.Types.Core.GameConfig = {
@@ -8,7 +9,7 @@ export const GameConfig: Phaser.Types.Core.GameConfig = {
   height: 576,
   type: Phaser.AUTO,
   parent: 'game',
-  scene: [GameScene],
+  scene: [BootScene, GameScene],
   input: {
     keyboard: true
   },

src/games/coin-runner/src/objects/coin.ts

@@ -23,6 +23,16 @@ export class Coin extends Phaser.GameObjects.Image {
 
   private initImage(): void {
     this.setOrigin(0.5, 0.5);
+    this.setScale(0.01,1);
+    this.scene.tweens.add({
+      targets: this,
+      scaleX: 1,
+      flipX: true,
+      ease: 'Sine.easeInOut',
+      duration: 1000,
+      yoyo: true,
+      repeat: -1
+  });
   }
 
   private initEvents(): void {
@@ -64,4 +74,40 @@ export class Coin extends Phaser.GameObjects.Image {
       this.lastPosition = 'right';
     }
   }
+
+  public playerHitCoin(){
+    // emitter
+    var particles = this.scene.add.particles('flares');
+    var emitter = particles.createEmitter({
+        frame: 'yellow',
+        x: this.x,
+        y: this.y,
+        lifespan: 2000,
+        speed: { min: 400, max: 600 },
+        scale: { start: 0.4, end: 0 },
+        quantity: 1,
+        blendMode: 'ADD'
+    });
+    this.scene.time.delayedCall(50, ()=>{
+      emitter.stop();
+    }, [], this);
+
+    // tweens
+    this.scene.tweens.add({
+      targets: this,
+      scaleX: 0.5,
+      scaleY: 0.5,
+      x: this.scene.sys.canvas.width / 2,
+      y: this.scene.sys.canvas.height - 50,
+      angle: 0,
+      ease: 'Sine.easeInOut',
+      duration: 500,
+      repeat: 0,
+      yoyo: false,
+      onComplete:()=>{
+        this.setScale(0.01,1)
+        this.changePosition();
+      }
+    });
+  }
 }

src/games/coin-runner/src/scenes/boot-scene.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();
+  }
+}

src/games/coin-runner/src/scenes/game-scene.ts

@@ -7,21 +7,17 @@ export class GameScene extends Phaser.Scene {
   private coinsCollectedText: Phaser.GameObjects.Text;
   private collectedCoins: number;
   private player: Player;
+  private checkAddCoin!: boolean;
 
   constructor() {
     super({
       key: 'GameScene'
     });
   }
 
-  preload(): void {
-    this.load.image('background', './assets/images/background.png');
-    this.load.image('player', './assets/images/player.png');
-    this.load.image('coin', './assets/images/coin.png');
-  }
-
   init(): void {
     this.collectedCoins = 0;
+    this.checkAddCoin = false;
   }
 
   create(): void {
@@ -71,13 +67,19 @@ export class GameScene extends Phaser.Scene {
         this.coin.getBounds()
       )
     ) {
-      this.updateCoinStatus();
+      if(!this.checkAddCoin){
+        this.updateCoinStatus();
+        this.checkAddCoin = true;
+      }
     }
   }
 
   private updateCoinStatus(): void {
-    this.collectedCoins++;
-    this.coinsCollectedText.setText(this.collectedCoins + '');
-    this.coin.changePosition();
+    this.coin.playerHitCoin();
+    this.time.delayedCall(500, ()=>{
+      this.collectedCoins++;
+      this.coinsCollectedText.setText(this.collectedCoins + '');
+      this.checkAddCoin =false
+    }, [], this);
   }
 }