Spaces:

cutechicken
/

tankwar

Running

App Files Files Community

cutechicken commited on Dec 2, 2024

Commit

03f0d26

verified ·

1 Parent(s): b9c6a25

Update index.html

Browse files

Files changed (1) hide show

index.html +1001 -640

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html>
 <head>
     <title>Tank Battle</title>
-            <style>
         body {
             margin: 0;
             overflow: hidden;
@@ -52,10 +52,10 @@
             top: 80% !important;
         }
         #restart {
-            top: 80% !important;  /* 재시작 버튼 위치 추가 */
         }
         #winMessage {
-            top: 30% !important;  /* 승리 메시지 위치 추가 */
             font-size: 72px;
             background: none;
         }
@@ -137,12 +137,11 @@
         <h1>TANK WAR</h1>
         <div id="stageSelect">
             <button class="stageButton" onclick="startStage(1)">Stage 1</button>
-            <button class="stageButton" disabled>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;">
@@ -200,6 +199,7 @@
         // Game state
         let currentRound = 1;
         let gameOver = false;
         let currentWeapon = 'cannon';
         let enemies = [];
@@ -217,8 +217,13 @@
         let hasJU87 = false;
         let lastJU87Spawn = 0;
         let supportUnits = [];
         let lastSupportSpawn = 0;
         let gameStarted = false;
         // Load assets
         const backgroundImg = new Image();
@@ -229,8 +234,7 @@
         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');
@@ -266,28 +270,49 @@
             maxHealth: 1000
         };
-        function startStage(stageNumber) {
-            console.log("Starting stage:", stageNumber);
-            const titleScreen = document.getElementById('titleScreen');
-            if (stageNumber === 1) {
-                titleScreen.style.display = 'none';
-                document.getElementById('instructions').style.display = 'block';
-                document.getElementById('weaponInfo').style.display = 'block';
-                document.getElementById('gameCanvas').style.display = 'block';
-                bgm.pause();
-                bgm = new Audio('BGM2.ogg');
-                bgm.loop = true;
-                bgm.play().catch(err => console.error("Error playing game music:", err));
-                gameStarted = true;
-                currentRound = 1;
-                initRound();
-                gameLoop();
-            }
-        }
-        function startCountdown() {
             isCountingDown = true;
             countdownTime = 3;
             countdownEl.style.display = 'block';
@@ -318,7 +343,9 @@
             // 적 생성
             enemies = [];
-            const enemyCount = currentRound;
             for(let i = 0; i < enemyCount; i++) {
                 let x, y;
                 const edge = Math.floor(Math.random() * 4);
@@ -343,6 +370,11 @@
             supportUnits = [];
             lastSupportSpawn = 0;
             console.log(`Round ${currentRound} initialized with ${enemies.length} enemies`);
             // 카운트다운 시작
@@ -356,693 +388,1022 @@
                 }, 3000);
             }
         }
-        function checkRoundClear() {
-            if(enemies.length === 0) {
-                console.log(`Checking round clear: Current round ${currentRound}, Boss stage: ${isBossStage}`);
-                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
-        };
-        // player 부분 수정 (buyTank 함수)
-        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();
             }
-            // 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;
-                }
             }
