Update index.html

index.html

@@ -879,7 +879,7 @@ const defaultPlayerStats = {
     constructor(y) {
         this.y = y;
         this.startTime = Date.now();
-        this.duration = 2000; // 2초
+        this.duration = 750; // 0.75초
     }
 
     draw(ctx) {
@@ -1684,137 +1684,147 @@ bullets = bullets.filter(bullet => {
     }
 }
      function drawGame() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    
-    // 배경 그리기
-    const pattern = ctx.createPattern(backgroundImg, 'repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-        
-    // 플레이어 그리기
-    ctx.save();
-    ctx.translate(player.x, player.y);
-    ctx.rotate(player.angle);
-    ctx.drawImage(playerImg, -player.width/2, -player.height/2, player.width, player.height);
-    ctx.restore();
-    
-    // 체력바 그리기
-    drawHealthBar(canvas.width/2, 30, player.health, player.maxHealth, 200, 20, 'green');
-    
-    // 적 그리기
-    enemies.forEach(enemy => {
-        ctx.save();
-        ctx.translate(enemy.x, enemy.y);
-        ctx.rotate(enemy.angle);
-        const img = enemy.enemyImg;
-        ctx.drawImage(img, -enemy.width/2, -enemy.height/2, enemy.width, enemy.height);
-        ctx.restore();
-        drawHealthBar(enemy.x, enemy.y - 40, enemy.health, enemy.maxHealth, 60, 5, 'red');
-    });
-
-    // 아군 유닛 그리기
-    allyUnits.forEach(ally => {
-        ctx.save();
-        ctx.translate(ally.x, ally.y);
-        ctx.rotate(ally.angle);
-        ctx.drawImage(ally.img, -ally.width/2, -ally.height/2, ally.width, ally.height);
-        ctx.restore();
-        drawHealthBar(ally.x, ally.y - 40, ally.health, ally.maxHealth, 60, 5, 'blue');
-    });
-
-    // 경고선 그리기
-    warningLines.forEach(line => line.draw(ctx));
-
-    // 스핏파이어 경고선 그리기
-    p51WarningLines.forEach(line => line.draw(ctx));
-
-    // B-29 경고선 그리기
-    b29WarningLines.forEach(line => line.draw(ctx));
-
-    // P51 그리기
-    p51s.forEach(p51 => {
-        ctx.save();
-        ctx.translate(p51.x, p51.y);
-        ctx.rotate(Math.PI / 2); // P51은 아래로 수직 이동하므로 90도가 아닌 180도 회전(ctx.rotate(Math.PI / 2);)
-        ctx.drawImage(p51.img, -p51.width/2, -p51.height/2, p51.width, p51.height);
-        ctx.restore();
-    });
-
-    // B-29 그리기
-    b29s.forEach(b29 => {
-        ctx.save();
-        ctx.translate(b29.x, b29.y);
-        ctx.rotate(Math.PI); // B-29는 왼쪽으로 이동하므로 180도 회전
-        ctx.drawImage(b29.img, -b29.width/2, -b29.height/2, b29.width, b29.height);
-        ctx.restore();
-    });
-
-    // 스핏파이어 그리기
-    spitfires.forEach(spitfire => {
-        ctx.save();
-        ctx.translate(spitfire.x, spitfire.y);
-        ctx.rotate(Math.PI);
-        ctx.drawImage(spitfire.img, -spitfire.width/2, -spitfire.height/2, spitfire.width, spitfire.height);
-        ctx.restore();
-    });
-
-    // 지원 유닛 그리기
-    supportUnits.forEach(unit => {
-        ctx.save();
-        ctx.translate(unit.x, unit.y);
-        ctx.rotate(unit.angle);
-        ctx.drawImage(unit.img, -unit.width/2, -unit.height/2, unit.width, unit.height);
-        ctx.restore();
-    });
-
-    // 총알 그리기
-    bullets.forEach(bullet => {
-        if (bullet.isEnemy || !bullet.isAPCR) {
-            ctx.beginPath();
-            ctx.fillStyle = bullet.color || (bullet.isEnemy ? 'red' : 'blue');
-            ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
-            ctx.fill();
-        } else {
-            ctx.save();
-            ctx.translate(bullet.x, bullet.y);
-            ctx.rotate(bullet.angle);
-            const width = currentWeapon === 'machinegun' ? 10 : 20;
-            const height = currentWeapon === 'machinegun' ? 5 : 10;
-            ctx.drawImage(bulletImg, -width/2, -height/2, width, height);
-            ctx.restore();
-        }
-    });
-
-    // 아이템 그리기
-    items.forEach(item => {
-        ctx.beginPath();
-        ctx.fillStyle = 'green';
-        ctx.arc(item.x, item.y, 10, 0, Math.PI * 2);
-        ctx.fill();
-    });
-
-    // UI 그리기
-    ctx.fillStyle = 'white';
-    ctx.font = '24px Arial';
-    ctx.fillText(`Stage ${currentStage} - Round ${currentRound}/${currentStage === 3 ? 20 : 10}`, 10, 30);
-    ctx.fillText(`Gold: ${gold}`, 10, 60);
-
-    // 이펙트 그리기
-    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);
-        ctx.drawImage(effect.img, -effect.size/2, -effect.size/2, effect.size, effect.size);
-        ctx.restore();
-    });
+   ctx.clearRect(0, 0, canvas.width, canvas.height);
+   
+   // 배경 그리기
+   const pattern = ctx.createPattern(backgroundImg, 'repeat');
+   ctx.fillStyle = pattern;
+   ctx.fillRect(0, 0, canvas.width, canvas.height);
+       
+   // 플레이어 그리기
+   ctx.save();
+   ctx.translate(player.x, player.y);
+   ctx.rotate(player.angle);
+   ctx.drawImage(playerImg, -player.width/2, -player.height/2, player.width, player.height);
+   ctx.restore();
+   
+   // 체력바 그리기
+   drawHealthBar(canvas.width/2, 30, player.health, player.maxHealth, 200, 20, 'green');
+   
+   // 적 그리기
+   enemies.forEach(enemy => {
+       ctx.save();
+       ctx.translate(enemy.x, enemy.y);
+       ctx.rotate(enemy.angle);
+       const img = enemy.enemyImg;
+       ctx.drawImage(img, -enemy.width/2, -enemy.height/2, enemy.width, enemy.height);
+       ctx.restore();
+       drawHealthBar(enemy.x, enemy.y - 40, enemy.health, enemy.maxHealth, 60, 5, 'red');
+   });
+
+   // 아군 유닛 그리기 
+   allyUnits.forEach(ally => {
+       ctx.save();
+       ctx.translate(ally.x, ally.y);
+       ctx.rotate(ally.angle);
+       ctx.drawImage(ally.img, -ally.width/2, -ally.height/2, ally.width, ally.height);
+       ctx.restore();
+       drawHealthBar(ally.x, ally.y - 40, ally.health, ally.maxHealth, 60, 5, 'blue');
+   });
+
+   // 경고선 그리기
+   warningLines.forEach(line => line.draw(ctx));
+
+   // 스핏파이어 경고선 그리기
+   p51WarningLines.forEach(line => line.draw(ctx));
+
+   // B-29 경고선 그리기
+   b29WarningLines.forEach(line => line.draw(ctx));
+
+   // P51 그리기
+   p51s.forEach(p51 => {
+       ctx.save();
+       ctx.translate(p51.x, p51.y);
+       ctx.rotate(Math.PI / 2);
+       ctx.drawImage(p51.img, -p51.width/2, -p51.height/2, p51.width, p51.height);
+       ctx.restore();
+   });
+
+   // B-29 그리기
+   b29s.forEach(b29 => {
+       ctx.save();
+       ctx.translate(b29.x, b29.y);
+       ctx.rotate(Math.PI);
+       ctx.drawImage(b29.img, -b29.width/2, -b29.height/2, b29.width, b29.height);
+       ctx.restore();
+   });
+
+   // 스핏파이어 그리기
+   spitfires.forEach(spitfire => {
+       ctx.save();
+       ctx.translate(spitfire.x, spitfire.y);
+       ctx.rotate(Math.PI);
+       ctx.drawImage(spitfire.img, -spitfire.width/2, -spitfire.height/2, spitfire.width, spitfire.height);
+       ctx.restore();
+   });
+
+   // 지원 유닛 그리기
+   supportUnits.forEach(unit => {
+       ctx.save();
+       ctx.translate(unit.x, unit.y);
+       ctx.rotate(unit.angle);
+       ctx.drawImage(unit.img, -unit.width/2, -unit.height/2, unit.width, unit.height);
+       ctx.restore();
+   });
+
+   // 총알 그리기
+   bullets.forEach(bullet => {
+       if (bullet.isEnemy || !bullet.isAPCR) {
+           ctx.beginPath();
+           ctx.fillStyle = bullet.color || (bullet.isEnemy ? 'red' : 'blue');
+           ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
+           ctx.fill();
+       } else {
+           ctx.save();
+           ctx.translate(bullet.x, bullet.y);
+           ctx.rotate(bullet.angle);
+           const width = currentWeapon === 'machinegun' ? 10 : 20;
+           const height = currentWeapon === 'machinegun' ? 5 : 10;
+           ctx.drawImage(bulletImg, -width/2, -height/2, width, height);
+           ctx.restore();
+       }
+   });
+
+   // 아이템 그리기
+   items.forEach(item => {
+       ctx.beginPath();
+       ctx.fillStyle = 'green';
+       ctx.arc(item.x, item.y, 10, 0, Math.PI * 2);
+       ctx.fill();
+   });
+
+   // UI 그리기
+   ctx.fillStyle = 'white';
+   ctx.font = '24px Arial';
+   ctx.fillText(`Stage ${currentStage} - Round ${currentRound}/${currentStage === 3 ? 20 : 10}`, 10, 30);
+   ctx.fillText(`Gold: ${gold}`, 10, 60);
+
+   // 이펙트 그리기
+   effects = effects.filter(effect => !effect.isExpired());
+   effects.forEach(effect => {
+       effect.update();
+       ctx.save();
+       ctx.translate(effect.x, effect.y);
+       if (effect.type === 'fire' || effect.type === 'cannon_fire') {
+           ctx.rotate(effect.angle);
+       }
+       
+       if (effect.type === 'cannon_fire') {
+           // 캐논 발사 효과는 현재 단계의 크기에 맞춰 그리기
+           const size = effect.currentSize;
+           ctx.drawImage(effect.img, -size.width/2, -size.height/2, size.width, size.height);
+       } else {
+           // 다른 이펙트들은 기존 방식대로 그리기
+           ctx.drawImage(effect.img, -effect.size/2, -effect.size/2, effect.size, effect.size);
+       }
+       ctx.restore();
+   });
 
