Update index.html

index.html

@@ -132,145 +132,127 @@
         let gameOver = false;
 
         function spawnEnemy() {
-    if (!gameStarted || gameOver) {
-        return;
-    }
-
-    if (enemies.length >= 10) { // 동시에 존재할 수 있는 적의 수 제한
-        return;
-    }
+            if (!gameStarted || gameOver) {
+                return;
+            }
 
-    const side = Math.random() < 0.5 ? 0 : canvas.width;
-    const enemy = {
-        x: side,
-        y: Math.random() * (canvas.height - 150),
-        width: 250,
-        height: 250,
-        speed: side === 0 ? 1 : -1,
-        image: new Image(),
-        imageLeft: 'Renovators Default Right.png',
-        imageRight: 'RenovatorsDefaultLeft.png',
-        imageShootLeft: 'RenovatorsgunLeft.png',
-        imageShootRight: 'RenovatorsGunRight.png',
-        imageHitLeft: 'RenovatorsExplodeLeft.png',
-        imageHitRight: 'RenovatorsExplodeRight.png',
-        lastShootTime: Date.now()
-    };
-    enemy.image.src = side === 0 ? enemy.imageLeft : enemy.imageRight;
-    enemies.push(enemy);
-}
-        function updateGame() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (enemies.length >= 10) { // 동시에 존재할 수 있는 적의 수 제한
+                return;
+            }
 
-    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);
+            const side = Math.random() < 0.5 ? 0 : canvas.width;
+            const enemy = {
+                x: side,
+                y: Math.random() * (canvas.height - 150),
+                width: 250,
+                height: 250,
+                speed: side === 0 ? 1 : -1,
+                image: new Image(),
+                imageLeft: 'Renovators Default Right.png',
+                imageRight: 'RenovatorsDefaultLeft.png',
+                imageShootLeft: 'RenovatorsgunLeft.png',
+                imageShootRight: 'RenovatorsGunRight.png',
+                imageHitLeft: 'RenovatorsExplodeLeft.png',
+                imageHitRight: 'RenovatorsExplodeRight.png',
+                lastShootTime: Date.now()
+            };
+            enemy.image.src = side === 0 ? enemy.imageLeft : enemy.imageRight;
+            enemies.push(enemy);
+        }
 
-    // 플레이어가 발사한 총알 처리
-    bullets.forEach((bullet, index) => {
-        bullet.x += bullet.speed;
-        ctx.fillStyle = 'yellow';
-        ctx.fillRect(bullet.x, bullet.y, 10, 5);
-    });
+        function updateGame() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    // 적 처리
-    enemies.forEach((enemy, enemyIndex) => {
-        enemy.x += enemy.speed;
-        ctx.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.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);
 
-        // 플레이어와 적이 충돌했을 경우 처리
-        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();
+            // 플레이어가 발사한 총알 처리
+            bullets.forEach((bullet, index) => {
+                bullet.x += bullet.speed;
+                ctx.fillStyle = 'yellow';
+                ctx.fillRect(bullet.x, bullet.y, 10, 5);
+            });
 
-            if (player.health <= 0) {
-                endGame("Game Over! Go back to the past and change the current result!");
-            }
-        }
+            // 적 처리
+            enemies.forEach((enemy, enemyIndex) => {
+                enemy.x += enemy.speed;
+                ctx.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.height);
 
-        // 플레이어의 총알이 적을 맞췄을 경우 처리
-        bullets.forEach((bullet, bulletIndex) => {
-            if (checkCollision(bullet, enemy)) {
-                // 총알이 적을 맞췄을 때 처리
-                enemy.image.src = enemy.speed > 0 ? enemy.imageHitRight : enemy.imageHitLeft;
-                setTimeout(() => {
+                // 플레이어와 적이 충돌했을 경우 처리
+                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);  // 적 제거
-                    bullets.splice(bulletIndex, 1);  // 총알 제거
-                    enemiesRemaining--;
-                    enemyCount.textContent = enemiesRemaining;
-                }, 100);
-                enemyHitSound.play();
+                    playerHitSound.play();
 
-                if (enemiesRemaining <= 0) {
-                    endGame("You have successfully protected New York. Return to the time machine.");
+                    if (player.health <= 0) {
+                        endGame("Game Over! Go back to the past and change the current result!");
+                    }
                 }
-            }
-        });
 
