<!DOCTYPE html>
<html>
<head>
    <title>Tank Battle</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #333;
            font-family: Arial;
        }
        #gameCanvas {
            background-repeat: repeat;
        }
        #instructions {
            position: fixed;
            top: 10px;
            right: 10px;
            color: white;
            background: rgba(0,0,0,0.7);
            padding: 10px;
            border-radius: 5px;
            z-index: 1000;
        }
        #weaponInfo {
            position: fixed;
            top: 150px;
            right: 10px;
            color: white;
            background: rgba(0,0,0,0.7);
            padding: 10px;
            border-radius: 5px;
            z-index: 1000;
            font-size: 18px;
        }
        .button {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px 40px;
            font-size: 24px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none;
            z-index: 1000;
        }
        #nextRound {
            top: 80% !important;
        }
        #restart {
            top: 80% !important;
        }
        #winMessage {
            top: 30% !important;
            font-size: 72px;
            background: none;
        }
        #countdown {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 72px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            z-index: 1000;
            display: none;
        }
        #titleScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('city2.png') no-repeat center center;
            background-size: cover;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #titleScreen h1 {
            font-size: 72px;
            color: white;
            text-shadow: 2px 2px 5px black;
            margin-bottom: 50px;
        }
        .stageButton {
            padding: 15px 30px;
            font-size: 24px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
        }
        .stageButton:disabled {
            background: #666;
            cursor: not-allowed;
        }
        #shop {
            position: fixed;
            top: 30% !important;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.9);
            padding: 20px;
            border-radius: 10px;
            color: white;
            z-index: 1000;
            display: none;
        }
    </style>
