Update index.html

index.html

@@ -67,7 +67,7 @@
         WASD - Move tank<br>
         Mouse - Aim<br>
         Space - Fire<br>
-        C - Switch Weapon
+        C - Switch Weapon<br>
         R - Toggle Auto-fire
     </div>
     <div id="weaponInfo">Current Weapon: Cannon</div>
@@ -75,25 +75,26 @@
     <button id="nextRound" class="button">Next Round</button>
     <button id="restart" class="button">Restart Game</button>
     <canvas id="gameCanvas"></canvas>
+    
     <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="100" height="45">
-            <p>300 Gold</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="100" height="45">
-            <p>500 Gold</p>
-            <button onclick="buyTank('player3.png', 500, 'tank2')">Buy</button>
+        <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="100" height="45">
+                <p>300 Gold</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="100" height="45">
+                <p>500 Gold</p>
+                <button onclick="buyTank('player3.png', 500, 'tank2')">Buy</button>
+            </div>
         </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>
+    <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');
@@ -102,8 +103,10 @@
         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;
@@ -117,23 +120,24 @@
         let autoFire = false;
         let gold = 0;
         let isBossStage = 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';
+
         // Audio setup
         const cannonSound = new Audio('firemn.ogg');
         const machinegunSound = new Audio('firemg.ogg');
         const enemyFireSound = new Audio('fireenemy.ogg');
         const bgm = new Audio('BGM.ogg');
-  const countSound = new Audio('count.ogg');
-  bgm.loop = true;
+        const countSound = new Audio('count.ogg');
+        bgm.loop = true;
         enemyFireSound.volume = 0.5;
+
         const weapons = {
             cannon: {
                 fireRate: 1000,
@@ -148,6 +152,7 @@
                 sound: machinegunSound
             }
         };
+
         // Player setup
         const player = {
             x: canvas.width/2,
@@ -159,103 +164,103 @@
             health: 1000,
             maxHealth: 1000
         };
-       function startCountdown() {
-    isCountingDown = true;
-    countdownTime = 3;
-    countdownEl.style.display = 'block';
-    countdownEl.textContent = countdownTime;
-    bgm.pause(); // BGM 일시정지
-    countSound.play(); // 카운트다운 사운드 재생
-    const countInterval = setInterval(() => {
-        countdownTime--;
-        if(countdownTime <= 0) {
-            clearInterval(countInterval);
-            countdownEl.style.display = 'none';
-            isCountingDown = false;
-            bgm.play(); // BGM 다시 재생
+
+        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);
         }
-        countdownEl.textContent = countdownTime > 0 ? countdownTime : 'GO!';
-    }, 1000);
-}
+
         class Enemy {
-    constructor(isBoss = false) {
-        this.x = Math.random() * canvas.width;
-        this.y = Math.random() * canvas.height;
-        this.health = isBoss ? 5000 : 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';
-        }
-    }
+            constructor(isBoss = false) {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.health = isBoss ? 5000 : 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();
                 
-                // Movement
                 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;
-                // Bounds check
                 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));
-                // Aim at player
                 this.angle = Math.atan2(player.y - this.y, player.x - this.x);
-                // Shooting
+                
                 if (now - this.lastShot > this.shootInterval && !isCountingDown) {
                     this.shoot();
                     this.lastShot = now;
                 }
             }