-        // 적의 총알 발사
-        enemyShoot(enemy);
-    });
+                // 플레이어의 총알이 적을 맞췄을 경우 처리
+                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 (enemiesRemaining <= 0) {
+                            endGame("You have successfully protected New York. Return to the time machine.");
+                        }
+                    }
+                });
 
-    // 적의 총알 처리
-    enemyBullets.forEach((bullet, index) => {
-        bullet.x += bullet.speed;
-        ctx.fillStyle = 'orange';
-        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+                // 적의 총알 발사
+                enemyShoot(enemy);
+            });
 
-        // 총알이 플레이어와 충돌했을 경우 처리
-        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();
+            // 적의 총알 처리
+            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 = bullets.filter(bullet => 
-        bullet.x >= 0 && bullet.x <= canvas.width
-    );
-    enemyBullets = enemyBullets.filter(bullet => 
-        bullet.x >= 0 && bullet.x <= canvas.width
-    );
+                    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";
-            setTimeout(() => {
-                message.textContent = "You can move your character using the arrow keys.";
-                setTimeout(() => {
-                    message.textContent = "The character's direction follows the mouse cursor.";
-                    setTimeout(() => {
-                        message.textContent = "Press the space bar to shoot a bullet.";
-                        setTimeout(() => {
-                            message.textContent = "Your mission is to defeat the Renovators who have attacked New York. Defeat them all and save New York in 2030!";
-                            setTimeout(() => {
-                                message.textContent = "";
-                                gameStarted = true;
-                            }, 5000);
-                        }, 3000);
-                    }, 4000);
-                }, 4000);
-            }, 4000);
-        }, 0);
+            // 화면 밖으로 나간 총알 제거
+            bullets = bullets.filter(bullet => 
+                bullet.x >= 0 && bullet.x <= canvas.width
+            );
+            enemyBullets = enemyBullets.filter(bullet => 
+                bullet.x >= 0 && bullet.x <= canvas.width
+            );
+
+            // 게임이 종료되지 않으면 계속 업데이트
+            if (!gameOver) {
+                requestAnimationFrame(updateGame);
+            }
+        }
 
         function endGame(messageText) {
             gameOver = true;
@@ -278,11 +260,23 @@
             replayButton.style.display = 'block';
         }
 
+        // 총알과 캐릭터의 충돌 검사 (이미지 크기 기준)
         function checkCollision(rect1, rect2) {
-            return rect1.x < rect2.x + rect2.width &&
-                   rect1.x + rect1.width > rect2.x &&
-                   rect1.y < rect2.y + rect2.height &&
-                   rect1.y + rect1.height > rect2.y;
+            // 총알(rect1)과 캐릭터(rect2)의 실제 영역을 비교
+            const bulletLeft = rect1.x;
+            const bulletRight = rect1.x + rect1.width;
+            const bulletTop = rect1.y;
+            const bulletBottom = rect1.y + rect1.height;
+
+            // 캐릭터의 범위 (캐릭터 이미지 크기 기준)
+            const playerLeft = rect2.x + 30;  // 캐릭터 이미지 좌측
+            const playerRight = rect2.x + rect2.width - 30;  // 캐릭터 이미지 우측
+            const playerTop = rect2.y + 30;  // 캐릭터 이미지 상단
+            const playerBottom = rect2.y + rect2.height - 30;  // 캐릭터 이미지 하단
+
+            // 충돌 체크
+            return bulletRight > playerLeft && bulletLeft < playerRight &&
+                   bulletBottom > playerTop && bulletTop < playerBottom;
         }
 
         function enemyShoot(enemy) {