-            // 지원 유닛 업데이트
-            supportUnits = supportUnits.filter(unit => unit.update());
-            // 적 업데이트 - 한 번만 실행
-            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();
-                                    return false;
-                                }
-                                return true;
-                            }
-                            return true;
-                        });
-                    } else {
-                        const dist = Math.hypot(bullet.x - player.x, bullet.y - player.y);
-                        if(dist < 30) {
-                            player.health -= bullet.damage || 100;
-                            if(player.health <= 0) {
-                                gameOver = true;
-                                restartBtn.style.display = 'block';
-                                effects.push(new Effect(player.x, player.y, 1000, 'death'));
-                                deathSound.cloneNode().play();
-                            }
-                            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;
-                });
-                // 라운드 클리어 체크
-                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 ? enemy.enemyImg : (enemy.enemyImg || 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');
-            });
-            // 지원 유닛 그리기
-            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.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(`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);
             }
         }
-        function gameLoop() {
-            if (!gameOver && gameStarted) {
-                updateGame();
-                drawGame();
-                requestAnimationFrame(gameLoop);
-            }
         }
-        // 이벤트 리스너
-        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;
             }
         }
-        function startBossStage() {
-            isBossStage = true;
-            enemies = [];
-            enemies.push(new Enemy(true));
-            player.health = player.maxHealth;
-            bullets = [];
-            items = [];
-            document.getElementById('bossButton').style.display = 'none';
-            bgm.src = 'BGM.ogg';
-            bgm.loop = true;
-            bgm.play();
-            startCountdown();
         }
-        // Enemy 클래스
-          class Enemy {
-        constructor(isBoss = false) {
-            this.x = Math.random() * canvas.width;
-            this.y = Math.random() * canvas.height;
-            this.health = isBoss ? 15000 : 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 (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';
-            }
         }
-        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
-            });
-        }
-    }
-        // 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;
-            }
-        }
-        // SupportUnit 클래스
-        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
-                });
             }
         }
-        // JU87 클래스
-        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;
-            }
-            selectTarget() {
-                return enemies.length > 0 ?
-                    enemies[Math.floor(Math.random() * enemies.length)] : null;
-            }
-            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;
-                const centerX = canvas.width / 2;
-                const centerY = canvas.height / 2;
-                if (timeSinceSpawn > 5000) {
-                    if (!this.isReturning) {
-                        this.isReturning = true;
-                        this.target = null;
-                        this.angle = Math.atan2(centerY - this.y, centerX - this.x);
-                    } else {
-                        this.angle = Math.PI;
-                        this.x -= this.speed;
-                        return this.x > 0;
-                    }
-                } else if (this.returningToCenter) {
-                    const distToCenter = Math.hypot(this.x - centerX, this.y - centerY);
-                    if (distToCenter > 50) {
-                        this.angle = Math.atan2(centerY - this.y, centerX - this.x);
-                    } else {
-                        this.returningToCenter = false;
-                        this.target = this.selectTarget();
-                    }
-                } else if (this.target) {
-                    const distToTarget = Math.hypot(this.x - this.target.x, this.y - this.target.y);
-                    if (!enemies.includes(this.target) || distToTarget < 30) {
-                        this.returningToCenter = true;
-                        this.target = null;
-                    } else {
-                        this.angle = Math.atan2(this.target.y - this.y, this.target.x - this.x);
-                    }
-                } else {
-                    this.target = this.selectTarget();
-                    if (!this.target) {
-                        this.circleAngle += 0.02;
-                        const radius = Math.min(canvas.width, canvas.height) / 4;
-                        const targetX = centerX + Math.cos(this.circleAngle) * radius;
-                        const targetY = centerY + Math.sin(this.circleAngle) * radius;
-                        this.angle = Math.atan2(targetY - this.y, targetX - this.x);
-                    }
-                }
-                this.x += Math.cos(this.angle) * this.speed;
-                this.y += Math.sin(this.angle) * this.speed;
-                if (!this.returningToCenter && !this.isReturning && this.target &&
-                    Date.now() - this.lastShot > 200) {
-                    this.shoot();
-                    this.lastShot = Date.now();
-                }
-                return true;
-            }
-            shoot() {
-                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
-                    });
-                });
-            }
         }
-    </script>
 </body>
 </html>

 <html>
 <head>
     <title>Tank Battle</title>
+    <style>
         body {
             margin: 0;
             overflow: hidden;
             top: 80% !important;
         }
         #restart {
+            top: 80% !important;
         }
         #winMessage {
+            top: 30% !important;
             font-size: 72px;
             background: none;
         }
         <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;">
         // Game state
         let currentRound = 1;
+        let currentStage = 1;
         let gameOver = false;
         let currentWeapon = 'cannon';
         let enemies = [];
         let hasJU87 = false;
         let lastJU87Spawn = 0;
         let supportUnits = [];
+        let allyUnits = [];
         let lastSupportSpawn = 0;
         let gameStarted = false;
+        //경고 시스템 계승
+        let warningLines = [];
+        let spitfires = [];
+        let lastSpitfireSpawn = 0;
         // Load assets
         const backgroundImg = 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');
             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');
+          } else if (stageNumber === 2) {
+              backgroundImg.src = 'city2.png';
+              bgm = new Audio('BGM3.ogg');
+              enemyImg.src = 'enemyuk1.png';
+          }
+          // 게임 상태 초기화 추가
+          currentRound = 1;
+          currentStage = stageNumber;
+          gameOver = false;
+          gold = 0;
+          hasAPCR = false;
+          hasBF109 = false;
+          hasJU87 = false;
+          allyUnits = [];
+          supportUnits = [];
+          bullets = [];
+          items = [];
+          effects = [];
+          bgm.loop = true;
+          bgm.play().catch(err => console.error("Error playing game music:", err));
+          gameStarted = true;
+          initRound();
+          gameLoop();
+      }
+      function startCountdown() {
             isCountingDown = true;
             countdownTime = 3;
             countdownEl.style.display = 'block';
             // 적 생성
             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);
             supportUnits = [];
             lastSupportSpawn = 0;
+            // 2스테이지에서 3호전차 지원 유닛 추가
+            if (currentStage === 2 && allyUnits.length < 2) {
+                allyUnits.push(new PanzerIII());
+            }
             console.log(`Round ${currentRound} initialized with ${enemies.length} enemies`);
             // 카운트다운 시작
                 }, 3000);
             }
         }
+      function checkRoundClear() {
+    if(enemies.length === 0) {
+        console.log(`Checking round clear: Current round ${currentRound}, Boss stage: ${isBossStage}`);
+        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;
+    }
+   selectTarget() {
+        if (enemies.length === 0) 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) return false;
+        const dist = Math.hypot(this.target.x - this.x, this.target.y - this.y);
+        return dist < (this.width + this.target.width) / 2;
+    }
+    shoot() {
+        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
+            });
+        });
+    }
+    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) {
+            this.x += Math.cos(this.angle) * this.speed;
+            this.y += Math.sin(this.angle) * this.speed;
+            return false;
         }
+        return true;
+    }
+    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.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.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() {
+        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() {
+        this.x -= this.speed;
+        const now = Date.now();
+        if (now - this.lastShot > 200) { // 1초에 5발
+            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() {
+    if (currentStage === 2 && !isCountingDown) {
+        const now = Date.now();
+        if (now - lastSpitfireSpawn > 15000) { // 15초마다
+            const positions = [
+                canvas.height * 0.2,
+                canvas.height * 0.5,
+                canvas.height * 0.8
+            ];
+            // 경고선 생성
+            positions.forEach(y => {
+                warningLines.push(new WarningLine(y));
             });
+            // 2초 후 스핏파이어 생성
+            setTimeout(() => {
+                positions.forEach(y => {
+                    spitfires.push(new Spitfire(y));
+                });
+            }, 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();
+    }
+    // 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());
+    // 경고선 업데이트
+    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();
+                            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;
+                        if(player.health <= 0) {
+                            gameOver = true;
+                            restartBtn.style.display = 'block';
+                            effects.push(new Effect(player.x, player.y, 1000, 'death'));
+                            deathSound.cloneNode().play();
+                        }
+                        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() {
+    if (!gameOver && gameStarted) {
+        updateGame();
+        drawGame();
+        requestAnimationFrame(gameLoop);
+    }
+}
+      class Enemy {
+    constructor(isBoss = false) {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.health = currentStage === 2 ? (isBoss ? 15000 : 1500) : (isBoss ? 15000 : 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>