Update index.html

index.html

@@ -201,21 +201,31 @@
         }
       
               class Effect {
-            constructor(x, y, duration, type, angle = 0) {
-                this.x = x;
-                this.y = y;
-                this.startTime = Date.now();
-                this.duration = duration;
-                this.type = type;  // 'death' 또는 'fire'
-                this.angle = angle;
-                this.img = new Image();
-                this.img.src = type === 'death' ? 'bang.png' : 'fire.png';
-            }
-        
-            isExpired() {
-                return Date.now() - this.startTime > this.duration;
-            }
+    constructor(x, y, duration, type, angle = 0, parent = null) {
+        this.x = x;
+        this.y = y;
+        this.startTime = Date.now();
+        this.duration = duration;
+        this.type = type;
+        this.angle = angle;
+        this.parent = parent;  // 부모 유닛 (발사한 유닛)
+        this.offset = { x: Math.cos(angle) * 30, y: Math.sin(angle) * 30 };  // 부모로부터의 오프셋
+        this.img = new Image();
+        this.img.src = type === 'death' ? 'bang.png' : 'fire.png';
+    }
+
+    update() {
+        if(this.parent && this.type === 'fire') {
+            this.x = this.parent.x + this.offset.x;
+            this.y = this.parent.y + this.offset.y;
+            this.angle = this.parent.angle;
         }
+    }
+
+    isExpired() {
+        return Date.now() - this.startTime > this.duration;
+    }
+}
         class Enemy {
                       constructor(isBoss = false) {
               this.x = Math.random() * canvas.width;
@@ -268,12 +278,13 @@
     sound.play();
     
     // 발사 이펙트 추가
-    effects.push(new Effect(
+        effects.push(new Effect(
         this.x + Math.cos(this.angle) * 30,
         this.y + Math.sin(this.angle) * 30,
-        500,  // 0.5초
+        500,
         'fire',
-        this.angle
+        this.angle,
+        this  // 자신을 부모로 전달
     ));
 
     bullets.push({
@@ -362,13 +373,15 @@ function buyTank(tankImg, cost, tankId) {
             if ((keys[' '] || autoFire) && now - lastShot > weapon.fireRate) {
                 weapon.sound.cloneNode().play();
                 // 발사 이펙트 추가
-                effects.push(new Effect(
-                    player.x + Math.cos(player.angle) * 30,
-                    player.y + Math.sin(player.angle) * 30,
-                    500,  // 0.5초
-                    'fire',
-                    player.angle
-                ));
+                                 effects.push(new Effect(
+                      player.x + Math.cos(player.angle) * 30,
+                      player.y + Math.sin(player.angle) * 30,
+                      500,
+                      'fire',
+                      player.angle,
+                      player  // player를 부모로 전달
+                  ));
+
                 bullets.push({
                     x: player.x + Math.cos(player.angle) * 30,
                     y: player.y + Math.sin(player.angle) * 30,
@@ -520,14 +533,17 @@ function buyTank(tankImg, cost, tankId) {
     ctx.fillText(`Gold: ${gold}`, 10, 60);
 
     // 이펙트 그리기
-    effects = effects.filter(effect => !effect.isExpired());
-    effects.forEach(effect => {
-        ctx.save();
-        ctx.translate(effect.x, effect.y);
-        if(effect.type === 'fire') ctx.rotate(effect.angle);
-        ctx.drawImage(effect.img, -25, -25, 50, 50);
-        ctx.restore();
-    });
+effects = effects.filter(effect => !effect.isExpired());
+effects.forEach(effect => {
+    effect.update();  // 이펙트 위치 업데이트
+    ctx.save();
+    ctx.translate(effect.x, effect.y);
+    if(effect.type === 'fire') ctx.rotate(effect.angle);
+    // bang.png는 1.5배 크게
+    const size = effect.type === 'death' ? 75 : 50;  // death는 75px (1.5배), fire는 50px
+    ctx.drawImage(effect.img, -size/2, -size/2, size, size);
+    ctx.restore();
+});
 
     if(isCountingDown) {
         ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';