Spaces:

cutechicken
/

tankwar

Running

File size: 38,925 Bytes

<!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" 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;">
            <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');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Game state
        let currentRound = 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 lastSupportSpawn = 0;
        let gameStarted = false;

        // 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');
        const countSound = new Audio('count.ogg');
        const deathSound = new Audio('death.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');
            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';
            countdownEl.textContent = countdownTime;
            bgm.pause();
            countSound.play();
            
            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 = [];
            const enemyCount = 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;

            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(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 = 1.0;
                    firstSound.play();
                    this.hasPlayedSound = true;
                }

                if (!isCountingDown) {
                    const shootSound = new Audio('bf109mgse.ogg');
                    shootSound.volume = 0.5;
                    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>