creeps moving

public/assets/missions/mission_01.json

@@ -49,19 +49,9 @@
         {
             "waves": [
                 {
-                    "firstCreepSpawnTick": 2000,
+                    "firstCreepSpawnTick": 500,
                     "spawnIntervalTicks": 1000,
-                    "creeps": [0, 0, 0, 0, 0, 1, 1, 1, 0]
+                    "creeps": [0, 0, 0, 0, 0]
-                },
-                {
-                    "firstCreepSpawnTick": 2000,
-                    "spawnIntervalTicks": 1000,
-                    "creeps": [0, 0, 0, 0, 0, 1, 1, 1, 0]
-                },
-                {
-                    "firstCreepSpawnTick": 2000,
-                    "spawnIntervalTicks": 1000,
-                    "creeps": [0, 0, 0, 0, 0, 1, 1, 1, 0]
                 }
             ],
             "offeredGems": [0, 1, 2, 3]

src/components/Creep.ts

@@ -47,47 +47,67 @@ export default class Creep extends GameObject {
     public creepType: CreepType;
     private path: PathDefinition;
     private pathIndex: number = 0;
-    private health: number;
+    private speed: number = 0.002;
-    private speed: number = 0.5;
+    public health: number = 2;
+    public escaped: boolean = false;
+    public died: boolean = false;
     public x: number; // X and Y are local to the grid, not canvas
     public y: number;
     constructor(creepType: CreepType, path: PathDefinition, bounds?: PIXI.Rectangle) {
         super(bounds);
         this.creepType = creepType;
         this.path = path;
-        this.x = path[0][0] + 0.5; // centered
+        this.x = path[0][1] + 0.5; // centered
-        this.y = path[0][1] + 0.5;
+        this.y = path[0][0] + 0.5;
     }
     public update(elapsedMS: number) {
         if (this.pathIndex + 1 == this.path.length) {
+            if (this.escaped) return;
             this.events.emit(CreepEvents.Escaped, this);
+            this.escaped = true;
             return;
         }
         const currentCell = this.path[this.pathIndex];
         const targetCell = this.path[this.pathIndex + 1];
+
+        const targetX = targetCell[1] + 0.5;
+        const targetY = targetCell[0] + 0.5;
         const directionX = targetCell[1] - currentCell[1];
         const directionY = targetCell[0] - currentCell[0];
         let deltaX = this.speed * elapsedMS * directionX;
         let deltaY = this.speed * elapsedMS * directionY;
-        if (this.x + deltaX > targetCell[1] + 0.5) {
+        let increaseIndex = false;
+
+        if (deltaX > 0 && this.x + deltaX > targetX) {
             // limit to center of target cell
-            deltaX = targetCell[1] + 0.5 - this.x;
+            deltaX = targetX - this.x;
-            this.pathIndex++;
+            increaseIndex = true;
         }
-        if (this.y + deltaY > targetCell[0] + 0.5) {
+        if (deltaX < 0 && this.x + deltaX < targetX) {
             // limit to center of target cell
-            deltaY = targetCell[0] + 0.5 - this.y;
+            deltaX = targetX - this.x;
-            this.pathIndex++;
+            increaseIndex = true;
+        }
+        if (deltaY > 0 && this.y + deltaY > targetY) {
+            // limit to center of target cell
+            deltaY = targetY - this.y;
+            increaseIndex = true;
+        }
+        if (deltaY < 0 && this.y + deltaY < targetY) {
+            // limit to center of target cell
+            deltaY = targetY - this.y;
+            increaseIndex = true;
         }
         this.x += deltaX;
         this.y += deltaY;
-        console.log('creep moved', deltaX, deltaY);
+        if (increaseIndex) this.pathIndex++;
         this.events.emit(CreepEvents.Moved, this);
     }
 
     public takeDamage(amount: number) {
         this.health -= amount;
-        if (this.health < 0) {
+        if (this.health < 0 && !this.died) {
+            this.died = true;
             this.events.emit(CreepEvents.Died, this);
         }
     }
@@ -97,8 +117,10 @@ export default class Creep extends GameObject {
         const sprite = new PIXI.Sprite(Assets.BasicCreepTexture);
         sprite.x = 0;
         sprite.y = 0;
+        sprite.anchor.set(0.5, 0.5);
         sprite.width = this.bounds.width;
         sprite.height = this.bounds.height;
+        this.container.addChild(sprite);
         this.container.x = this.bounds.x;
         this.container.y = this.bounds.y;
     }

src/components/Grid.ts

@@ -75,8 +75,8 @@ export class Grid extends GameObject {
             new PIXI.Rectangle(
                 this.gridUnitsToPixels(movedCreep.x),
                 this.gridUnitsToPixels(movedCreep.y),
-                this.gridUnitsToPixels(0.3),
+                this.gridUnitsToPixels(0.5),
-                this.gridUnitsToPixels(0.3)
+                this.gridUnitsToPixels(0.6)
             )
         );
     }
@@ -104,8 +104,8 @@ export class Grid extends GameObject {
             creep.setBounds(
                 this.gridUnitsToPixels(creep.x),
                 this.gridUnitsToPixels(creep.y),
-                this.gridUnitsToPixels(0.3),
+                this.gridUnitsToPixels(0.5),
-                this.gridUnitsToPixels(0.3)
+                this.gridUnitsToPixels(0.6)
             );
             // console.log(creep.getBounds());
             this.container.addChild(creep.container);

src/components/MissionStats.ts

@@ -14,6 +14,11 @@ export default class MissionStats extends GameObject {
         this.draw();
     }
 
+    public takeDamage(damage: number) {
+        this.hp -= damage;
+        this.draw();
+    }
+
     public setGold(gold: number) {
         this.gold = gold;
         this.draw();

src/scenes/GameScene.ts

@@ -1,6 +1,6 @@
 import Button from '../base/Button';
 import { MissionDefinition } from '../base/Definitions';
-import Creep from '../components/Creep';
+import Creep, { CreepEvents } from '../components/Creep';
 import { Grid } from '../components/Grid';
 import MissionStats from '../components/MissionStats';
 import WaveManager, { WaveManagerEvents } from '../components/WaveManager';
@@ -26,6 +26,9 @@ export default class GameScene extends SceneBase {
         this.waveManager = new WaveManager(mission.rounds, mission.gameMap.paths);
         this.waveManager.events.on(WaveManagerEvents.CreepSpawned, (creep: Creep) => {
             this.grid.addCreep(creep);
+            creep.events.on(CreepEvents.Escaped, () => {
+                this.onCreepEscaped(creep);
+            });
         });
         this.stats = new MissionStats(100, 200);
         this.grid = new Grid(mission.gameMap);
@@ -84,6 +87,10 @@ export default class GameScene extends SceneBase {
         return false;
     }
 
+    private onCreepEscaped(creep: Creep) {
+        this.stats.takeDamage(creep.health);
+    }
+
     protected draw() {
         console.log('Drawing Game Scene ', this.bounds);
         this.container.removeChildren();