tankwar

Running

App Files Files Community

cutechicken commited on Dec 2, 2024

Commit

dd37820

verified ·

1 Parent(s): c70fefd

Update index.html

Browse files

Files changed (1) hide show

index.html +602 -579

index.html CHANGED Viewed

@@ -102,7 +102,8 @@
         }
     </style>
 </head>
- <div id="instructions">
         Controls:<br>
         WASD - Move tank<br>
         Mouse - Aim<br>
@@ -115,149 +116,176 @@
     <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>
-      <button id="startButton">START GAME</button>
-  </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"> <!-- 여기를 80x20으로 수정 -->
-              <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;  // APCR 구매 여부
-        let hasBF109 = false;  // BF-109 구매 여부
-        let hasJU87 = false;   // JU-87 구매 여부
-        let lastJU87Spawn = 0; // 마지막 JU-87 생성 시간
-        let supportUnits = [];  // 지원 유닛 배열
-        let lastSupportSpawn = 0;  // 마지막 지원 유닛 생성 시간
-        // 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();  // APCR 총알 이미지
-        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');  // 'title.ogg'로 초기화하고 let으로 선언
-        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
-            }
-        };
-        // Player setup
-        const player = {
-            x: canvas.width/2,
-            y: canvas.height/2,
-            speed: 5,
-            angle: 0,
-            width: 100,
-            height: 45,
-            health: 1000,
-            maxHealth: 1000
-        };
-        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);
         }
-              class Effect {
     constructor(x, y, duration, type, angle = 0, parent = null) {
         this.x = x;
         this.y = y;
@@ -265,8 +293,8 @@
         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';
     }
@@ -283,7 +311,8 @@
         return Date.now() - this.startTime > this.duration;
     }
 }
- class SupportUnit {
     constructor(yPosition) {
         this.x = 0;
         this.y = yPosition;
@@ -294,15 +323,13 @@
         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();
@@ -311,7 +338,6 @@
             this.hasPlayedSound = false;
         }
-        // 발사 (1초에 5발)
         const now = Date.now();
         if (now - this.lastShot > 200 && !isCountingDown) {
             this.shoot();
@@ -321,7 +347,6 @@
     }
     shoot() {
-        // 최초 등장시에만 bf109mg.ogg 재생
         if (!this.hasPlayedSound) {
             const firstSound = new Audio('bf109mg.ogg');
             firstSound.volume = 1.0;
@@ -329,10 +354,9 @@
             this.hasPlayedSound = true;
         }
-        // 발사할 때마다 새로운 bf109mgse.ogg 재생
         if (!isCountingDown) {
             const shootSound = new Audio('bf109mgse.ogg');
-            shootSound.volume = 0.5; // 볼륨 낮춤
             shootSound.play();
         }
@@ -347,7 +371,8 @@
         });
     }
 }
-      class JU87 {
     constructor() {
         this.x = canvas.width;
         this.y = 50;
@@ -364,7 +389,7 @@
         this.hasPlayedMGSound = false;
         this.isReturning = false;
         this.circleAngle = 0;
-        this.returningToCenter = false;  // 중앙으로 돌아가는 상태 추가
     }
     selectTarget() {
@@ -372,35 +397,34 @@
             enemies[Math.floor(Math.random() * enemies.length)] : null;
     }
-   shoot() {
-    // 카운트다운 중이 아닐 때만 소리 재생
-    if (!this.hasPlayedMGSound && !isCountingDown) {
-        const mgSound = new Audio('ju87mg.ogg');
-        mgSound.volume = 1.0;
-        mgSound.currentTime = 0;
-        mgSound.play().catch(error => console.error('Audio play failed:', error));
-        this.hasPlayedMGSound = true;
-    }
-    // 100x100 픽셀 기준으로 날개 위치 좌표 설정
-    [[20, 50], [80, 50]].forEach(([x, y]) => {
-        const offsetX = x - 50;
-        const offsetY = y - 50;
-        const rotatedX = this.x + (Math.cos(this.angle) * offsetX - Math.sin(this.angle) * offsetY);
-        const rotatedY = this.y + (Math.sin(this.angle) * offsetX + Math.cos(this.angle) * offsetY);
-        bullets.push({
-            x: rotatedX,
-            y: rotatedY,
-            angle: this.angle,
-            speed: 10,
-            isEnemy: false,
-            damage: weapons.machinegun.damage * 2,
-            size: weapons.machinegun.bulletSize
         });
-    });
-}
     update() {
         if (!this.hasPlayedSound) {
             const sirenSound = new Audio('ju87siren.ogg');
@@ -464,89 +488,126 @@
         return true;
     }
 }
-        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
-    });
-}
         }