-    // 카운트다운 오버레이
-    if (isCountingDown) {
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-    }
+   // 카운트다운 오버레이
+   if (isCountingDown) {
+       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+       ctx.fillRect(0, 0, canvas.width, canvas.height);
+   }
 }
   //bf109 히트 시스템
 function updateBF109Damage() {
@@ -2007,73 +2017,120 @@ class Enemy {
    }
 
    shoot() {
-       if (currentStage === 3) {
-           if (this.isBoss) {
-               const bossSound = new Audio('fireenemy2.ogg');
-               bossSound.volume = 0.5;
-               bossSound.play();
-               
-               // 보스 데미지를 1.5배로 증가 (300 -> 450)
-               bullets.push({
-                   x: this.x + Math.cos(this.angle) * 30,
-                   y: this.y + Math.sin(this.angle) * 30,
-                   angle: this.angle,
-                   speed: 15,
-                   isEnemy: true,
-                   damage: 450,  // 300에서 450으로 증가
-                   size: 5
-               });
-           } else if (this.isElite) {
-               const eliteSound = new Audio('fireenemy3.ogg');
-               eliteSound.volume = 0.5;
-               eliteSound.play();
-               
-               bullets.push({
-                   x: this.x + Math.cos(this.angle) * 30,
-                   y: this.y + Math.sin(this.angle) * 30,
-                   angle: this.angle,
-                   speed: 8,
-                   isEnemy: true,
-                   damage: 200,
-                   size: 4
-               });
-           } else {
-               enemyFireSound.cloneNode().play();
-               
-               bullets.push({
-                   x: this.x + Math.cos(this.angle) * 30,
-                   y: this.y + Math.sin(this.angle) * 30,
-                   angle: this.angle,
-                   speed: 5,
-                   isEnemy: true,
-                   damage: 100,
-                   size: 3
-               });
-           }
-       } else {
-           const sound = this.isBoss ? new Audio('firemn.ogg') : enemyFireSound.cloneNode();
-           sound.play();
-           
-           effects.push(new Effect(
-               this.x + Math.cos(this.angle) * 30,
-               this.y + Math.sin(this.angle) * 30,
-               500,
-               'fire',
-               this.angle,
-               this
-           ));
-
-           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 ? 450 : 150  // 보스 데미지도 1.5배로 증가
-           });
-       }
-   }
+    if (currentStage === 3) {
+        if (this.isBoss) {
+            const bossSound = new Audio('fireenemy2.ogg');
+            bossSound.volume = 0.5;
+            bossSound.play();
+
+            // 보스의 총구 위치 계산 (좌우 양쪽에서 발사)
+            const gunPositions = [
+                { x: this.x + Math.cos(this.angle) * 30, y: this.y + Math.sin(this.angle) * 30 },
+                { x: this.x + Math.cos(this.angle + Math.PI) * 30, y: this.y + Math.sin(this.angle + Math.PI) * 30 }
+            ];
+
+            // 각 총구에서 발사 효과 생성
+            gunPositions.forEach(pos => {
+                effects.push(new Effect(
+                    pos.x,
+                    pos.y,
+                    750,  // 0.75초 동안 지속
+                    'cannon_fire',
+                    this.angle,
+                    this
+                ));
+
+                bullets.push({
+                    x: pos.x,
+                    y: pos.y,
+                    angle: this.angle,
+                    speed: 15,
+                    isEnemy: true,
+                    damage: 450,
+                    size: 5
+                });
+            });
+        } else if (this.isElite) {
+            const eliteSound = new Audio('fireenemy3.ogg');
+            eliteSound.volume = 0.5;
+            eliteSound.play();
+            
+            effects.push(new Effect(
+                this.x + Math.cos(this.angle) * 30,
+                this.y + Math.sin(this.angle) * 30,
+                750,  // 0.75초 동안 지속
+                'cannon_fire',
+                this.angle,
+                this
+            ));
+            
+            bullets.push({
+                x: this.x + Math.cos(this.angle) * 30,
+                y: this.y + Math.sin(this.angle) * 30,
+                angle: this.angle,
+                speed: 8,
+                isEnemy: true,
+                damage: 200,
+                size: 4
+            });
+        } else {
+            enemyFireSound.cloneNode().play();
+            
+            effects.push(new Effect(
+                this.x + Math.cos(this.angle) * 30,
+                this.y + Math.sin(this.angle) * 30,
+                500,
+                'fire',
+                this.angle,
+                this
+            ));
+            
+            bullets.push({
+                x: this.x + Math.cos(this.angle) * 30,
+                y: this.y + Math.sin(this.angle) * 30,
+                angle: this.angle,
+                speed: 5,
+                isEnemy: true,
+                damage: 100,
+                size: 3
+            });
+        }
+    } else {
+        const sound = this.isBoss ? new Audio('firemn.ogg') : enemyFireSound.cloneNode();
+        sound.play();
+        
+        // 보스와 정예 유닛은 cannon_fire 효과를 사용
+        if (this.isBoss || this.isElite) {
+            effects.push(new Effect(
+                this.x + Math.cos(this.angle) * 30,
+                this.y + Math.sin(this.angle) * 30,
+                750,  // 0.75초 동안 지속
+                'cannon_fire',
+                this.angle,
+                this
+            ));
+        } else {
+            effects.push(new Effect(
+                this.x + Math.cos(this.angle) * 30,
+                this.y + Math.sin(this.angle) * 30,
+                500,
+                'fire',
+                this.angle,
+                this
+            ));
+        }
+
+        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 ? 450 : 150
+        });
+    }
+}
 }
 // 보스 스테이지 시작 함수 수정
 function startBossStage() {
@@ -2165,18 +2222,38 @@ function fireBullet() {
     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,
-            'fire',
-            player.angle,
-            player
-        ));
 