</head>
<body>
    <div id="instructions">
        Controls:<br>
        WASD - Move tank<br>
        Mouse - Aim<br>
        Space - Fire<br>
        C - Switch Weapon<br>
        R - Toggle Auto-fire
    </div>
    <div id="weaponInfo">Current Weapon: Cannon</div>
    <div id="countdown">3</div>
    <button id="nextRound" class="button">Next Round</button>
    <button id="restart" class="button">Restart Game</button>
    <canvas id="gameCanvas"></canvas>
    
    <div id="titleScreen">
        <h1>TANK WAR</h1>
        <div id="stageSelect">
            <button class="stageButton" onclick="startStage(1)">Stage 1</button>
            <button class="stageButton" onclick="startStage(2)">Stage 2</button>
            <button class="stageButton" disabled>Stage 3</button>
            <button class="stageButton" disabled>Stage 4</button>
        </div>
    </div>
    <div id="shop" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.9); padding:20px; border-radius:10px; color:white; z-index:1000;">
        <h2>Tank Shop</h2>
        <div style="display:flex; gap:20px;">
            <div id="tank1" style="text-align:center;">
                <h3>PZ.IV</h3>
                <img src="player2.png" width="90" height="50">
                <p>300 Gold</p>
                <p style="color: #4CAF50;">+50% HP</p>
                <button onclick="buyTank('player2.png', 300, 'tank1')">Buy</button>
            </div>
            <div id="tank2" style="text-align:center;">
                <h3>TIGER</h3>
                <img src="player3.png" width="110" height="55">
                <p>500 Gold</p>
                <p style="color: #4CAF50;">+100% HP</p>
                <p style="color: #ff6b6b;">-30% Speed</p>
                <button onclick="buyTank('player3.png', 500, 'tank2')">Buy</button>
            </div>
            <div id="bf109" style="text-align:center;">
                <h3>BF-109</h3>
                <img src="bf109.png" width="100" height="100">
                <p>1000 Gold</p>
                <p style="color: #4CAF50;">Air support from BF-109</p>
                <button onclick="buyBF109()">Buy</button>
            </div>
            <div id="ju87" style="text-align:center;">
                <h3>JU-87</h3>
                <img src="ju87.png" width="100" height="100">
                <p>1500 Gold</p>
                <p style="color: #4CAF50;">Get ju-87 air support</p>
                <button onclick="buyJU87()">Buy</button>
            </div>
            <div id="apcr" style="text-align:center;">
                <h3>APCR</h3>
                <img src="apcr.png" width="80" height="20">
                <p>1000 Gold</p>
                <p style="color: #4CAF50;">+100% Bullet Speed</p>
                <button onclick="buyAPCR()">Buy</button>
            </div>
        </div>
    </div>
    <button id="bossButton" class="button">Fight Boss!</button>
    <div id="winMessage" class="button" style="font-size: 72px; background: none;">You Win!</div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const nextRoundBtn = document.getElementById('nextRound');
        const restartBtn = document.getElementById('restart');
        const weaponInfo = document.getElementById('weaponInfo');
        const countdownEl = document.getElementById('countdown');
        const bossButton = document.getElementById('bossButton');
        // 게임의 기본 상태 변수들 근처에 추가
        let lastFrameTime = 0;         // 마지막 프레임이 실행된 시간
        const FPS = 60;               // 목표 FPS
        const frameDelay = 1000 / FPS; // 프레임 사이의 간격 (16.67ms)
        let deltaTime = 0;            // 프레임 간의 시간 차이
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Game state
        let currentRound = 1;
        let currentStage = 1;
        let gameOver = false;
        let currentWeapon = 'cannon';
        let enemies = [];
        let bullets = [];
        let items = [];
        let lastShot = 0;
        let isCountingDown = true;
        let countdownTime = 3;
        let autoFire = false;
        let gold = 0;
        let isBossStage = false;
        let effects = [];
        let hasAPCR = false;
        let hasBF109 = false;
        let hasJU87 = false;
        let lastJU87Spawn = 0;
        let supportUnits = [];
        let allyUnits = [];
        let lastSupportSpawn = 0;
        let gameStarted = false;
        //경고 시스템 계승
        let warningLines = [];
        let spitfires = [];
        let lastSpitfireSpawn = 0;
        let currentVoice = null;

        // Load assets
        const backgroundImg = new Image();
        backgroundImg.src = 'city.png';
        const playerImg = new Image();
        playerImg.src = 'player.png';
        const enemyImg = new Image();
        enemyImg.src = 'enemy.png';
        const bulletImg = new Image();
        bulletImg.src = 'apcr2.png';
      // Audio setup
        const cannonSound = new Audio('firemn.ogg');
        const machinegunSound = new Audio('firemg.ogg');
        const enemyFireSound = new Audio('fireenemy.ogg');
        let bgm = new Audio('title.ogg');
        bgm.volume = 0.7;  // 볼륨을 70%로 설정
        bgm.loop = true;
        const countSound = new Audio('count.ogg');
        const deathSound = new Audio('death.ogg');
        let currentHitSound = null;
        let currentReloadSound = null;
        const hitSounds = Array.from({length: 6}, (_, i) => new Audio(`hit${i+1}.ogg`));
        const reloadSounds = [new Audio('reload1.ogg'), new Audio('reload2.ogg')];
        const escapeSound = new Audio('escape.ogg');
    
        bgm.loop = true;
        enemyFireSound.volume = 0.5;

        const weapons = {
            cannon: {
                fireRate: 1000,
                damage: 0.25,
                bulletSize: 5,
                sound: cannonSound
            },
            machinegun: {
                fireRate: 200,
                damage: 0.05,
                bulletSize: 2,
                sound: machinegunSound
            }
        };

        const player = {
            x: canvas.width/2,
            y: canvas.height/2,
            speed: 5,
            angle: 0,
            width: 100,
            height: 45,
            health: 1000,
            maxHealth: 1000
        };

                  function startStage(stageNumber) {
          console.log("Starting stage:", stageNumber);
          const titleScreen = document.getElementById('titleScreen');
          titleScreen.style.display = 'none';
          document.getElementById('instructions').style.display = 'block';
          document.getElementById('weaponInfo').style.display = 'block';
          document.getElementById('gameCanvas').style.display = 'block';
          
          // 기존 BGM 정지
          bgm.pause();
          bgm.currentTime = 0;
          
          if (stageNumber === 1) {
              backgroundImg.src = 'city.png';
              bgm = new Audio('BGM2.ogg');
              bgm.volume = 0.7;  // 볼륨을 70%로 설정
          } else if (stageNumber === 2) {
              backgroundImg.src = 'city2.png';
              bgm = new Audio('BGM3.ogg');
              bgm.volume = 0.7;  // 볼륨을 70%로 설정
              enemyImg.src = 'enemyuk1.png';
          }
          
          // 게임 상태 초기화 추가
          currentRound = 1;
          currentStage = stageNumber;
          gameOver = false;
          gold = 0;
          hasAPCR = false;
          hasBF109 = false;
          hasJU87 = false;
          allyUnits = [];
          supportUnits = [];
          bullets = [];
          items = [];
          effects = [];
          spitfires = []; // 스핏파이어 배열 초기화 추가
          warningLines = []; // 경고선 배열 초기화 추가
          lastSpitfireSpawn = Date.now(); // 스폰 타이머 초기화
          
          bgm.loop = true;
          bgm.play().catch(err => console.error("Error playing game music:", err));
      
          gameStarted = true;
          initRound();
          gameLoop();

          // 마지막 프레임 시간 초기화
          lastFrameTime = performance.now();
          // 게임 루프 시작
          gameStarted = true;
          initRound();
          requestAnimationFrame(gameLoop);
      }
     function startCountdown() {
    isCountingDown = true;
    countdownTime = 3;
    countdownEl.style.display = 'block';
    countdownEl.textContent = countdownTime;
    bgm.pause();
    countSound.play();
    
    // 스핏파이어 관련 요소 초기화
    spitfires = [];
    warningLines = [];
    lastSpitfireSpawn = 0; // 0으로 초기화하여 새 라운드 시작 시 바로 스폰되도록 함
    
    // 스핏파이어가 발사한 총알 제거
    bullets = bullets.filter(bullet => !bullet.isSpitfireBullet);
            
    const countInterval = setInterval(() => {
        countdownTime--;
        if(countdownTime <= 0) {
            clearInterval(countInterval);
            countdownEl.style.display = 'none';
            isCountingDown = false;
            bgm.play();
        }
        countdownEl.textContent = countdownTime > 0 ? countdownTime : 'GO!';
    }, 1000);
}

        function initRound() {
            console.log(`Initializing round ${currentRound}`);
            
            // 버튼 상태 초기화
            nextRoundBtn.style.display = 'none';
            document.getElementById('bossButton').style.display = 'none';
            document.getElementById('shop').style.display = 'none';
            document.getElementById('winMessage').style.display = 'none';

            // 적 생성
            enemies = [];
            // 2스테이지에서는 3명부터 시작해서 1명씩 증가
            const enemyCount = currentStage === 2 ? currentRound + 2 : currentRound;
            
            for(let i = 0; i < enemyCount; i++) {
                let x, y;
                const edge = Math.floor(Math.random() * 4);
                
                switch(edge) {
                    case 0: x = Math.random() * canvas.width; y = 0; break;
                    case 1: x = canvas.width; y = Math.random() * canvas.height; break;
                    case 2: x = Math.random() * canvas.width; y = canvas.height; break;
                    case 3: x = 0; y = Math.random() * canvas.height; break;
                }
                
                const enemy = new Enemy();
                enemy.x = x;
                enemy.y = y;
                enemies.push(enemy);
            }

            // 게임 상태 초기화
            player.health = player.maxHealth;
            bullets = [];
            items = [];
            supportUnits = [];
            lastSupportSpawn = 0;

            // 2스테이지에서 3호전차 지원 유닛 추가
            if (currentStage === 2 && allyUnits.length < 2) {
                allyUnits.push(new PanzerIII());
            }

            console.log(`Round ${currentRound} initialized with ${enemies.length} enemies`);
            
            // 카운트다운 시작
            startCountdown();

            // JU87 스폰 설정
            if (hasJU87) {
                setTimeout(() => {
                    supportUnits.push(new JU87());
                    lastJU87Spawn = Date.now();
                }, 3000);
            }
        }
    function checkRoundClear() {
   if(enemies.length === 0) {
       console.log(`Checking round clear: Current round ${currentRound}, Boss stage: ${isBossStage}`);
       
       // 하나의 랜덤한 음성만 재생
       if (!isBossStage) {
           // 이전 음성이 있다면 정지
           if (currentVoice) {
               currentVoice.pause();
               currentVoice.currentTime = 0;
           }
           
           const voiceFiles = ['voice1.ogg', 'voice2.ogg', 'voice3.ogg', 'voice4.ogg', 'voice5.ogg', 'voice6.ogg'];
           const randomIndex = Math.floor(Math.random() * voiceFiles.length);
           currentVoice = new Audio(voiceFiles[randomIndex]);
           currentVoice.volume = 1.0;
           currentVoice.play();
       }
       
       if (!isBossStage) {
           if(currentRound < 10) {
               console.log('Normal round clear - showing next round button and shop');
               nextRoundBtn.style.display = 'block';
               document.getElementById('bossButton').style.display = 'none';
               showShop();
           } else {
               console.log('Final round clear - showing boss button');
               nextRoundBtn.style.display = 'none';
               document.getElementById('bossButton').style.display = 'block';
               document.getElementById('shop').style.display = 'none';
           }
       } else {
           console.log('Boss clear - showing victory message');
           gameOver = true;
           document.getElementById('winMessage').style.display = 'block';
           document.getElementById('bossButton').style.display = 'none';
           nextRoundBtn.style.display = 'none';
           document.getElementById('shop').style.display = 'none';
           restartBtn.style.display = 'block';
           bgm.pause();
           const victorySound = new Audio('victory.ogg');
           victorySound.play();
       }
   }
}