-        function showShop() {
-            document.getElementById('shop').style.display = 'block';
         }
-   // 플레이어의 기본 상태를 저장
 const defaultPlayerStats = {
     maxHealth: 1000,
     speed: 5,
     width: 100,
     height: 45
 };
 function buyTank(tankImg, cost, tankId) {
     if (gold >= cost) {
         gold -= cost;
@@ -554,23 +615,24 @@ function buyTank(tankImg, cost, tankId) {
         document.getElementById(tankId).style.display = 'none';
         document.getElementById('shop').style.display = 'none';
-        if (tankId === 'tank1') {  // PZ.IV
             player.maxHealth = 1500;
-            player.speed = defaultPlayerStats.speed;  // 기본 이동속도로 복구
-            player.width = 90;     // PZ.IV의 크기 설정
-            player.height = 50;     // PZ.IV의 크기 설정
         }
-        else if (tankId === 'tank2') {  // TIGER
             player.maxHealth = 2000;
             player.speed = defaultPlayerStats.speed * 0.7;
-            player.width = 100;     // TIGER는 기본 크기 유지
-            player.height = 45;     // TIGER는 기본 크기 유지
         }
         player.health = player.maxHealth;
     }
 }
-      function buyAPCR() {
     if (gold >= 1000 && !hasAPCR) {
         gold -= 1000;
         hasAPCR = true;
@@ -578,7 +640,8 @@ function buyTank(tankImg, cost, tankId) {
         document.getElementById('shop').style.display = 'none';
     }
 }
-      function buyBF109() {
     if (gold >= 1000 && !hasBF109) {
         gold -= 1000;
         hasBF109 = true;
@@ -586,228 +649,277 @@ function buyTank(tankImg, cost, tankId) {
         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 initRound() {
-    enemies = [];
-    for(let i = 0; i < 1 * currentRound; i++) {
-        enemies.push(new Enemy());
     }
-    player.health = player.maxHealth;
-    bullets = [];
-    items = [];
-    supportUnits = [];
-    lastSupportSpawn = 0;
-    // 카운트다운 시작
-    startCountdown();
-    // 카운트다운이 끝나면 JU87 스폰
-    setTimeout(() => {
-        if (hasJU87) {
-            supportUnits.push(new JU87());
-            lastJU87Spawn = Date.now();
-        }
-    }, 3000); // 3초 후에 스폰
 }
-               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으로 변경
-            startCountdown();
-        }
-        canvas.addEventListener('mousemove', (e) => {
-            player.angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
-        });
-        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);
-                    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,  // APCR 적용 시 100% 증가
-                    isEnemy: false,
-                    damage: weapon.damage,
-                    size: weapon.bulletSize,
-                    isAPCR: hasAPCR
-                });
-                lastShot = 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;
-        }
-    }
-    // 모든 지원 유닛 업데이트 (BF109와 JU87 모두 처리)
-    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;
-                        }
-                        if(player.health <= 0) {
-                            gameOver = true;
-                            restartBtn.style.display = 'block';
-                            effects.push(new Effect(player.x, player.y, 1000, 'death'));
-                            deathSound.cloneNode().play();
-                        }
-                        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';
                     }
-                    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;
-        });
-        if(enemies.length === 0) {
-            if (!isBossStage) {
-                if(currentRound < 10) {
-                    nextRoundBtn.style.display = 'block';
-                    showShop();
-                } else {
-                    document.getElementById('bossButton').style.display = 'block';
-                }
             } else {
-                gameOver = true;
-                document.getElementById('winMessage').style.display = 'block';
-                restartBtn.style.display = 'block';
-                bgm.pause();  // 현재 BGM 정지
-                const victorySound = new Audio('victory.ogg');  // 승리 사운드 생성
-                victorySound.play();  // 승리 사운드 재생
             }
         }
     }
 }
-       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 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();
@@ -818,31 +930,34 @@ function buyTank(tankImg, cost, tankId) {
         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);