-             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: true,
-            size: this.isBoss ? 5 : 3,
-            damage: this.isBoss ? 200 : 100
-        });
-    }
-}
-      
+
+            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: true,
+                    size: this.isBoss ? 5 : 3,
+                    damage: this.isBoss ? 200 : 100
+                });
+            }
+        }
+
         function showShop() {
-    document.getElementById('shop').style.display = 'block';
-}
-
-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';
-        initRound();
-    }
-}
-      
+            document.getElementById('shop').style.display = 'block';
+        }
+
+        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';
+                initRound();
+            }
+        }
+
         function initRound() {
             enemies = [];
             for(let i = 0; i < 1 * currentRound; i++) {
@@ -266,20 +271,35 @@ function buyTank(tankImg, cost, tankId) {
             items = [];
             startCountdown();
         }
+
+        function startBossStage() {
+            isBossStage = true;
+            enemies = [];
+            enemies.push(new Enemy(true));
+            player.health = player.maxHealth;
+            bullets = [];
+            items = [];
+            document.getElementById('bossButton').style.display = 'none';
+            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('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];
@@ -299,16 +319,6 @@ function buyTank(tankImg, cost, tankId) {
             }
         }
 
-      function startBossStage() {
-    isBossStage = true;
-    enemies = [];
-    enemies.push(new Enemy(true));
-    player.health = player.maxHealth;
-    bullets = [];
-    items = [];
-    document.getElementById('bossButton').style.display = 'none';
-    startCountdown();
-}
         function updateGame() {
             if(gameOver) return;
             if(!isCountingDown) {
@@ -320,9 +330,10 @@ function buyTank(tankImg, cost, tankId) {
                 player.y = Math.max(player.height/2, Math.min(canvas.height - player.height/2, player.y));
                 fireBullet();
             }
+
             enemies.forEach(enemy => enemy.update());
+
             if(!isCountingDown) {
-                // Update bullets and collisions
                 bullets = bullets.filter(bullet => {
                     bullet.x += Math.cos(bullet.angle) * bullet.speed;
                     bullet.y += Math.sin(bullet.angle) * bullet.speed;
@@ -343,7 +354,7 @@ function buyTank(tankImg, cost, tankId) {
                     } else {
                         const dist = Math.hypot(bullet.x - player.x, bullet.y - player.y);
                         if(dist < 30) {
-                            player.health -= 100;
+                            player.health -= bullet.damage || 100;
                             if(player.health <= 0) {
                                 gameOver = true;
                                 restartBtn.style.display = 'block';
@@ -354,6 +365,7 @@ function buyTank(tankImg, cost, tankId) {
                     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) {
@@ -362,8 +374,8 @@ function buyTank(tankImg, cost, tankId) {
                     }
                     return true;
                 });
-               if(enemies.length === 0) {
-                 //추가된 부분
+
+                if(enemies.length === 0) {
                     if (!isBossStage) {
                         if(currentRound < 10) {
                             nextRoundBtn.style.display = 'block';
@@ -374,103 +386,125 @@ function buyTank(tankImg, cost, tankId) {
                     } else {
                         gameOver = true;
                         document.getElementById('winMessage').style.display = 'block';
-                        restartBtn.style.display = 'block';
-                        bgm.pause();
-                    }
-                }
-            }
-        }
-        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);
-            // Draw all game objects
-            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);
-                ctx.drawImage(enemyImg, -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');
-            });
-            bullets.forEach(bullet => {
-                ctx.beginPath();
-                ctx.fillStyle = bullet.isEnemy ? 'red' : 'blue';
-                ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
-                ctx.fill();
-            });
-            items.forEach(item => {
-                ctx.beginPath();
-                ctx.fillStyle = 'green';
-                ctx.arc(item.x, item.y, 10, 0, Math.PI * 2);
-                ctx.fill();
-            });
-            ctx.fillStyle = 'white';
-            ctx.font = '24px Arial';
-            ctx.fillText(`Round ${currentRound}/10`, 10, 30);
-            if(isCountingDown) {
-                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-               ctx.fillStyle = 'white';
-              //추가된 부분
-            ctx.font = '24px Arial';
-            ctx.fillText(`Round ${currentRound}/10`, 10, 30);
-            ctx.fillText(`Gold: ${gold}`, 10, 60);
-            }
-        }
-        function gameLoop() {
-            updateGame();
-            drawGame();
-            requestAnimationFrame(gameLoop);
-        }
-        nextRoundBtn.addEventListener('click', () => {
-            currentRound++;
-            nextRoundBtn.style.display = 'none';
-            initRound();
-        });
-      //추가된 부분
-               restartBtn.addEventListener('click', () => {
-            currentRound = 1;
-            gameOver = false;
-            isBossStage = false;
-            gold = 0;
-            restartBtn.style.display = 'none';
-            document.getElementById('winMessage').style.display = 'none';
-            document.getElementById('tank1').style.display = 'block';
-            document.getElementById('tank2').style.display = 'block';
-            playerImg.src = 'player.png';
-            bgm.play();
-            initRound();
-        });
-                Promise.all([
-            new Promise(resolve => backgroundImg.onload = resolve),
-            new Promise(resolve => playerImg.onload = resolve),
-            new Promise(resolve => enemyImg.onload = resolve)
-        ]).then(() => {
-            initRound();
-            gameLoop();
-            bgm.play(); // 게임 시작시 BGM 재생
-        });
-        window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-        });
-    </script>
+                        rest
+                       gameOver = true;
+                       document.getElementById('winMessage').style.display = 'block';
+                       restartBtn.style.display = 'block';
+                       bgm.pause();
+                   }
+               }
+           }
+       }
+
+       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();
+               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');
+           });
+
+           // 총알 그리기
+           bullets.forEach(bullet => {
+               ctx.beginPath();
+               ctx.fillStyle = bullet.isEnemy ? 'red' : 'blue';
+               ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
+               ctx.fill();
+           });
+
+           // 아이템 그리기
+           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);
+
+           if(isCountingDown) {
+               ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+               ctx.fillRect(0, 0, canvas.width, canvas.height);
+           }
+       }
+
+       function gameLoop() {
+           updateGame();
+           drawGame();
+           requestAnimationFrame(gameLoop);
+       }
+
+       nextRoundBtn.addEventListener('click', () => {
+           currentRound++;
+           nextRoundBtn.style.display = 'none';
+           document.getElementById('shop').style.display = 'none';
+           initRound();
+       });
+
+       bossButton.addEventListener('click', startBossStage);
+
+       restartBtn.addEventListener('click', () => {
+           currentRound = 1;
+           gameOver = false;
+           isBossStage = false;
+           gold = 0;
+           restartBtn.style.display = 'none';
+           document.getElementById('winMessage').style.display = 'none';
+           document.getElementById('tank1').style.display = 'block';
+           document.getElementById('tank2').style.display = 'block';
+           playerImg.src = 'player.png';
+           bgm.play();
+           initRound();
+       });
+
+       Promise.all([
+           new Promise(resolve => backgroundImg.onload = resolve),
+           new Promise(resolve => playerImg.onload = resolve),
+           new Promise(resolve => enemyImg.onload = resolve)
+       ]).then(() => {
+           initRound();
+           gameLoop();
+           bgm.play(); // 게임 시작시 BGM 재생
+       });
+
+       window.addEventListener('resize', () => {
+           canvas.width = window.innerWidth;
+           canvas.height = window.innerHeight;
+       });
+   </script>
 </body>
 </html>