function showShop() {
    document.getElementById('shop').style.display = 'block';
}

const defaultPlayerStats = {
    maxHealth: 1000,
    speed: 5,
    width: 100,
    height: 45
};
 class JU87 {
    constructor() {
        this.x = canvas.width;
        this.y = 50;
        this.speed = 5;
        this.width = 100;
        this.height = 100;
        this.angle = Math.PI;
        this.img = new Image();
        this.img.src = 'ju87.png';
        this.target = null;
        this.lastShot = 0;
        this.spawnTime = Date.now();
        this.hasPlayedSound = false;
        this.hasPlayedMGSound = false;
        this.isReturning = false;
        this.circleAngle = 0;
        this.returningToCenter = false;
        this.ignoreCollisions = false; // 충돌 무시 상태 (타겟팅만 영향)
    }

    selectTarget() {
        if (enemies.length === 0) return null;
        
        // 중앙으로 이동 중일 때는 타겟팅 하지 않음
        if (this.returningToCenter || this.ignoreCollisions) return null;
        
        let nearestEnemy = null;
        let minDist = Infinity;
        
        enemies.forEach(enemy => {
            if (enemy instanceof Spitfire) return;
            
            const dist = Math.hypot(enemy.x - this.x, enemy.y - this.y);
            if (dist < minDist) {
                minDist = dist;
                nearestEnemy = enemy;
            }
        });
        
        return nearestEnemy;
    }

    checkCollision() {
        if (!this.target || this.ignoreCollisions) return false;
        
        const dist = Math.hypot(this.target.x - this.x, this.target.y - this.y);
        return dist < (this.width + this.target.width) / 2;
    }

    moveToCenter() {
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        this.angle = Math.atan2(centerY - this.y, centerX - this.x);
        const dist = Math.hypot(centerX - this.x, centerY - this.y);
        
        if (dist > 10) {
            // 중앙으로 이동하는 동안 더 빠른 속도로 이동
            const moveSpeed = this.speed * 1.5;
            this.x += Math.cos(this.angle) * moveSpeed;
            this.y += Math.sin(this.angle) * moveSpeed;
            return false;
        }
        
        // 중앙 도달 시 충돌 무시 상태 해제
        this.ignoreCollisions = false;
        this.returningToCenter = false;
        return true;
    }

    shoot() {
        // 중앙으로 이동 중일 때는 발사하지 않음
        if (this.returningToCenter || this.ignoreCollisions) return;

        if (!this.hasPlayedMGSound && !isCountingDown) {
            const mgSound = new Audio('ju87mg.ogg');
            mgSound.volume = 1.0;
            mgSound.play();
            this.hasPlayedMGSound = true;
        }

        [[20, 50], [80, 50]].forEach(([x, y]) => {
            const offsetX = x - 50;
            const offsetY = y - 50;
            
            const rotatedX = this.x + (Math.cos(this.angle) * offsetX - Math.sin(this.angle) * offsetY);
            const rotatedY = this.y + (Math.sin(this.angle) * offsetX + Math.cos(this.angle) * offsetY);

            bullets.push({
                x: rotatedX,
                y: rotatedY,
                angle: this.angle,
                speed: 10,
                isEnemy: false,
                damage: weapons.machinegun.damage * 2,
                size: weapons.machinegun.bulletSize
            });
        });
    }

    update() {
        if (!this.hasPlayedSound) {
            const sirenSound = new Audio('ju87siren.ogg');
            sirenSound.volume = 1.0;
            sirenSound.play();
            this.hasPlayedSound = true;
        }

        const timeSinceSpawn = Date.now() - this.spawnTime;
        
        if (timeSinceSpawn > 5000) {
            if (!this.isReturning) {
                this.isReturning = true;
                this.target = null;
                this.returningToCenter = true;
            }
        }

        // 충돌 감지 및 중앙으로 이동 처리
        if (this.checkCollision()) {
            this.returningToCenter = true;
            this.ignoreCollisions = true; // 충돌 후 타겟팅 무시 상태 활성화
            this.target = null;
        }

        if (this.isReturning) {
            if (this.returningToCenter) {
                if (this.moveToCenter()) {
                    this.returningToCenter = false;
                }
            } else {
                this.angle = Math.PI;
                this.x -= this.speed;
                return this.x > 0;
            }
        } else {
            if (!this.target || !enemies.includes(this.target)) {
                this.target = this.selectTarget();
                if (!this.target) {
                    this.moveToCenter();
                }
            }

            if (this.target && !this.ignoreCollisions) {
                this.angle = Math.atan2(this.target.y - this.y, this.target.x - this.x);
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;

                if (Date.now() - this.lastShot > 200) {
                    this.shoot();
                    this.lastShot = Date.now();
                }
            }
        }

        // 화면 경계 체크
        this.x = Math.max(this.width/2, Math.min(canvas.width - this.width/2, this.x));
        this.y = Math.max(this.height/2, Math.min(canvas.height - this.height/2, this.y));

        return true;
    }
}
      //2스테이지 스핏파이어
      class Spitfire {
    constructor(yPosition) {
        this.x = canvas.width;
        this.y = yPosition;
        this.speed = 5;
        this.width = 100;
        this.height = 100;
        this.lastShot = 0;
        this.img = new Image();
        this.img.src = 'spitfire.png';
    }

    shoot() {
        // 카운트다운 중에는 발사하지 않음
        if (isCountingDown) return;
        
        const mgSound = new Audio('firemg.ogg');
        mgSound.volume = 0.5;
        mgSound.play();

        bullets.push({
            x: this.x,
            y: this.y,
            angle: Math.PI,
            speed: 10,
            isEnemy: true,
            damage: 100,
            size: 2,
            isSpitfireBullet: true
        });
    }

    update() {
        // 카운트다운 중이면 false를 반환하여 스핏파이어 제거
        if (isCountingDown) return false;
        
        this.x -= this.speed;
        
        const now = Date.now();
        if (now - this.lastShot > 200) {
            this.shoot();
            this.lastShot = now;
        }
        
        return this.x > 0;
    }
}
      //스핏파이어 경고시스템
      class WarningLine {
    constructor(y) {
        this.y = y;
        this.startTime = Date.now();
        this.duration = 2000; // 2초
    }

    draw(ctx) {
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 5; // 선 두께를 5로 증가
        ctx.setLineDash([10, 20]); // 점선 패턴도 더 크게 조정
        ctx.moveTo(0, this.y);
        ctx.lineTo(canvas.width, this.y);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.lineWidth = 1; // 다른 그리기에 영향을 주지 않도록 리셋
    }//문제생기면 }+ 수정

    isExpired() {
        return Date.now() - this.startTime > this.duration;
    }
}

