Update index.html

index.html

@@ -112,7 +112,6 @@
         const bossButton = document.getElementById('bossButton');
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
-
         // Game state
         let currentRound = 1;
         let gameOver = false;
@@ -126,7 +125,6 @@
         let autoFire = false;
         let gold = 0;
         let isBossStage = false;
-
         // Load assets
         const backgroundImg = new Image();
         backgroundImg.src = 'city.png';
@@ -134,7 +132,6 @@
         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');
@@ -143,7 +140,6 @@
         const countSound = new Audio('count.ogg');
         bgm.loop = true;
         enemyFireSound.volume = 0.5;
-
         const weapons = {
             cannon: {
                 fireRate: 1000,
@@ -158,7 +154,6 @@
                 sound: machinegunSound
             }
         };
-
         // Player setup
         const player = {
             x: canvas.width/2,
@@ -170,7 +165,6 @@
             health: 1000,
             maxHealth: 1000
         };
-
         function startCountdown() {
             isCountingDown = true;
             countdownTime = 3;
@@ -189,111 +183,72 @@
                 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;
-        this.lastMachineGunShot = 0; // 기관총 발사 시점 추가
-        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 now = Date.now();
-
-        // 기관총 발사 조건
-        if (this.isBoss && now - this.lastMachineGunShot > 3000) { // 3초 간격
-            this.lastMachineGunShot = now;
-            this.fireMachineGun();
-        } else {
-            this.fireCannon();
-        }
-    }
-
-    fireMachineGun() {
-        const sound = machinegunSound;
-        sound.play();
-
-        for (let i = -2; i <= 2; i++) {
-            const spreadAngle = this.angle + i * 0.1;
-            bullets.push({
-                x: this.x + Math.cos(spreadAngle) * 30,
-                y: this.y + Math.sin(spreadAngle) * 30,
-                angle: spreadAngle,
-                speed: 8,
-                isEnemy: true,
-                size: 2,
-                damage: 50,
-            });
+        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';
+                }
+            }
+            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() {
+                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
+                });
+            }
         }
-    }
-
-    fireCannon() {
-        const sound = this.isBoss ? cannonSound : enemyFireSound.cloneNode();
-        sound.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 ? 300 : 150,
-        });
-    }
-}
         function showShop() {
             document.getElementById('shop').style.display = 'block';
         }
-
    // 플레이어의 기본 상태를 저장
 const defaultPlayerStats = {
     maxHealth: 1000,
-    speed: 5,
-    width: 100,
-    height: 45
+    speed: 5
 };
 function buyTank(tankImg, cost, tankId) {
     if (gold >= cost) {
@@ -301,24 +256,21 @@ function buyTank(tankImg, cost, tankId) {
         playerImg.src = tankImg;
         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 = 100;     // PZ.IV의 크기 설정
-            player.height = 55;     // 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.maxHealth = defaultPlayerStats.maxHealth;
+        player.speed = defaultPlayerStats.speed;
+        // 구매한 모든 전차의 효과를 한 번에 적용
+        if (document.getElementById('tank1').style.display === 'none') {  // PZ.IV 구매 여부
+            player.maxHealth += 500;
         }
-
+        if (document.getElementById('tank2').style.display === 'none') {  // TIGER 구매 여부
+            player.maxHealth += 1000;
+            player.speed *= 0.7;
+        }
+        // 현재 체력을 새로운 최대 체력으로 설정
         player.health = player.maxHealth;
     }
 }
-
         function initRound() {
             enemies = [];
             for(let i = 0; i < 1 * currentRound; i++) {
@@ -329,7 +281,6 @@ function buyTank(tankImg, cost, tankId) {
             items = [];
             startCountdown();
         }
-
         function startBossStage() {
             isBossStage = true;
             enemies = [];
@@ -340,24 +291,21 @@ function buyTank(tankImg, cost, tankId) {
             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)};
+                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];
@@ -376,7 +324,6 @@ function buyTank(tankImg, cost, tankId) {
                 lastShot = now;
             }
         }
-
         function updateGame() {
             if(gameOver) return;
             if(!isCountingDown) {
@@ -388,9 +335,7 @@ 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) {
                 bullets = bullets.filter(bullet => {
                     bullet.x += Math.cos(bullet.angle) * bullet.speed;
@@ -423,7 +368,6 @@ 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) {
@@ -453,30 +397,25 @@ function buyTank(tankImg, cost, tankId) {
        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();
@@ -487,7 +426,6 @@ function buyTank(tankImg, cost, tankId) {
                ctx.restore();
                drawHealthBar(enemy.x, enemy.y - 40, enemy.health, enemy.maxHealth, 60, 5, 'red');
            });
-
            // 총알 그리기
            bullets.forEach(bullet => {
                ctx.beginPath();
@@ -495,7 +433,6 @@ function buyTank(tankImg, cost, tankId) {
                ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
                ctx.fill();
            });
-
            // 아이템 그리기
            items.forEach(item => {
                ctx.beginPath();
@@ -503,13 +440,11 @@ 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);
-
+           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);
@@ -520,16 +455,13 @@ function gameLoop() {
     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;
@@ -552,7 +484,6 @@ restartBtn.addEventListener('click', () => {
            gameLoop();
            bgm.play(); // 게임 시작시 BGM 재생
        });
-
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;