Update index.html

index.html

@@ -917,131 +917,205 @@ document.addEventListener('keydown', e => {
         autoFire = !autoFire;
     }
 });
+nextRoundBtn.addEventListener('click', () => {
+currentRound++;
+nextRoundBtn.style.display = 'none';
+document.getElementById('shop').style.display = 'none';
+initRound();
+});
+bossButton.addEventListener('click', () => {
+startBossStage();
+});
+restartBtn.addEventListener('click', () => {
+location.reload();
+});
+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();
 
-document.addEventListener('keyup', e => keys[e.key] = false);
+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';
+bgm.play().catch(err => console.error("Error playing boss music:", err));
+startCountdown();
+}
+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");
+    titleScreen.style.display = 'none';
+    instructions.style.display = 'block';
+    weaponInfo.style.display = 'block';
+    gameCanvas.style.display = 'block';
+
+    bgm.pause();
+    bgm = new Audio('BGM2.ogg');
+    bgm.loop = true;
+    bgm.play().catch(err => console.error("Error playing game music:", err));
 
-// 마우스 이벤트 리스너
-canvas.addEventListener('mousemove', (e) => {
-    player.angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
+    currentRound = 1;  // 라운드 초기화 추가
+    initRound();
+    gameLoop();
 });
 
-// 총알 발사 함수
-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
-        ));
+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));
 
-        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;
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  });
+});
+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;
     }
 }
 
-// 게임 렌더링 함수
-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');
-    });
+if (hasJU87 && !isCountingDown) {
+    const now = Date.now();
+    if (now - lastJU87Spawn > 15000) {
+        supportUnits.push(new JU87());
+        lastJU87Spawn = now;
+    }
+}
 
-    // 지원 유닛 그리기
-    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();
-    });
+supportUnits = supportUnits.filter(unit => unit.update());
+enemies.forEach(enemy => enemy.update());
 
-    // 총알 그리기
-    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();
+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) {
+                    enemy.health -= bullet.damage * (hasAPCR ? 2 : 1);
+                    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 {
-            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();
+            const dist = Math.hypot(bullet.x - player.x, bullet.y - player.y);
+            if(dist < 30) {
+                player.health -= bullet.damage;
+                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.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 => {
-        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();
+    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 (isCountingDown) {
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    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();
+        }
     }
-}
+  }
+}  
 
 </script>
 </body>
-</html>
+</html>