function spawnSpitfires() {
    // 2스테이지이고, 카운트다운 중이 아니고, 게임이 진행 중일 때만
    if (currentStage === 2 && !isCountingDown && !gameOver && gameStarted) {
        const now = Date.now();
        
        // lastSpitfireSpawn이 0이면 초기화
        
        
        // 15초마다 스폰
        if (now - lastSpitfireSpawn > 15000) {
            console.log('Spawning Spitfires...'); // 디버깅용 로그
            
            const positions = [
                canvas.height * 0.2,
                canvas.height * 0.5,
                canvas.height * 0.8
            ];
            
            // 경고선 생성
            positions.forEach(y => {
                warningLines.push(new WarningLine(y));
            });

            // 2초 후 스핏파이어 생성
            setTimeout(() => {
                if (!isCountingDown && !gameOver) {
                    positions.forEach(y => {
                        spitfires.push(new Spitfire(y));
                    });
                    console.log('Spitfires spawned:', spitfires.length); // 디버깅용 로그
                }
            }, 2000);

            lastSpitfireSpawn = now;
        }
    }
}

      
class SupportUnit {
    constructor(yPosition) {
        this.x = 0;
        this.y = yPosition;
        this.speed = 5;
        this.lastShot = 0;
        this.width = 100;
        this.height = 100;
        this.angle = 0;
        this.img = new Image();
        this.img.src = 'bf109.png';
        this.hasPlayedSound = false;
        this.mgSound = null;
    }

