Update index.html

index.html

@@ -139,6 +139,7 @@
         let autoFire = false;
         let gold = 0;
         let isBossStage = false;
+        let effects = [];
         // Load assets
         const backgroundImg = new Image();
         backgroundImg.src = 'city.png';
@@ -152,6 +153,7 @@
         const enemyFireSound = new Audio('fireenemy.ogg');
         const bgm = new Audio('BGM.ogg');
         const countSound = new Audio('count.ogg');
+        const deathSound = new Audio('death.ogg');
         bgm.loop = true;
         enemyFireSound.volume = 0.5;
         const weapons = {
@@ -197,6 +199,23 @@
                 countdownEl.textContent = countdownTime > 0 ? countdownTime : 'GO!';
             }, 1000);
         }
+      
+              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;
+            }
+        }
         class Enemy {
                       constructor(isBoss = false) {
               this.x = Math.random() * canvas.width;
@@ -244,19 +263,28 @@
                     this.lastShot = now;
                 }
             }
-         shoot() {
+        shoot() {
     const sound = this.isBoss ? new Audio('firemn.ogg') : enemyFireSound.cloneNode();
     sound.play();
     
-          bullets.push({
-          x: this.x + Math.cos(this.angle) * 30,
-          y: this.y + Math.sin(this.angle) * 30,
-          angle: this.angle,
-          speed: this.isBoss ? 10 : 5, // 보스 탄환 속도 증가
-          isEnemy: true,
-          size: this.isBoss ? 5 : 3, // 보스일 경우 크기 증가
-          damage: this.isBoss ? 300 : 150 // 보스 데미지 강화
-      });
+    // 발사 이펙트 추가
+    effects.push(new Effect(
+        this.x + Math.cos(this.angle) * 30,
+        this.y + Math.sin(this.angle) * 30,
+        500,  // 0.5초
+        'fire',
+        this.angle
+    ));
+
+    bullets.push({
+        x: this.x + Math.cos(this.angle) * 30,
+        y: this.y + Math.sin(this.angle) * 30,
+        angle: this.angle,
+        speed: this.isBoss ? 10 : 5,
+        isEnemy: true,
+        size: this.isBoss ? 5 : 3,
+        damage: this.isBoss ? 300 : 150
+    });
 }
         }
         function showShop() {
@@ -327,12 +355,20 @@ function buyTank(tankImg, cost, tankId) {
         });
         
         document.addEventListener('keyup', e => keys[e.key] = false);
-        function fireBullet() {
+               function fireBullet() {
             if(isCountingDown) return;
             const weapon = weapons[currentWeapon];
             const now = Date.now();
             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
+                ));
                 bullets.push({
                     x: player.x + Math.cos(player.angle) * 30,
                     y: player.y + Math.sin(player.angle) * 30,
@@ -367,11 +403,20 @@ function buyTank(tankImg, cost, tankId) {
                             if(dist < 30) {
                                 let damage = currentWeapon === 'cannon' ? 250 : 50;  // 고정 데미지로 변경
                                 enemy.health -= damage;
-                                if(enemy.health <= 0) {
-                                    spawnHealthItem(enemy.x, enemy.y);
-                                    gold += 100;
-                                    return false;
-                                }
+                                              if(enemy.health <= 0) {
+                  spawnHealthItem(enemy.x, enemy.y);
+                  gold += 100;
+                  // 죽음 이펙트와 사운드 추가
+                  effects.push(new Effect(enemy.x, enemy.y, 1000, 'death'));
+                  deathSound.cloneNode().play();
+                  return false;
+              }
+                                            if(player.health <= 0) {
+                  gameOver = true;
+                  restartBtn.style.display = 'block';
+                  effects.push(new Effect(player.x, player.y, 1000, 'death'));
+                  deathSound.cloneNode().play();
+              }
                                 return true;
                             }
                             return true;
@@ -463,15 +508,25 @@ function buyTank(tankImg, cost, tankId) {
                ctx.fill();
            });
            // UI 그리기
-           ctx.fillStyle = 'white';
-           ctx.font = '24px Arial';
-           ctx.fillText(`Round ${currentRound}/10`, 10, 30);
-           ctx.fillText(`Gold: ${gold}`, 10, 60);
-           if(isCountingDown) {
-               ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-               ctx.fillRect(0, 0, canvas.width, canvas.height);
-           }
-       }
+    ctx.fillStyle = 'white';
+    ctx.font = '24px Arial';
+    ctx.fillText(`Round ${currentRound}/10`, 10, 30);
+    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();
+    });
+
+    if(isCountingDown) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
 function gameLoop() {
     updateGame();
     drawGame();