-                // 기관총일 때 크기 50% 감소
-                const width = currentWeapon === 'machinegun' ? 10 : 20;  // 기관총일 때 10, 캐논일 때 20
-                const height = currentWeapon === 'machinegun' ? 5 : 10;  // 기관총일 때 5, 캐논일 때 10
-                ctx.drawImage(bulletImg, -width/2, -height/2, width, height);
-                ctx.restore();
-            }
-        });
     // 아이템 그리기
     items.forEach(item => {
         ctx.beginPath();
@@ -850,123 +965,31 @@ function buyTank(tankImg, cost, tankId) {
         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);
-    // bang.png는 1.5배 크게
-    const size = effect.type === 'death' ? 75 : 42;  // death는 75px (1.5배), fire는 42px
-    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) {
-        updateGame();
-        drawGame();
-        requestAnimationFrame(gameLoop);
     }
 }
-document.addEventListener('DOMContentLoaded', () => {
-    // DOM 요소 참조
-    const titleScreen = document.getElementById('titleScreen');
-    const startButton = document.getElementById('startButton');
-    const instructions = document.getElementById('instructions');
-    const weaponInfo = document.getElementById('weaponInfo');
-    const gameCanvas = document.getElementById('gameCanvas');
-    const nextRoundBtn = document.getElementById('nextRound'); // 다음 라운드 버튼 참조 추가
-    const restartBtn = document.getElementById('restart'); // 재시작 버튼 참조 추가
-    // 초기 상태
-    instructions.style.display = 'none';
-    weaponInfo.style.display = 'none';
-    gameCanvas.style.display = 'none';
-    // 디버깅용 확인 로그
-    console.log("DOM Loaded");
-    // 타이틀 음악 재생
-    bgm.play().catch(err => console.error("Error playing title music:", err));
-    // Start Button 클릭 이벤트
-    startButton.addEventListener('click', () => {
-        console.log("Start Button Clicked");
-        if (!titleScreen || !instructions || !weaponInfo || !gameCanvas) {
-            console.error("DOM elements not found");
-            return;
-        }
-        titleScreen.style.display = 'none';
-        instructions.style.display = 'block';
-        weaponInfo.style.display = 'block';
-        gameCanvas.style.display = 'block';
-        bgm.pause();
-        bgm.src = 'BGM2.ogg';
-        bgm.play().catch(err => console.error("Error playing game music:", err));
-        initRound();
-        gameLoop();
-    });
-    // [추가] 다음 라운드 버튼 클릭 이벤트
-    nextRoundBtn.addEventListener('click', () => {
-        currentRound++;
-        nextRoundBtn.style.display = 'none';
-        document.getElementById('shop').style.display = 'none';
-        initRound();
-        console.log(`Starting Round ${currentRound}`); // 라운드 진행 확인용 로그
-    });
-    // [추가] 재시작 버튼 클릭 이벤트
-    restartBtn.addEventListener('click', () => {
-        gameOver = false;
-        currentRound = 1;
-        isBossStage = false;
-        player.health = player.maxHealth;
-        gold = 0;
-        restartBtn.style.display = 'none';
-        document.getElementById('winMessage').style.display = 'none';
-        document.getElementById('shop').style.display = 'none';
-        initRound();
-    });
-    // [추가] 보스 버튼 클릭 이벤트
-    document.getElementById('bossButton').addEventListener('click', () => {
-        startBossStage();
-    });
-    // 이미지 로드 확인
-    Promise.all([
-        new Promise(resolve => backgroundImg.onload = resolve),
-        new Promise(resolve => playerImg.onload = resolve),
-        new Promise(resolve => enemyImg.onload = resolve)
-    ]).then(() => {
-        console.log("Assets loaded successfully");
-    }).catch(err => console.error("Error loading assets:", err));
-    // 창 크기 변경 시 캔버스 크기 업데이트
-    window.addEventListener('resize', () => {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-    });
-});
-   </script>
 </body>
 </html>

         }
     </style>
 </head>
+<body>
+    <div id="instructions">
         Controls:<br>
         WASD - Move tank<br>
         Mouse - Aim<br>
     <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>
+        <button id="startButton">START GAME</button>
+    </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;
+    // 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
         }