    update() {
        this.x += this.speed;

        if (isCountingDown) {
            if (this.mgSound) {
                this.mgSound.pause();
                this.mgSound.currentTime = 0;
            }
            this.hasPlayedSound = false;
        }

        const now = Date.now();
        if (now - this.lastShot > 200 && !isCountingDown) {
            this.shoot();
            this.lastShot = now;
        }
        return this.x < canvas.width;
    }
    
    shoot() {
        if (!this.hasPlayedSound) {
            const firstSound = new Audio('bf109mg.ogg');
            firstSound.volume = 0.7;
            firstSound.play();
            this.hasPlayedSound = true;
        }

        if (!isCountingDown) {
            const shootSound = new Audio('bf109mgse.ogg');
            shootSound.volume = 0.3;
            shootSound.play();
        }

        bullets.push({
            x: this.x + Math.cos(this.angle) * 30,
            y: this.y + Math.sin(this.angle) * 30,
            angle: this.angle,
            speed: 10,
            isEnemy: false,
            damage: weapons.machinegun.damage,
            size: weapons.machinegun.bulletSize
        });
    }
}
class PanzerIII {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.speed = 2;
        this.health = 500;
        this.maxHealth = 500;
        this.angle = 0;
        this.width = 70;
        this.height = 40;
        this.lastShot = 0;
        this.shootInterval = 2000;
        this.img = new Image();
        this.img.src = 'team.png';
        this.isDead = false;
    }

    shoot() {
        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: false,
            damage: 50,
            size: 3,
            color: 'blue'
        });

        effects.push(new Effect(
            this.x + Math.cos(this.angle) * 30,
            this.y + Math.sin(this.angle) * 30,
            500,
            'fire',
            this.angle,
            this
        ));
    }

    update() {
        if(isCountingDown || this.isDead) return;
        
        // 가장 가까운 적 찾기
        let nearestEnemy = null;
        let minDist = Infinity;
        
        enemies.forEach(enemy => {
            const dist = Math.hypot(enemy.x - this.x, enemy.y - this.y);
            if(dist < minDist) {
                minDist = dist;
                nearestEnemy = enemy;
            }
        });

        // 체력 체크 및 사망 처리
        if(this.health <= 0 && !this.isDead) {
            this.die();
            return;
        }

        // 적을 향해 이동 및 발사
        if(nearestEnemy) {
            this.angle = Math.atan2(nearestEnemy.y - this.y, nearestEnemy.x - this.x);
            
            // 일정 거리 유지
            if(minDist > 300) {
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;
            }
            
            const now = Date.now();
            if(now - this.lastShot > this.shootInterval) {
                this.shoot();
                this.lastShot = now;
            }
        }

        // 화면 경계 체크
        this.x = Math.max(this.width/2, Math.min(canvas.width - this.width/2, this.x));
        this.y = Math.max(this.height/2, Math.min(canvas.height - this.height/2, this.y));
    }

    die() {
        this.isDead = true;
        
        // 폭발 이펙트 추가
        effects.push(new Effect(
            this.x,
            this.y,
            1000,
            'death'
        ));

        // 폭발 사운드 재생
        const deathSound = new Audio('death.ogg');
        deathSound.volume = 1.0;
        deathSound.play();
    }
}

      function buyTank(tankImg, cost, tankId) {
    if (gold >= cost) {
        gold -= cost;
        playerImg.src = tankImg;
        document.getElementById(tankId).style.display = 'none';
        document.getElementById('shop').style.display = 'none';

        if (tankId === 'tank1') {
            player.maxHealth = 1500;
            player.speed = defaultPlayerStats.speed;
            player.width = 90;
            player.height = 50;
        } else if (tankId === 'tank2') {
            player.maxHealth = 2000;
            player.speed = defaultPlayerStats.speed * 0.7;
            player.width = 100;
            player.height = 45;
        }

        player.health = player.maxHealth;
    }
}