+        // 총구 위치 계산
+        const muzzleX = player.x + Math.cos(player.angle) * (player.width/2);
+        const muzzleY = player.y + Math.sin(player.angle) * (player.width/2);
+        
+        // 무기 타입에 따른 이펙트 생성
+        if (currentWeapon === 'cannon') {
+            // 캐논 발사 효과 (shot1->shot2->shot3 순서로 변경)
+            effects.push(new Effect(
+                muzzleX,
+                muzzleY,
+                1500,  // 전체 지속시간 1.5초
+                'cannon_fire',  // 캐논 발사 전용 타입
+                player.angle,
+                player
+            ));
+        } else {
+            // 기관총 발사 효과
+            effects.push(new Effect(
+                player.x + Math.cos(player.angle) * 30,
+                player.y + Math.sin(player.angle) * 30,
+                500,
+                'fire',
+                player.angle,
+                player
+            ));
+        }
+
+        // 총알 생성
         bullets.push({
-            x: player.x + Math.cos(player.angle) * 30,
-            y: player.y + Math.sin(player.angle) * 30,
+            x: muzzleX,  // 총구 위치에서 발사
+            y: muzzleY,
             angle: player.angle,
             speed: hasAPCR ? 20 : 10,
             isEnemy: false,
@@ -2201,6 +2278,17 @@ class Effect {
     this.offset = { x: Math.cos(angle) * 30, y: Math.sin(angle) * 30 };
     this.img = new Image();
     
+    // 캐논 샷 효과를 위한 추가 속성
+    this.currentShot = 1;
+    this.lastShotChange = Date.now();
+    
+    // 각 샷별 크기 정의 (width, height)
+    this.shotSizes = {
+        1: { width: 40, height: 40 },  // shot1.png - 작은 화염
+        2: { width: 60, height: 60 },  // shot2.png - 중간 화염
+        3: { width: 80, height: 80 }   // shot3.png - 큰 화염
+    };
+    
     // 이펙트 타입에 따른 이미지 설정
     if (type === 'death') {
         this.img.src = 'bang.png';
@@ -2208,21 +2296,46 @@ class Effect {
         this.img.src = 'bomb1.png';
     } else if (type === 'hit') {
         this.img.src = 'fire3.png';
+    } else if (type === 'cannon_fire') {
+        this.img.src = 'shot1.png';
+        this.duration = 750;  // 총 0.75초 (0.25초 × 3)
+        this.currentSize = this.shotSizes[1];  // 초기 크기 설정
     } else {
         this.img.src = 'fire2.png';
     }
     
-    // 이펙트 타입에 따른 크기 설정
-    this.size = type === 'bomb' ? 100 :   // 폭발은 더 크게
+    // 기본 이펙트 크기 설정
+    this.size = type === 'bomb' ? 100 :   
                type === 'death' ? 75 : 
-               type === 'hit' ? 30 : 42;   // 명중 이펙트는 더 작게
-}
+               type === 'hit' ? 30 : 42;
+   }
 
    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;
+       if(this.parent) {
+           if(this.type === 'cannon_fire') {
+               this.x = this.parent.x + Math.cos(this.parent.angle) * (this.parent.width/2);
+               this.y = this.parent.y + Math.sin(this.parent.angle) * (this.parent.width/2);
+               this.angle = this.parent.angle;
+               
+               const now = Date.now();
+               const elapsedTime = now - this.startTime;
+               
+               // 0.25초마다 이미지 변경하고, 마지막 shot3은 0.25초만 지속
+               if (elapsedTime < 250) {
+                   this.currentShot = 1;
+               } else if (elapsedTime < 500) {
+                   this.currentShot = 2;
+               } else {
+                   this.currentShot = 3;
+               }
+               
+               this.img.src = `shot${this.currentShot}.png`;
+               this.currentSize = this.shotSizes[this.currentShot];
+           } else if(this.type === 'fire') {
+               this.x = this.parent.x + this.offset.x;
+               this.y = this.parent.y + this.offset.y;
+               this.angle = this.parent.angle;
+           }
        }
    }