+    };
+    // Player setup
+    const player = {
+        x: canvas.width/2,
+        y: canvas.height/2,
+        speed: 5,
+        angle: 0,
+        width: 100,
+        height: 45,
+        health: 1000,
+        maxHealth: 1000
+    };
+    // 다음 라운드 버튼 이벤트 리스너 추가
+    nextRoundBtn.addEventListener('click', () => {
+        currentRound++;
+        document.getElementById('shop').style.display = 'none';
+        nextRoundBtn.style.display = 'none';
+        initRound();
+    });
+    // 재시작 버튼 이벤트 리스너 추가
+    restartBtn.addEventListener('click', () => {
+        currentRound = 1;
+        gameOver = false;
+        gold = 0;
+        player.health = player.maxHealth;
+        restartBtn.style.display = 'none';
+        document.getElementById('winMessage').style.display = 'none';
+        initRound();
+    });
+    // 보스 버튼 이벤트 리스너 추가
+    bossButton.addEventListener('click', () => {
+        startBossStage();
+    });
+    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);
+    }
+  class Effect {
     constructor(x, y, duration, type, angle = 0, parent = null) {
         this.x = x;
         this.y = y;
         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';
     }
         return Date.now() - this.startTime > this.duration;
     }
 }
+class SupportUnit {
     constructor(yPosition) {
         this.x = 0;
         this.y = yPosition;
         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.hasPlayedSound = false;
         }
         const now = Date.now();
         if (now - this.lastShot > 200 && !isCountingDown) {
             this.shoot();
     }
     shoot() {
         if (!this.hasPlayedSound) {
             const firstSound = new Audio('bf109mg.ogg');
             firstSound.volume = 1.0;
             this.hasPlayedSound = true;
         }
         if (!isCountingDown) {
             const shootSound = new Audio('bf109mgse.ogg');
+            shootSound.volume = 0.5;
             shootSound.play();
         }
         });
     }
 }
+class JU87 {
     constructor() {
         this.x = canvas.width;
         this.y = 50;
         this.hasPlayedMGSound = false;
         this.isReturning = false;
         this.circleAngle = 0;
+        this.returningToCenter = false;
     }
     selectTarget() {
             enemies[Math.floor(Math.random() * enemies.length)] : null;
     }
+    shoot() {
+        if (!this.hasPlayedMGSound && !isCountingDown) {
+            const mgSound = new Audio('ju87mg.ogg');
+            mgSound.volume = 1.0;
+            mgSound.currentTime = 0;
+            mgSound.play().catch(error => console.error('Audio play failed:', error));
+            this.hasPlayedMGSound = true;
+        }
+        [[20, 50], [80, 50]].forEach(([x, y]) => {
+            const offsetX = x - 50;
+            const offsetY = y - 50;
+            const rotatedX = this.x + (Math.cos(this.angle) * offsetX - Math.sin(this.angle) * offsetY);
+            const rotatedY = this.y + (Math.sin(this.angle) * offsetX + Math.cos(this.angle) * offsetY);
+            bullets.push({
+                x: rotatedX,
+                y: rotatedY,
+                angle: this.angle,
+                speed: 10,
+                isEnemy: false,
+                damage: weapons.machinegun.damage * 2,
+                size: weapons.machinegun.bulletSize
+            });
         });
+    }
     update() {
         if (!this.hasPlayedSound) {
             const sirenSound = new Audio('ju87siren.ogg');
         return true;
     }
 }
+  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
+        });
+    }
+}
+nextRoundBtn.addEventListener('click', () => {
+    currentRound++;
+    nextRoundBtn.style.display = 'none';
+    document.getElementById('shop').style.display = 'none';
+    initRound();
+});
+restartBtn.addEventListener('click', () => {
+    currentRound = 1;
+    gameOver = false;
+    player.health = player.maxHealth;
+    gold = 0;
+    hasAPCR = false;
+    hasBF109 = false;
+    hasJU87 = false;
+    document.getElementById('apcr').style.display = 'block';
+    document.getElementById('bf109').style.display = 'block';
+    document.getElementById('ju87').style.display = 'block';
+    document.getElementById('tank1').style.display = 'block';
+    document.getElementById('tank2').style.display = 'block';
+    document.getElementById('winMessage').style.display = 'none';
+    restartBtn.style.display = 'none';
+    playerImg.src = 'player.png';
+    player.maxHealth = defaultPlayerStats.maxHealth;
+    player.speed = defaultPlayerStats.speed;
+    player.width = defaultPlayerStats.width;
+    player.height = defaultPlayerStats.height;
+    bgm.src = 'BGM2.ogg';
+    initRound();
+});
+bossButton.addEventListener('click', () => {
+    startBossStage();
+});
+function showShop() {
+    document.getElementById('shop').style.display = 'block';
+}
 const defaultPlayerStats = {
     maxHealth: 1000,
     speed: 5,
     width: 100,
     height: 45
 };
 function buyTank(tankImg, cost, tankId) {
     if (gold >= cost) {
         gold -= cost;
         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('shop').style.display = 'none';
     }
 }
