Update index.html

index.html

@@ -155,89 +155,102 @@
         }
 
         function updateGame() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-            player.direction = mouseX > player.x ? 1 : -1;
-            player.image.src = player.direction === 1 ? player.imageRight : player.imageLeft;
-            ctx.drawImage(player.image, player.x, player.y, player.width, player.height);
+    // 플레이어 방향 업데이트
+    player.direction = mouseX > player.x ? 1 : -1;
+    player.image.src = player.direction === 1 ? player.imageRight : player.imageLeft;
+    ctx.drawImage(player.image, player.x, player.y, player.width, player.height);
 
-            bullets.forEach((bullet, index) => {
-                bullet.x += bullet.speed;
-                ctx.fillStyle = 'yellow';
-                ctx.fillRect(bullet.x, bullet.y, 10, 5);
+    // 총알 업데이트 및 렌더링
+    bullets.forEach((bullet, index) => {
+        bullet.x += bullet.speed;
+        ctx.fillStyle = 'yellow';
+        ctx.fillRect(bullet.x, bullet.y, 10, 5);
+    });
 
-                if (bullet.x < 0 || bullet.x > canvas.width) {
-                    bullets.splice(index, 1);
-                }
-            });
-
-            enemies.forEach((enemy, enemyIndex) => {
-                enemy.x += enemy.speed;
-                ctx.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.height);
+    // 기존 총알 제거 로직 추가 (화면 밖 총알 제거)
+    bullets = bullets.filter(bullet => 
+        bullet.x >= 0 && bullet.x <= canvas.width
+    );
 
-                if (checkCollision(player, enemy)) {
-                    player.health--;
-                    healthFill.style.width = (player.health / 5 * 100) + '%';
-                    player.image.src = player.direction === 1 ? player.imageHitRight : player.imageHitLeft;
-                    enemies.splice(enemyIndex, 1);
-                    playerHitSound.play();
-
-                    if (player.health <= 0) {
-                        endGame("Game Over! Go back to the past and change the current result!");
-                    }
-                }
+    enemyBullets.forEach((bullet, index) => {
+        bullet.x += bullet.speed;
+        ctx.fillStyle = 'orange';
+        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+    });
 
-                bullets.forEach((bullet, bulletIndex) => {
-                    if (checkCollision(bullet, enemy)) {
-                        enemy.image.src = enemy.speed > 0 ? enemy.imageHitRight : enemy.imageHitLeft;
-                        setTimeout(() => {
-                            enemies.splice(enemyIndex, 1);
-                            bullets.splice(bulletIndex, 1);
-                            enemiesRemaining--;
-                            enemyCount.textContent = enemiesRemaining;
-                        }, 100);
-                        enemyHitSound.play();
+    // 기존 적 총알 제거 로직 추가
+    enemyBullets = enemyBullets.filter(bullet => 
+        bullet.x >= 0 && bullet.x <= canvas.width
+    );
 
-                        if (enemiesRemaining <= 0) {
-                            endGame("You have successfully protected New York. Return to the time machine.");
-                        }
-                    }
-                });
+    // 적 업데이트 및 렌더링
+    enemies.forEach((enemy, enemyIndex) => {
+        enemy.x += enemy.speed;
+        ctx.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.height);
 
-                enemyShoot(enemy);
-            });
+        // 적과 플레이어 충돌 처리
+        if (checkCollision(player, enemy)) {
+            player.health--;
+            healthFill.style.width = (player.health / 5 * 100) + '%';
+            player.image.src = player.direction === 1 ? player.imageHitRight : player.imageHitLeft;
+            enemies.splice(enemyIndex, 1);
+            playerHitSound.play();
 
-            enemyBullets.forEach((bullet, index) => {
-                bullet.x += bullet.speed;
-                ctx.fillStyle = 'orange';
-                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+            if (player.health <= 0) {
+                endGame("Game Over! Go back to the past and change the current result!");
+            }
+        }
 
-                if (
-                    bullet.x < player.x + player.width - 30 &&
-                    bullet.x + bullet.width > player.x + 30 &&
-                    bullet.y < player.y + player.height - 30 &&
-                    bullet.y + bullet.height > player.y + 30
-                ) {
-                    player.health--;
-                    healthFill.style.width = (player.health / 5 * 100) + '%';
-                    player.image.src = player.direction === 1 ? player.imageHitRight : player.imageHitLeft;
-                    enemyBullets.splice(index, 1);
-                    playerHitSound.play();
+        // 플레이어 총알과 적 충돌 처리
+        bullets.forEach((bullet, bulletIndex) => {
+            if (checkCollision(bullet, enemy)) {
+                enemy.image.src = enemy.speed > 0 ? enemy.imageHitRight : enemy.imageHitLeft;
+                setTimeout(() => {
+                    enemies.splice(enemyIndex, 1);
+                    bullets.splice(bulletIndex, 1);
+                    enemiesRemaining--;
+                    enemyCount.textContent = enemiesRemaining;
+                }, 100);
+                enemyHitSound.play();
 
-                    if (player.health <= 0) {
-                        endGame("Game Over! Go back to the past and change the current result!");
-                    }
+                if (enemiesRemaining <= 0) {
+                    endGame("You have successfully protected New York. Return to the time machine.");
                 }
+            }
+        });
 
-                if (bullet.x < 0 || bullet.x > canvas.width) {
-                    enemyBullets.splice(index, 1);
-                }
-            });
+        // 적 총알 발사
+        enemyShoot(enemy);
+    });
 
-            if (!gameOver) {
-                requestAnimationFrame(updateGame);
+    // 적 총알과 플레이어 충돌 처리
+    enemyBullets.forEach((bullet, index) => {
+        bullet.x += bullet.speed;
+        if (
+            bullet.x < player.x + player.width - 30 &&
+            bullet.x + bullet.width > player.x + 30 &&
+            bullet.y < player.y + player.height - 30 &&
+            bullet.y + bullet.height > player.y + 30
+        ) {
+            player.health--;
+            healthFill.style.width = (player.health / 5 * 100) + '%';
+            player.image.src = player.direction === 1 ? player.imageHitRight : player.imageHitLeft;
+            enemyBullets.splice(index, 1);
+            playerHitSound.play();
+
+            if (player.health <= 0) {
+                endGame("Game Over! Go back to the past and change the current result!");
             }
         }
+    });
+
+    if (!gameOver) {
+        requestAnimationFrame(updateGame);
+    }
+}
+
 
         setTimeout(() => {
             message.textContent = "Click on the character";