function buyAPCR() {
    if (gold >= 1000 && !hasAPCR) {
        gold -= 1000;
        hasAPCR = true;
        document.getElementById('apcr').style.display = 'none';
        document.getElementById('shop').style.display = 'none';
    }
}

function buyBF109() {
    if (gold >= 1000 && !hasBF109) {
        gold -= 1000;
        hasBF109 = true;
        document.getElementById('bf109').style.display = 'none';
        document.getElementById('shop').style.display = 'none';
    }
}

function buyJU87() {
    if (gold >= 1500 && !hasJU87) {
        gold -= 1500;
        hasJU87 = true;
        document.getElementById('ju87').style.display = 'none';
        document.getElementById('shop').style.display = 'none';
        lastJU87Spawn = Date.now();
    }
}
    
function updateGame() {
    if(gameOver) return;
    if(!isCountingDown) {
        // 플레이어 움직임
        if(keys['w']) player.y -= player.speed;
        if(keys['s']) player.y += player.speed;
        if(keys['a']) player.x -= player.speed;
        if(keys['d']) player.x += player.speed;
        
        player.x = Math.max(player.width/2, Math.min(canvas.width - player.width/2, player.x));
        player.y = Math.max(player.height/2, Math.min(canvas.height - player.height/2, player.y));
        
        fireBullet();
    }

    //플레이어 사망시 소리 재생 부분 - 순서 조정
    if(player.health <= 0) {
        // BGM 정지
        bgm.pause();
        bgm.currentTime = 0;
        
        // escape 효과음 먼저 재생
        escapeSound.volume = 1.0;
        escapeSound.play();
        
        // 약간의 딜레이 후 사망 효과음 재생
        setTimeout(() => {
            deathSound.play();
        }, 100);
        
        gameOver = true;
        restartBtn.style.display = 'block';
        effects.push(new Effect(player.x, player.y, 1000, 'death'));
    }

    // BF109 관련 코드
    if (hasBF109 && !isCountingDown) {
        const now = Date.now();
        if (now - lastSupportSpawn > 10000) { // 10초마다
            supportUnits.push(
                new SupportUnit(canvas.height * 0.2),
                new SupportUnit(canvas.height * 0.5),
                new SupportUnit(canvas.height * 0.8)
            );
            lastSupportSpawn = now;
        }
    }

    // JU87 관련 코드
    if (hasJU87 && !isCountingDown) {
        const now = Date.now();
        if (now - lastJU87Spawn > 15000) { // 15초마다
            supportUnits.push(new JU87());
            lastJU87Spawn = now;
        }
    }

    // 스핏파이어 스폰 및 업데이트 로직 추가
    spawnSpitfires();
    
    // 스핏파이어 업데이트
    spitfires = spitfires.filter(spitfire => spitfire.update());

    // BF109 데미지 업데이트 추가
    updateBF109Damage();
    
    // 경고선 업데이트
    warningLines = warningLines.filter(line => !line.isExpired());

    // 지원 유닛 업데이트
    supportUnits = supportUnits.filter(unit => unit.update());

    // 아군 3호전차 업데이트
    allyUnits.forEach(unit => unit.update());
    allyUnits = allyUnits.filter(unit => unit.health > 0);

    // 적 업데이트
    enemies.forEach(enemy => enemy.update());

    if(!isCountingDown) {
        // 총알 처리
        bullets = bullets.filter(bullet => {
            bullet.x += Math.cos(bullet.angle) * bullet.speed;
            bullet.y += Math.sin(bullet.angle) * bullet.speed;
            
            if(!bullet.isEnemy) {
                enemies = enemies.filter(enemy => {
                    const dist = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
                    if(dist < 30) {
                        let damage = currentWeapon === 'cannon' ? 250 : 50;
                        enemy.health -= damage;
                        if(enemy.health <= 0) {
                            spawnHealthItem(enemy.x, enemy.y);
                            gold += 100;
                            effects.push(new Effect(enemy.x, enemy.y, 1000, 'death'));
                            deathSound.cloneNode().play();
                            
                            // 히트 사운드 재생 추가
                            if (!currentHitSound || currentHitSound.ended) {
                                currentHitSound = hitSounds[Math.floor(Math.random() * hitSounds.length)];
                                currentHitSound.volume = 1.0;
                                currentHitSound.play();
                            }
                            
                            return false;
                        }
                        return true;
                    }
                    return true;
                });
            } else {
                // 상점이 열려있지 않을 때만 플레이어 데미지 처리
                if (!document.getElementById('shop').style.display || 
                    document.getElementById('shop').style.display === 'none') {
                    const distToPlayer = Math.hypot(bullet.x - player.x, bullet.y - player.y);
                    if(distToPlayer < 30) {
                        player.health -= bullet.damage || 100;
                        return false;
                    }

                    // 아군 3호전차 피격 체크
                    for(let ally of allyUnits) {
                        const distToAlly = Math.hypot(bullet.x - ally.x, bullet.y - ally.y);
                        if(distToAlly < 30) {
                            ally.health -= bullet.damage || 100;
                            return false;
                        }
                    }
                }
            }
            return bullet.x >= 0 && bullet.x <= canvas.width && 
                   bullet.y >= 0 && bullet.y <= canvas.height;
        });

        // 아이템 처리
        items = items.filter(item => {
            const dist = Math.hypot(item.x - player.x, item.y - player.y);
            if(dist < 30) {
                player.health = Math.min(player.health + 200, player.maxHealth);
                return false;
            }
            return true;
        });

        // 아군 전차와 적 전차 충돌 체크
        allyUnits.forEach(ally => {
            enemies.forEach(enemy => {
                const dist = Math.hypot(ally.x - enemy.x, ally.y - enemy.y);
                if (dist < (ally.width + enemy.width) / 2) {
                    // 충돌 시 서로 밀어내기
                    const angle = Math.atan2(ally.y - enemy.y, ally.x - enemy.x);
                    const pushDistance = ((ally.width + enemy.width) / 2 - dist) / 2;
                    
                    ally.x += Math.cos(angle) * pushDistance;
                    ally.y += Math.sin(angle) * pushDistance;
                    enemy.x -= Math.cos(angle) * pushDistance;
                    enemy.y -= Math.sin(angle) * pushDistance;
                }
            });
        });
        
        // 라운드 클리어 체크
        checkRoundClear();
    }
}
      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.isBoss ? (currentStage === 2 ? 'enemyukboss.png' : 'boss.png') : enemy.enemyImg;
        // 이 부분을 아래와 같이 수정
        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');
    });

    // 아군 3호전차 그리기
    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));

    // 스핏파이어 그리기
    spitfires.forEach(spitfire => {
        ctx.save();
        ctx.translate(spitfire.x, spitfire.y);
        ctx.rotate(Math.PI); // 왼쪽으로 비행하므로 180도 회전
        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}/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);
        const size = effect.type === 'death' ? 75 : 42;
        ctx.drawImage(effect.img, -size/2, -size/2, size, size);
        ctx.restore();
    });

    // 카운트다운 오버레이
    if (isCountingDown) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
}
  //bf109 히트 시스템
