Update index.html

index.html

@@ -75,6 +75,25 @@
     <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>
+        </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');
@@ -96,6 +115,8 @@
         let isCountingDown = true;
         let countdownTime = 3;
         let autoFire = false;
+        let gold = 0;
+        let isBossStage = false;
       
         // Load assets
         const backgroundImg = new Image();
@@ -157,21 +178,34 @@
     }, 1000);
 }
         class Enemy {
-            constructor() {
-                this.x = Math.random() * canvas.width;
-                this.y = Math.random() * canvas.height;
-                this.health = 1000;
-                this.maxHealth = 1000;
-                this.speed = 2;
-                this.lastShot = 0;
-                this.shootInterval = 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;
-            }
+    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();
@@ -194,18 +228,34 @@
                     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: 3
-                });
-            }
-        }
+             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();
+    }
+}
+      
         function initRound() {
             enemies = [];
             for(let i = 0; i < 1 * currentRound; i++) {
@@ -248,6 +298,17 @@
                 lastShot = now;
             }
         }
+
+      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) {
@@ -272,6 +333,7 @@
                                 enemy.health -= enemy.maxHealth * bullet.damage;
                                 if(enemy.health <= 0) {
                                     spawnHealthItem(enemy.x, enemy.y);
+                                    gold += 100;
                                     return false;
                                 }
                                 return true;
@@ -300,12 +362,20 @@
                     }
                     return true;
                 });
-                if(enemies.length === 0) {
-                    if(currentRound < 10) {
-                        nextRoundBtn.style.display = 'block';
+               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();
                     }
                 }
             }
@@ -357,6 +427,11 @@
             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() {
@@ -369,10 +444,18 @@
             nextRoundBtn.style.display = 'none';
             initRound();
         });
-        restartBtn.addEventListener('click', () => {
+      //추가된 부분
+               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([