Add energy shockwave feature. (#54)

* Setup Shockwave Feature skeleton * add energy zone map hints * add round ended action and update skill price * Enemy bullets get destroyed on shockwave * fix bug shockwave and fix stats of enemies * add slow mode to the player explosion * add tutorial step
MounirAia · Sep 17, 2024 · 5fb2378 · 5fb2378
1 parent 4ef361c
commit 5fb2378
Show file tree

Hide file tree

Showing 23 changed files with 579 additions and 97 deletions.
diff --git a/index.html b/index.html
@@ -84,6 +84,10 @@ <h1 class="header">Web Shoot'em UP</h1>
 
                     <li>Press 'T' to toggle timer in game</li>
                     <li>Press 'Escape' to pause the game</li>
+                    <li>
+                        Each Enemy destroyed charge your energy bar. <br /><br />
+                        The closer you are to the enemy the more energy it will generate.
+                    </li>
                     <li>Goal is to finish a 100 rounds as fast as possible</li>
                 </ul>
             </div>

diff --git a/src/EventManager.ts b/src/EventManager.ts
@@ -1,6 +1,6 @@
 import { ServiceLocator } from './ServiceLocator.js';
 
-type possibleEvent = 'enemy destroyed';
+type possibleEvent = 'enemy destroyed' | 'player shockwave' | 'round ended';
 type action = () => void;
 
 export interface IServiceEventManager {

diff --git a/src/Scenes/GameScene.ts b/src/Scenes/GameScene.ts
@@ -215,6 +215,7 @@ class UserStateUI {
 
         this.drawFrame({ ctx, lineWidth });
         this.drawHealthBar({ ctx, lineWidth });
+        this.drawEnergyBar({ ctx, lineWidth });
         this.drawSkillFrame({ ctx, lineWidth });
         this.drawBoost({ ctx, lineWidth });
 
@@ -280,6 +281,31 @@ class UserStateUI {
         );
     }
 
+    private drawEnergyBar(parameters: { ctx: CanvasRenderingContext2D; lineWidth: number }): void {
+        const { ctx, lineWidth } = parameters;
+        ctx.lineWidth = lineWidth;
+        const lineWidthCentering = lineWidth / 8;
+
+        const playerService = ServiceLocator.GetService<IServicePlayer>('Player');
+
+        const playerEnergyRatio = playerService.GetCurrentEnergyPoints() / playerService.GetMaxEnergyEnergyPoints();
+
+        ctx.fillStyle = 'white';
+        ctx.fillRect(
+            (4 - lineWidthCentering) * CANVA_SCALEX,
+            (170 - lineWidthCentering) * CANVA_SCALEY,
+            48 * CANVA_SCALEX * playerEnergyRatio,
+            8 * CANVA_SCALEY,
+        );
+
+        ctx.strokeRect(
+            (3.8 - lineWidthCentering) * CANVA_SCALEX,
+            (170 - lineWidthCentering) * CANVA_SCALEY,
+            48 * CANVA_SCALEX,
+            8 * CANVA_SCALEY,
+        );
+    }
+
     private drawSkillFrame(parameters: { ctx: CanvasRenderingContext2D; lineWidth: number }): void {
         const { ctx, lineWidth } = parameters;
         this.specialSkillFrame?.Draw(ctx);
@@ -559,13 +585,63 @@ class ShortcutSkillManager {
     }
 }
 
+class PlayerEnergyZoneDrawing {
+    public Draw(ctx: CanvasRenderingContext2D) {
+        const player = ServiceLocator.GetService<IServicePlayer>('Player');
+        const playerEnergyZone = player.GetEnergyZone();
+
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+
+        const line1 = {
+            x1: 107 * CANVA_SCALEX,
+            y1: 16 * CANVA_SCALEY,
+            x2: 107 * CANVA_SCALEX,
+            y2: 154 * CANVA_SCALEY,
+        };
+
+        const line2 = {
+            x1: 171 * CANVA_SCALEX,
+            y1: 16 * CANVA_SCALEY,
+            x2: 171 * CANVA_SCALEX,
+            y2: 154 * CANVA_SCALEY,
+        };
+
+        ctx.moveTo(line1.x1, line1.y1);
+        ctx.lineTo(line1.x2, line1.y2);
+
+        ctx.moveTo(line2.x1, line2.y1);
+        ctx.lineTo(line2.x2, line2.y2);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+
+        if (playerEnergyZone === 'medium') {
+            ctx.moveTo(line1.x1, line1.y1);
+            ctx.lineTo(line1.x2, line1.y2);
+        } else if (playerEnergyZone === 'danger') {
+            ctx.moveTo(line1.x1, line1.y1);
+            ctx.lineTo(line1.x2, line1.y2);
+            ctx.moveTo(line2.x1, line2.y1);
+            ctx.lineTo(line2.x2, line2.y2);
+        }
+
+        ctx.stroke();
+
+        ctx.restore();
+    }
+}
+
 export class GameScene implements IScene {
     private cityBackgroundManager: CityBackgroundManager;
     private particleEffectOnMap: ParticleManager;
     private userStateUI: UserStateUI;
     private timerIsToggled: boolean;
     private inGameTimer: InGameTimer;
     private shortcutSkillManager: ShortcutSkillManager;
+    private playerEnergyZoneDrawing: PlayerEnergyZoneDrawing;
 
     Load() {
         this.timerIsToggled = false;
@@ -610,6 +686,7 @@ export class GameScene implements IScene {
         this.userStateUI = new UserStateUI();
         this.inGameTimer = new InGameTimer();
         this.shortcutSkillManager = new ShortcutSkillManager();
+        this.playerEnergyZoneDrawing = new PlayerEnergyZoneDrawing();
     }
 
     private updateUI(dt: number) {
@@ -624,5 +701,6 @@ export class GameScene implements IScene {
         this.cityBackgroundManager.Draw(ctx);
         this.particleEffectOnMap.Draw(ctx);
         this.userStateUI.Draw(ctx);
+        this.playerEnergyZoneDrawing.Draw(ctx);
     }
 }
diff --git a/src/SpriteStaticInformation/Enemies/Diamond/BigDiamond/BigDiamondStats.ts b/src/SpriteStaticInformation/Enemies/Diamond/BigDiamond/BigDiamondStats.ts
@@ -4,199 +4,199 @@ export const BigDiamondEnemyStats = [
         'Number of Shots Needed To Destroy Player': 4,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 241,
+        'Enemies Lifepoints': 161,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 150,
     },
     {
         'Round Tier': 2,
         'Number of Shots Needed To Destroy Player': 4,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 626,
+        'Enemies Lifepoints': 418,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 147.6,
     },
     {
         'Round Tier': 3,
         'Number of Shots Needed To Destroy Player': 4,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 1156,
+        'Enemies Lifepoints': 771,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 146.4,
     },
     {
         'Round Tier': 4,
         'Number of Shots Needed To Destroy Player': 4,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 1831,
+        'Enemies Lifepoints': 1220,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 145.2,
     },
     {
         'Round Tier': 5,
         'Number of Shots Needed To Destroy Player': 4,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 2650,
+        'Enemies Lifepoints': 1766,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 144,
     },
     {
         'Round Tier': 6,
         'Number of Shots Needed To Destroy Player': 4,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 3613,
+        'Enemies Lifepoints': 2409,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 142.8,
     },
     {
         'Round Tier': 7,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 4721,
+        'Enemies Lifepoints': 3148,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 141.6,
     },
     {
         'Round Tier': 8,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 5974,
+        'Enemies Lifepoints': 3983,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 140.4,
     },
     {
         'Round Tier': 9,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 7371,
+        'Enemies Lifepoints': 4914,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 139.2,
     },
     {
         'Round Tier': 10,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 8913,
+        'Enemies Lifepoints': 5942,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 138,
     },
     {
         'Round Tier': 11,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 10599,
+        'Enemies Lifepoints': 7066,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 136.8,
     },
     {
         'Round Tier': 12,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 12429,
+        'Enemies Lifepoints': 8286,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 135.6,
     },
     {
         'Round Tier': 13,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 14405,
+        'Enemies Lifepoints': 9603,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 134.4,
     },
     {
         'Round Tier': 14,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 16524,
+        'Enemies Lifepoints': 11016,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 133.2,
     },
     {
         'Round Tier': 15,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 18789,
+        'Enemies Lifepoints': 12526,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 132,
     },
     {
         'Round Tier': 16,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 21197,
+        'Enemies Lifepoints': 14132,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 130.8,
     },
     {
         'Round Tier': 17,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 23751,
+        'Enemies Lifepoints': 15834,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 129.6,
     },
     {
         'Round Tier': 18,
         'Number of Shots Needed To Destroy Player': 3,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 26449,
+        'Enemies Lifepoints': 17632,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 128.4,
     },
     {
         'Round Tier': 19,
         'Number of Shots Needed To Destroy Player': 2,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 29291,
+        'Enemies Lifepoints': 19527,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 127.2,
     },
     {
         'Round Tier': 20,
         'Number of Shots Needed To Destroy Player': 2,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 32278,
+        'Enemies Lifepoints': 21519,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 126,
     },
     {
         'Round Tier': 21,
         'Number of Shots Needed To Destroy Player': 2,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 35409,
+        'Enemies Lifepoints': 23606,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 124.8,
     },
     {
         'Round Tier': 22,
         'Number of Shots Needed To Destroy Player': 2,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 38685,
+        'Enemies Lifepoints': 25790,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 123.6,
     },
     {
         'Round Tier': 23,
         'Number of Shots Needed To Destroy Player': 2,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 42106,
+        'Enemies Lifepoints': 28071,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 122.4,
     },
     {
         'Round Tier': 24,
         'Number of Shots Needed To Destroy Player': 2,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 45671,
+        'Enemies Lifepoints': 30447,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 121.2,
     },
     {
         'Round Tier': 25,
         'Number of Shots Needed To Destroy Player': 2,
         'Bullet Speed (Number Frames to Cover HalfScreen Distance)': 260,
         'Attack Speed': 0.3,
-        'Enemies Lifepoints': 49381,
+        'Enemies Lifepoints': 32920,
         'Tier 3 Frame Speed (Number Frames to HalfScreen Distance)': 120,
     },
 ] as const;

diff --git a/src/SpriteStaticInformation/Enemies/Diamond/DiamondConstant.ts b/src/SpriteStaticInformation/Enemies/Diamond/DiamondConstant.ts
@@ -1,11 +1,23 @@
 export const DiamondEnemyConstant = {
     SmallDiamond: {
         'Enemy Reward': 20,
+        'Safe Zone Number Of Units To Destroy to Activate Shockwave': 12,
+        'Medium Zone Number Of Units To Destroy to Activate Shockwave': 10,
+        'Danger Zone Number Of Units To Destroy to Activate Shockwave': 8,
+        'Player Shockwave Damage (%) of Base Health': 30,
     },
     MediumDiamond: {
         'Enemy Reward': 45,
+        'Safe Zone Number Of Units To Destroy to Activate Shockwave': 10,
+        'Medium Zone Number Of Units To Destroy to Activate Shockwave': 8,
+        'Danger Zone Number Of Units To Destroy to Activate Shockwave': 6,
+        'Player Shockwave Damage (%) of Base Health': 20,
     },
     BigDiamond: {
         'Enemy Reward': 70,
+        'Safe Zone Number Of Units To Destroy to Activate Shockwave': 8,
+        'Medium Zone Number Of Units To Destroy to Activate Shockwave': 6,
+        'Danger Zone Number Of Units To Destroy to Activate Shockwave': 4,
+        'Player Shockwave Damage (%) of Base Health': 10,
     },
 } as const;