function updateBF109Damage() {
    supportUnits = supportUnits.filter(unit => {
        if (unit instanceof SupportUnit) { // BF109인 경우
            let hitCount = 0;
            bullets = bullets.filter(bullet => {
                if (bullet.isSpitfireBullet) {
                    const dist = Math.hypot(bullet.x - unit.x, bullet.y - unit.y);
                    if (dist < 30) {
                        hitCount++;
                        return false;
                    }
                }
                return true;
            });

            if (hitCount >= 5) {
                effects.push(new Effect(unit.x, unit.y, 1000, 'death'));
                deathSound.cloneNode().play();
                return false;
            }
        }
        return true;
    });
}
    function gameLoop(timestamp) {
        if (!gameOver && gameStarted) {
        // 첫 프레임일 경우 시간 초기화
        if (!lastFrameTime) {
            lastFrameTime = timestamp;
        }

        // 현재 프레임과 이전 프레임의 시간 차이 계산
        deltaTime = timestamp - lastFrameTime;

        // 16.67ms(60FPS)가 지났는지 확인
        if (deltaTime >= frameDelay) {
            // 업데이트할 프레임 수 계산
            const numUpdates = Math.floor(deltaTime / frameDelay);
            
            // 한번에 너무 많은 업데이트 방지 (최대 3프레임)
            const maxUpdates = 3;
            
            // 게임 상태 업데이트
            for (let i = 0; i < Math.min(numUpdates, maxUpdates); i++) {
                updateGame(frameDelay / 1000);
            }
            
            // 화면 그리기
            drawGame();

            // 마지막 프레임 시간 업데이트
            lastFrameTime = timestamp - (deltaTime % frameDelay);
        }

        // 다음 프레임 요청
        requestAnimationFrame(gameLoop);
    }
}
      class Enemy {
    constructor(isBoss = false) {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.health = currentStage === 2 ? (isBoss ? 25000 : 1500) : (isBoss ? 20000 : 1000);
        this.maxHealth = this.health;
        this.speed = isBoss ? 1 : 2;
        this.lastShot = 0;
        this.shootInterval = isBoss ? 1000 : 1000;
        this.angle = 0;
        this.width = 100;
        this.height = 45;
        this.moveTimer = 0;
        this.moveInterval = Math.random() * 2000 + 1000;
        this.moveAngle = Math.random() * Math.PI * 2;
        this.isBoss = isBoss;
    
             if (currentStage === 2) {
          if (isBoss) {
              this.enemyImg = new Image();
              this.enemyImg.src = 'enemyukboss.png';
          } else if (currentRound >= 7) {
              this.enemyImg = new Image();
              this.enemyImg.src = 'enemyuk3.png';
          } else if (currentRound >= 4) {
              this.enemyImg = new Image();
              this.enemyImg.src = 'enemyuk2.png';
          } else {
              this.enemyImg = new Image();
              this.enemyImg.src = 'enemyuk1.png';
          }
      } else {
          if (isBoss) {
              this.enemyImg = new Image();
              this.enemyImg.src = 'boss.png';
          } else if (currentRound >= 7) {
              this.enemyImg = new Image();
              this.enemyImg.src = 'enemy3.png';
          } else if (currentRound >= 4) {
              this.enemyImg = new Image();
              this.enemyImg.src = 'enemy2.png';
          } else {
              this.enemyImg = new Image();
              this.enemyImg.src = 'enemy.png';  // 기본 이미지 추가
          }
      }
  }

    update() {
        if(isCountingDown) return;
        const now = Date.now();
        
        if (now - this.moveTimer > this.moveInterval) {
            this.moveAngle = Math.random() * Math.PI * 2;
            this.moveTimer = now;
        }

        this.x += Math.cos(this.moveAngle) * this.speed;
        this.y += Math.sin(this.moveAngle) * this.speed;

        this.x = Math.max(this.width/2, Math.min(canvas.width - this.width/2, this.x));
        this.y = Math.max(this.height/2, Math.min(canvas.height - this.height/2, this.y));

        this.angle = Math.atan2(player.y - this.y, player.x - this.x);

        if (now - this.lastShot > this.shootInterval && !isCountingDown) {
            this.shoot();
            this.lastShot = now;
        }
    }

    shoot() {
        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 ? 300 : 150
        });
    }
}