+function buyBF109() {
     if (gold >= 1000 && !hasBF109) {
         gold -= 1000;
         hasBF109 = true;
         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 initRound() {
+enemies = [];
+for(let i = 0; i < 1 * currentRound; i++) {
+enemies.push(new Enemy());
+}
+player.health = player.maxHealth;
+bullets = [];
+items = [];
+supportUnits = [];
+lastSupportSpawn = 0;
+  startCountdown();
+setTimeout(() => {
+    if (hasJU87) {
+        supportUnits.push(new JU87());
+        lastJU87Spawn = Date.now();
     }
+}, 3000);
+    }
+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';
+startCountdown();
 }
+function updateGame() {
+if(gameOver) return;
+if(!isCountingDown) {
+if(keys['w']) player.y -= player.speed;
+if(keys['s']) player.y += player.speed;
+if(keys['a']) player.x -= player.speed;
+if(keys['d']) player.x += player.speed;
+player.x = Math.max(player.width/2, Math.min(canvas.width - player.width/2, player.x));
+player.y = Math.max(player.height/2, Math.min(canvas.height - player.height/2, player.y));
+fireBullet();
+}
+if (hasBF109 && !isCountingDown) {
+    const now = Date.now();
+    if (now - lastSupportSpawn > 10000) {
+        supportUnits.push(
+            new SupportUnit(canvas.height * 0.2),
+            new SupportUnit(canvas.height * 0.5),
+            new SupportUnit(canvas.height * 0.8)
+        );
+        lastSupportSpawn = now;
     }
+}
+if (hasJU87 && !isCountingDown) {
+    const now = Date.now();
+    if (now - lastJU87Spawn > 15000) {
+        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;
+    });
+    if(enemies.length === 0) {
+        if (!isBossStage) {
+            if(currentRound < 10) {
+                nextRoundBtn.style.display = 'block';
+                showShop();
             } else {
+                bossButton.style.display = 'block';
             }
+        } else {
+            gameOver = true;
+            document.getElementById('winMessage').style.display = 'block';
+            restartBtn.style.display = 'block';
+            bgm.pause();
+            const victorySound = new Audio('victory.ogg');
+            victorySound.play();
         }
     }
 }
+}
+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 gameLoop() {
+if (!gameOver) {
+updateGame();
+drawGame();
+requestAnimationFrame(gameLoop);
+}
+}
+document.addEventListener('DOMContentLoaded', () => {
+const titleScreen = document.getElementById('titleScreen');
+const startButton = document.getElementById('startButton');
+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';
+console.log("DOM Loaded");
+bgm.play().catch(err => console.error("Error playing title music:", err));
+startButton.addEventListener('click', () => {
+    console.log("Start Button Clicked");
+    if (!titleScreen || !instructions || !weaponInfo || !gameCanvas) {
+        console.error("DOM elements not found");
+        return;
+    }
+    titleScreen.style.display = 'none';
+    instructions.style.display = 'block';
+    weaponInfo.style.display = 'block';
+    gameCanvas.style.display = 'block';
+    bgm.pause();
+    bgm.src = 'BGM2.ogg';
+    bgm.play().catch(err => console.error("Error playing game music:", err));
+    initRound();
+    gameLoop();
+});
+Promise.all([
+    new Promise(resolve => backgroundImg.onload = resolve),
+    new Promise(resolve => playerImg.onload = resolve),
+    new Promise(resolve => enemyImg.onload = resolve)
+]).then(() => {
+    console.log("Assets loaded successfully");
+}).catch(err => console.error("Error loading assets:", err));
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  });
+});
+  // 키보드 이벤트 리스너
+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);
+});
+// 총알 발사 함수
+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 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.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.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);
     }
 }
+</script>
 </body>
 </html>