Update index.html

index.html

@@ -471,55 +471,61 @@ function buyTank(tankImg, cost, tankId) {
            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.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);
 
-    // 이펙트 그리기 (여기에 추가)
+    // 이펙트 그리기
     effects = effects.filter(effect => !effect.isExpired());
     effects.forEach(effect => {
         ctx.save();
         ctx.translate(effect.x, effect.y);
         if(effect.type === 'fire') ctx.rotate(effect.angle);
-        ctx.drawImage(effect.img, -25, -25, 50, 50);  // 이펙트 크기 조정
+        ctx.drawImage(effect.img, -25, -25, 50, 50);
         ctx.restore();
     });
 
@@ -527,18 +533,24 @@ function buyTank(tankImg, cost, tankId) {
         ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
+}
+
+// drawGame 함수 밖으로 이동
 function gameLoop() {
     updateGame();
     drawGame();
     requestAnimationFrame(gameLoop);
 }
+
 nextRoundBtn.addEventListener('click', () => {
     currentRound++;
     nextRoundBtn.style.display = 'none';
-    document.getElementById('shop').style.display = 'none';  // 상점 창 닫기
+    document.getElementById('shop').style.display = 'none';
     initRound();
 });
+
 bossButton.addEventListener('click', startBossStage);
+
 restartBtn.addEventListener('click', () => {
     currentRound = 1;
     gameOver = false;
@@ -552,19 +564,21 @@ restartBtn.addEventListener('click', () => {
     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;
-       });
+
+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();
+});
+
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+});
    </script>
 </body>
 </html>