// 보스 스테이지 시작 함수 수정
function startBossStage() {
    isBossStage = true;
    enemies = [];
    enemies.push(new Enemy(true));
    player.health = player.maxHealth;
    bullets = [];
    items = [];
    allyUnits = []; // 3호전차 초기화
    if (currentStage === 2 && allyUnits.length < 2) {
        allyUnits.push(new PanzerIII());
    }
    document.getElementById('bossButton').style.display = 'none';
    bgm.src = 'BGM.ogg';
    bgm.loop = true;
    bgm.play();
    startCountdown();
}
      // 이벤트 리스너
document.addEventListener('DOMContentLoaded', () => {
    const titleScreen = document.getElementById('titleScreen');
    const instructions = document.getElementById('instructions');
    const weaponInfo = document.getElementById('weaponInfo');
    const gameCanvas = document.getElementById('gameCanvas');

    instructions.style.display = 'none';
    weaponInfo.style.display = 'none';
    gameCanvas.style.display = 'none';

    bgm.play().catch(err => console.error("Error playing title music:", err));

    // 다음 라운드 버튼 클릭 이벤트
    nextRoundBtn.addEventListener('click', () => {
        currentRound++;
        nextRoundBtn.style.display = 'none';
        document.getElementById('shop').style.display = 'none';
        initRound();
    });

    // 재시작 버튼 클릭 이벤트
    restartBtn.addEventListener('click', () => {
        location.reload();
    });

    // 보스 버튼 클릭 이벤트
    document.getElementById('bossButton').addEventListener('click', () => {
        startBossStage();
    });
});

// 키보드 및 마우스 이벤트
const keys = {};
document.addEventListener('keydown', e => {
    keys[e.key] = true;
    if(e.key.toLowerCase() === 'c') {
        currentWeapon = currentWeapon === 'cannon' ? 'machinegun' : 'cannon';
        weaponInfo.textContent = `Current Weapon: ${currentWeapon.charAt(0).toUpperCase() + currentWeapon.slice(1)}`;
    } else if(e.key.toLowerCase() === 'r') {
        autoFire = !autoFire;
    }
});

document.addEventListener('keyup', e => keys[e.key] = false);

canvas.addEventListener('mousemove', (e) => {
    player.angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
});

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

function spawnHealthItem(x, y) {
    items.push({x, y});
}

function drawHealthBar(x, y, health, maxHealth, width, height, color) {
    ctx.fillStyle = '#333';
    ctx.fillRect(x - width/2, y - height/2, width, height);
    ctx.fillStyle = color;
    ctx.fillRect(x - width/2, y - height/2, width * (health/maxHealth), height);
}

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,
            'fire',
            player.angle,
            player
        ));

        bullets.push({
            x: player.x + Math.cos(player.angle) * 30,
            y: player.y + Math.sin(player.angle) * 30,
            angle: player.angle,
            speed: hasAPCR ? 20 : 10,
            isEnemy: false,
            damage: weapon.damage,
            size: weapon.bulletSize,
            isAPCR: hasAPCR
        });
        lastShot = now;
    }
}

// Effect 클래스
class Effect {
    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' : 'fire2.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;
    }
}
</script>
</body>
</html>