Update index.html

index.html

@@ -278,6 +278,7 @@
         let allyUnits = [];
         let lastSupportSpawn = 0;
         let gameStarted = false;
+        let textEffects = []; // 텍스트 이펙트 배열 추가
         //경고 시스템 계승
         let warningLines = [];
         let spitfires = [];
@@ -1594,6 +1595,13 @@ bullets = bullets.filter(bullet => {
                     500,
                     'hit'
                 ));
+                // HIT! 텍스트 이펙트 추가
+                textEffects.push(new TextEffect(
+                    enemy.x,
+                    enemy.y - 30,
+                    "HIT!",
+                    "#00ff00"
+                ));
 
                 // 데미지 증가
                 let damage = currentWeapon === 'cannon' ? 1000 : 150; // 기존 250과 50 대비 상당량 증가
@@ -1803,6 +1811,13 @@ bullets = bullets.filter(bullet => {
    ctx.fillText(`Stage ${currentStage} - Round ${currentRound}/${currentStage === 3 ? 20 : 10}`, 10, 30);
    ctx.fillText(`Gold: ${gold}`, 10, 60);
 
+   // 텍스트 이펙트 업데이트 및 그리기
+   textEffects = textEffects.filter(effect => !effect.isExpired());
+   textEffects.forEach(effect => {
+       effect.update();
+       effect.draw(ctx);
+   });
+  
    // 이펙트 그리기
    effects = effects.filter(effect => !effect.isExpired());
    effects.forEach(effect => {
@@ -2268,7 +2283,42 @@ function fireBullet() {
         lastShot = now;
     }
 }
+class TextEffect {
+    constructor(x, y, text, color, duration = 1000) {
+        this.x = x;
+        this.y = y;
+        this.text = text;
+        this.color = color;
+        this.startTime = Date.now();
+        this.duration = duration;
+        this.fadeOut = 0.5; // 페이드아웃 시작 시점 (0.5 = 50% 시점부터)
+        this.initialY = y;
+        this.speed = -1; // 위로 올라가는 속도
+    }
+
+    update() {
+        const elapsed = (Date.now() - this.startTime) / this.duration;
+        this.y = this.initialY + (this.speed * elapsed * 50); // 위로 올라가는 효과
+    }
 
+    draw(ctx) {
+        const elapsed = (Date.now() - this.startTime) / this.duration;
+        const opacity = elapsed > this.fadeOut ? 
+            1 - ((elapsed - this.fadeOut) / (1 - this.fadeOut)) : 1;
+        
+        ctx.save();
+        ctx.fillStyle = this.color;
+        ctx.globalAlpha = opacity;
+        ctx.font = 'bold 20px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText(this.text, this.x, this.y);
+        ctx.restore();
+    }
+
+    isExpired() {
+        return Date.now() - this.startTime > this.duration;
+    }
+}
 // Effect 클래스
 class Effect {
    constructor(x, y, duration, type, angle = 0, parent = null) {
@@ -2347,6 +2397,7 @@ class Effect {
        return Date.now() - this.startTime > this.duration;
    }
 }
+      
 </script>
 </body>
 </html>