Spaces:

ProPerNounpYK
/

TimeWalker

Running

App Files Files Community

ProPerNounpYK commited on Dec 23, 2024

Commit

f55aec5

verified ·

1 Parent(s): 4b2b7da

Update index.html

Browse files

Files changed (1) hide show

index.html +524 -245

index.html CHANGED Viewed

@@ -1,269 +1,548 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive Animation & Game</title>
-    <style>
-        body {
-            margin: 0;
-            overflow: hidden;
-            background: #1a1a1a;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-        canvas {
-            cursor: pointer;
-        }
-        #gameCanvas {
-            background-image: url('stage 1.jpg');
-            background-size: cover;
-        }
-        #message {
-            position: fixed;
-            bottom: 550px;
-            left: 0;
-            width: 100%;
-            color: white;
-            text-align: center;
-            font-size: 30px;
-            font-family: Arial;
-        }
-        #stats {
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            color: white;
-            font-family: Arial;
-            font-size: 28px;
-        }
-        #villainCount {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            color: white;
-            font-family: Arial;
-            font-size: 28px;
-        }
-        #healthBar {
-            width: 300px;
-            height: 30px;
-            background: #333;
-            margin-top: 5px;
-        }
-        #healthFill {
-            width: 100%;
-            height: 100%;
-            background: red;
-            transition: width 0.3s;
-        }
-        #bulletCount, #enemyCount {
-            font-size: 28px;
-        }
-        #replayButton {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            padding: 15px 30px;
-            font-size: 20px;
-            font-family: Arial;
-            background-color: white;
-            color: black;
-            border: none;
-            border-radius: 5px;
-            display: none;
-            cursor: pointer;
-        }
-        #replayButton:hover {
-            background-color: lightgray;
-        }
-    </style>
 </head>
 <body>
-    <canvas id="canvas"></canvas>
-    <canvas id="gameCanvas"></canvas>
-    <div id="message"></div>
-    <div id="stats">
-        Health: <div id="healthBar"><div id="healthFill"></div></div>
-        Bullets: <span id="bulletCount">35</span>
-    </div>
-    <div id="villainCount">Villains: <span id="enemyCount">30</span></div>
-    <button id="replayButton">Replay</button>
-    <audio id="bgMusic" src="cinematic-time-lapse-115672.mp3" loop></audio>
-    <audio id="playerShootSound" src="Maincharactergunsound.mp3"></audio>
-    <audio id="enemyShootSound" src="Renovatorsgunshot.mp3"></audio>
-    <audio id="playerHitSound" src="Maincharactershot.mp3"></audio>
-    <audio id="enemyHitSound" src="Renovatorsgetshot.mp3"></audio>
-    <script>
-        // Part 1 - Animation and Particle Effects
-        const canvas = document.getElementById('canvas');
-        const ctx = canvas.getContext('2d');
-        let particles = [];
-        const phrases = [
-            { text: 'Hello everyone.', size: 65, duration: 5000 },
-            { text: 'You have been selected as the next\nTimewalker for our team of Space Guardians.', size: 50, duration: 7000 },
-            { text: 'Repair the collapsing timelines\nand return safely.', size: 55, duration: 6000 },
-            { text: 'Good luck.\n- From the Space Guardians Leader', sizes: [65, 45], spacing: 45, duration: 6000 },
-            { text: 'TimeWalker', size: 65, duration: 3000 },
-            { text: 'Chapter 1', size: 65, duration: null }
-        ];
-        let currentPhraseIndex = 0;
-        let animationFrame;
-        let mouseX = 0;
-        let mouseY = 0;
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-        class Particle {
-            constructor(x, y, targetX, targetY) {
-                this.x = Math.random() * canvas.width;
-                this.y = Math.random() * canvas.height;
-                this.targetX = targetX;
-                this.targetY = targetY;
-                this.dx = (Math.random() - 0.5) * 8;
-                this.dy = (Math.random() - 0.5) * 8;
-                this.radius = 2;
-                this.alpha = 1;
-                this.fadeSpeed = 0.02;
-            }
-            draw() {
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-                ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
-                ctx.fill();
-                ctx.closePath();
-            }
-            update() {
-                const distance = Math.hypot(mouseX - this.x, mouseY - this.y);
-                if(distance < 100) {
-                    this.x += this.dx;
-                    this.y += this.dy;
-                } else {
-                    this.x += (this.targetX - this.x) * 0.1;
-                    this.y += (this.targetY - this.y) * 0.1;
-                }
-            }
-        }
-        function createParticles(phrase) {
-            let newParticles = [];
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            const lines = phrase.text.split('\n');
-            lines.forEach((line, index) => {
-                const size = phrase.sizes ? phrase.sizes[index] : phrase.size;
-                ctx.font = `${size}px Arial`;
-                ctx.fillStyle = 'white';
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-                const spacing = phrase.spacing || size * 1.2;
-                const y = (canvas.height / 2 - 20) + (index - (lines.length - 1) / 2) * spacing;
-                ctx.fillText(line, canvas.width / 2, y);
-            });
-            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-            for(let y = 0; y < canvas.height; y += 4) {
-                for(let x = 0; x < canvas.width; x += 4) {
-                    const index = (y * canvas.width + x) * 4;
-                    const alpha = imageData[index + 3];
-                    if(alpha > 128) {
-                        newParticles.push(new Particle(x, y, x, y));
-                    }
-                }
-            }
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            return newParticles;
-        }
-        function transition() {
-            if(currentPhraseIndex < phrases.length - 1) {
-                currentPhraseIndex++;
-                const currentPhrase = phrases[currentPhraseIndex];
-                particles.forEach(particle => {
-                    particle.dx = (Math.random() - 0.5) * 20;
-                    particle.dy = (Math.random() - 0.5) * 20;
-                    const fadeOut = setInterval(() => {
-                        particle.alpha -= particle.fadeSpeed;
-                        if(particle.alpha <= 0) clearInterval(fadeOut);
-                    }, 50);
-                });
                 setTimeout(() => {
-                    particles = createParticles(currentPhrase);
-                    particles.forEach(particle => {
-                        particle.alpha = 0;
-                        const fadeIn = setInterval(() => {
-                            particle.alpha += particle.fadeSpeed;
-                            if(particle.alpha >= 1) clearInterval(fadeIn);
-                        }, 50);
-                    });
-                }, 800);
-                if(currentPhrase.duration) {
-                    setTimeout(transition, currentPhrase.duration);
-                }
-            }
         }
-        function animate() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            particles.forEach(particle => {
-                particle.update();
-                particle.draw();
             });
-            animationFrame = requestAnimationFrame(animate);
         }
-        canvas.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
         });
-        window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-            particles = createParticles(phrases[currentPhraseIndex]);
         });
-        particles = createParticles(phrases[0]);
-        particles.forEach(particle => {
-            particle.alpha = 0;
-            const fadeIn = setInterval(() => {
-                particle.alpha += particle.fadeSpeed;
-                if(particle.alpha >= 1) clearInterval(fadeIn);
-            }, 50);
         });
-        animate();
-        transition();
-        // Part 2 - Game Logic
-        function gameStart() {
-            setTimeout(() => {
-                document.getElementById('gameCanvas').style.display = 'block';
-                document.getElementById('stats').style.display = 'block';
-                document.getElementById('message').style.display = 'none';
-                document.getElementById('bgMusic').play();
-                // Additional game logic can start here
-            }, 1000); // Wait for 1 second before starting the game
         }
-        // Once animation part completes or after transition, start the game logic
-        gameStart();
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
+<html>
 <head>
+<style>
+  body {
+    margin: 0;
+    overflow: hidden;
+    background: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+  #introCanvas {
+    cursor: pointer;
+  }
+  #gameCanvas {
+    display: none;
+    background-image: url('stage 1.jpg');
+    background-size: cover;
+  }
+  #message {
+    position: fixed;
+    bottom: 550px;
+    left: 0;
+    width: 100%;
+    color: white;
+    text-align: center;
+    font-size: 30px;
+    font-family: Arial;
+    display: none;
+  }
+  #stats {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    color: white;
+    font-family: Arial;
+    font-size: 28px;
+    display: none;
+  }
+  #villainCount {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    color: white;
+    font-family: Arial;
+    font-size: 28px;
+    display: none;
+  }
+  #healthBar {
+    width: 300px;
+    height: 30px;
+    background: #333;
+    margin-top: 5px;
+  }
+  #healthFill {
+    width: 100%;
+    height: 100%;
+    background: red;
+    transition: width 0.3s;
+  }
+  #bulletCount, #enemyCount {
+    font-size: 28px;
+  }
+  #replayButton {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 15px 30px;
+    font-size: 20px;
+    font-family: Arial;
+    background-color: white;
+    color: black;
+    border: none;
+    border-radius: 5px;
+    display: none;
+    cursor: pointer;
+  }
+  #replayButton:hover {
+    background-color: lightgray;
+  }
+</style>
 </head>
 <body>
+<canvas id="introCanvas"></canvas>
+<canvas id="gameCanvas"></canvas>
+<div id="message"></div>
+<div id="stats">
+    Health:<div id="healthBar"><div id="healthFill"></div></div>
+    Bullets: <span id="bulletCount">35</span>
+</div>
+<div id="villainCount">Villains: <span id="enemyCount">30</span></div>
+<button id="replayButton">Replay</button>
+<audio id="bgMusic" src="cinematic-time-lapse-115672.mp3" loop></audio>
+<audio id="playerShootSound" src="Maincharactergunsound.mp3"></audio>
+<audio id="enemyShootSound" src="Renovatorsgunshot.mp3"></audio>
+<audio id="playerHitSound" src="Maincharactershot.mp3"></audio>
+<audio id="enemyHitSound" src="Renovatorsgetshot.mp3"></audio>
+<script>
+const introCanvas = document.getElementById('introCanvas');
+const ctx = introCanvas.getContext('2d');
+let particles = [];
+const phrases = [
+  { text: 'Hello everyone.', size: 65, duration: 5000 },
+  { text: 'You have been selected as the next\nTimewalker for our team of Space Guardians.', size: 50, duration: 7000 },
+  { text: 'Repair the collapsing timelines\nand return safely.', size: 55, duration: 6000 },
+  { text: 'Good luck.\n- From the Space Guardians Leader', sizes: [65, 45], spacing: 45, duration: 6000 },
+  { text: 'TimeWalker', size: 65, duration: 3000 },
+  { text: 'Chapter 1', size: 65, duration: null }
+];
+let currentPhraseIndex = 0;
+let animationFrame;
+let mouseX = 0;
+let mouseY = 0;
+introCanvas.width = window.innerWidth;
+introCanvas.height = window.innerHeight;
+class Particle {
+  constructor(x, y, targetX, targetY) {
+    this.x = Math.random() * introCanvas.width;
+    this.y = Math.random() * introCanvas.height;
+    this.targetX = targetX;
+    this.targetY = targetY;
+    this.dx = (Math.random() - 0.5) * 8;
+    this.dy = (Math.random() - 0.5) * 8;
+    this.radius = 2;
+    this.alpha = 1;
+    this.fadeSpeed = 0.02;
+  }
+  draw() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+    ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
+    ctx.fill();
+    ctx.closePath();
+  }
+  update() {
+    const distance = Math.hypot(mouseX - this.x, mouseY - this.y);
+    if(distance < 100) {
+      this.x += this.dx;
+      this.y += this.dy;
+    } else {
+      this.x += (this.targetX - this.x) * 0.1;
+      this.y += (this.targetY - this.y) * 0.1;
+    }
+  }
+}
+function createParticles(phrase) {
+  let newParticles = [];
+  ctx.clearRect(0, 0, introCanvas.width, introCanvas.height);
+  const lines = phrase.text.split('\n');
+  lines.forEach((line, index) => {
+    const size = phrase.sizes ? phrase.sizes[index] : phrase.size;
+    ctx.font = `${size}px Arial`;
+    ctx.fillStyle = 'white';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    const spacing = phrase.spacing || size * 1.2;
+    const y = (introCanvas.height/2 - 20) + (index - (lines.length-1)/2) * spacing;
+    ctx.fillText(line, introCanvas.width/2, y);
+  });
+  const imageData = ctx.getImageData(0, 0, introCanvas.width, introCanvas.height).data;
+  for(let y = 0; y < introCanvas.height; y += 4) {
+    for(let x = 0; x < introCanvas.width; x += 4) {
+      const index = (y * introCanvas.width + x) * 4;
+      const alpha = imageData[index + 3];
+      if(alpha > 128) {
+        newParticles.push(new Particle(x, y, x, y));
+      }
+    }
+  }
+  ctx.clearRect(0, 0, introCanvas.width, introCanvas.height);
+  return newParticles;
+}
+  function transition() {
+  if(currentPhraseIndex < phrases.length - 1) {
+    currentPhraseIndex++;
+    const currentPhrase = phrases[currentPhraseIndex];
+    particles.forEach(particle => {
+      particle.dx = (Math.random() - 0.5) * 20;
+      particle.dy = (Math.random() - 0.5) * 20;
+      const fadeOut = setInterval(() => {
+        particle.alpha -= particle.fadeSpeed;
+        if(particle.alpha <= 0) clearInterval(fadeOut);
+      }, 50);
+    });
+    setTimeout(() => {
+      particles = createParticles(currentPhrase);
+      particles.forEach(particle => {
+        particle.alpha = 0;
+        const fadeIn = setInterval(() => {
+          particle.alpha += particle.fadeSpeed;
+          if(particle.alpha >= 1) clearInterval(fadeIn);
+        }, 50);
+      });
+    }, 800);
+    if(currentPhrase.duration) {
+      setTimeout(transition, currentPhrase.duration);
+    }
+  } else {
+    // 마지막 문구가 표시된 후 1초 후에 게임 시작
+    setTimeout(() => {
+      cancelAnimationFrame(animationFrame); // 인트로 애니메이션 중지
+      introCanvas.style.display = 'none';
+      document.getElementById('gameCanvas').style.display = 'block';
+      document.getElementById('stats').style.display = 'block';
+      document.getElementById('villainCount').style.display = 'block';
+      document.getElementById('message').style.display = 'block';
+      startGame(); // 게임 시작
+    }, 1000);
+  }
+}
+function animate() {
+  ctx.clearRect(0, 0, introCanvas.width, introCanvas.height);
+  particles.forEach(particle => {
+    particle.update();
+    particle.draw();
+  });
+  animationFrame = requestAnimationFrame(animate);
+}
+introCanvas.addEventListener('mousemove', (e) => {
+  mouseX = e.clientX;
+  mouseY = e.clientY;
+});
+window.addEventListener('resize', () => {
+  introCanvas.width = window.innerWidth;
+  introCanvas.height = window.innerHeight;
+  particles = createParticles(phrases[currentPhraseIndex]);
+});
+// 인트로 애니메이션 시작
+particles = createParticles(phrases[0]);
+particles.forEach(particle => {
+  particle.alpha = 0;
+  const fadeIn = setInterval(() => {
+    particle.alpha += particle.fadeSpeed;
+    if(particle.alpha >= 1) clearInterval(fadeIn);
+  }, 50);
+});
+animate();
+setTimeout(transition, phrases[0].duration);
+playAudioForDuration('reflected-light-147979.mp3', 31000);
+function startGame() {
+  // 여기서부터 게임 코드 시작
+  const gameCanvas = document.getElementById('gameCanvas');
+  const gameCtx = gameCanvas.getContext('2d');
+  // ... [이전에 보여드린 게임 코드 전체]
+}
+  function startGame() {
+    const gameCanvas = document.getElementById('gameCanvas');
+    const gameCtx = gameCanvas.getContext('2d');
+    // 게임 상태 변수
+    let enemies = [];
+    let bullets = [];
+    let enemyBullets = [];
+    let enemiesRemaining = 30;
+    let mouseX = 0;
+    let gameStarted = false;
+    let gameOver = false;
+    // 플레이어 객체 초���화
+    const player = {
+        x: gameCanvas.width / 2.3,
+        y: gameCanvas.height - 260,
+        width: 250,
+        height: 250,
+        speed: 10,
+        health: 10,
+        bullets: 35,
+        direction: 1,
+        image: new Image(),
+        imageLeft: 'Maincharacterdefaultleft.png',
+        imageRight: 'Maincharacterdefaultright.png',
+        imageShootLeft: 'gunshotleft.png',
+        imageShootRight: 'gunshotright.png',
+        imageHitLeft: 'ExplosionLeft.png',
+        imageHitRight: 'ExplosionRight.png'
+    };
+    player.image.src = player.imageRight;
+    // 게임 시작 메시지 시퀀스
+    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);
+        // 적 생성 함수
+    function spawnEnemy() {
+        if (!gameStarted || gameOver) {
+            return;
         }
+        if (enemies.length >= 10) {
+            return;
+        }
+        const side = Math.random() < 0.5 ? 0 : gameCanvas.width;
+        const enemy = {
+            x: side,
+            y: Math.random() * (gameCanvas.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 enemyShoot(enemy) {
+        const now = Date.now();
+        if (now - enemy.lastShootTime >= 3000 && !gameOver) {
+            enemy.image.src = enemy.speed > 0 ? enemy.imageShootRight : enemy.imageShootLeft;
+            enemyBullets.push({
+                x: enemy.x + enemy.width / 2,
+                y: enemy.y + enemy.height / 2.5,
+                width: 10,
+                height: 5,
+                speed: enemy.speed > 0 ? 5 : -5
             });
+            enemy.lastShootTime = now;
+            enemyShootSound.play();
         }
+    }
+    // 충돌 감지 함수
+    function checkCollision(rect1, rect2) {
+        return (
+            rect1.x + rect1.width * 0.2 < rect2.x + rect2.width * 0.8 &&
+            rect1.x + rect1.width * 0.8 > rect2.x + rect2.width * 0.2 &&
+            rect1.y + rect1.height * 0.2 < rect2.y + rect2.height * 0.8 &&
+            rect1.y + rect1.height * 0.8 > rect2.y + rect2.height * 0.2
+        );
+    }
+        // 메인 게임 업데이트 루프
+    function updateGame() {
+        gameCtx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
+        // 플레이어 업데이트
+        player.direction = mouseX > player.x ? 1 : -1;
+        player.image.src = player.direction === 1 ? player.imageRight : player.imageLeft;
+        gameCtx.drawImage(player.image, player.x, player.y, player.width, player.height);
+        // 총알 업데이트
+        bullets.forEach((bullet, index) => {
+            bullet.x += bullet.speed;
+            gameCtx.fillStyle = 'yellow';
+            gameCtx.fillRect(bullet.x, bullet.y, 10, 5);
         });
+        // 적 업데이트
+        enemies.forEach((enemy, enemyIndex) => {
+            enemy.x += enemy.speed;
+            gameCtx.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.height);
+            // 충돌 체크 및 처리
+            if (checkCollision(player, enemy)) {
+                handlePlayerEnemyCollision(enemy, enemyIndex);
+            }
+            // 총알 충돌 체크
+            bullets.forEach((bullet, bulletIndex) => {
+                if (checkCollision(bullet, enemy)) {
+                    handleBulletEnemyCollision(bullet, bulletIndex, enemy, enemyIndex);
+                }
+            });
+            enemyShoot(enemy);
         });
+        // 적 총알 업데이트
+        enemyBullets.forEach((bullet, index) => {
+            bullet.x += bullet.speed;
+            gameCtx.fillStyle = 'orange';
+            gameCtx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+            if (checkBulletPlayerCollision(bullet)) {
+                handleBulletPlayerCollision(bullet, index);
+            }
         });
+        // 화면 밖 총알 제거
+        cleanupBullets();
+        // 게임 상태 체크
+        if (!gameOver) {
+            requestAnimationFrame(updateGame);
+        }
+    }
+    // 이벤트 리스너
+    window.addEventListener('keydown', handleKeyPress);
+    window.addEventListener('mousemove', (e) => {
+        mouseX = e.clientX;
+    });
+    replayButton.addEventListener('click', () => {
+        location.reload();
+    });
+    // 게임 시작
+    setInterval(spawnEnemy, 2000);
+    bgMusic.play();
+    updateGame();
+}
+      // 충돌 처리 헬퍼 함수들
+    function handlePlayerEnemyCollision(enemy, enemyIndex) {
+        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!");
+        }
+    }
+    function handleBulletEnemyCollision(bullet, bulletIndex, enemy, enemyIndex) {
+        enemy.image.src = enemy.speed > 0 ? enemy.imageHitRight : enemy.imageHitLeft;
+        setTimeout(() => {
+            enemies.splice(enemyIndex, 1);
+            bullets.splice(bulletIndex, 1);
+            enemiesRemaining--;
+            enemyCount.textContent = enemiesRemaining;
+            if (enemiesRemaining <= 0) {
+                endGame("You have successfully protected New York. Return to the time machine.");
+            }
+        }, 100);
+        enemyHitSound.play();
+    }
+    function handleKeyPress(e) {
+        if (!gameOver) {
+            switch (e.key) {
+                case 'ArrowUp':
+                    if (player.y > 0) player.y -= player.speed;
+                    break;
+                case 'ArrowDown':
+                    if (player.y < gameCanvas.height - player.height) player.y += player.speed;
+                    break;
+                case 'ArrowLeft':
+                    if (player.x > 0) player.x -= player.speed;
+                    break;
+                case 'ArrowRight':
+                    if (player.x < gameCanvas.width - player.width) player.x += player.speed;
+                    break;
+                case ' ':
+                    handlePlayerShoot();
+                    break;
+            }
+        }
+    }
+    function handlePlayerShoot() {
+        if (player.bullets > 0) {
+            player.image.src = player.direction === 1 ? player.imageShootRight : player.imageShootLeft;
+            bullets.push({
+                x: player.x + player.width / 2,
+                y: player.y + player.height / 2.5,
+                width: 10,
+                height: 5,
+                speed: player.direction * 10
+            });
+            player.bullets--;
+            bulletCount.textContent = player.bullets;
+            playerShootSound.play();
         }
+    }
+    function endGame(messageText) {
+        gameOver = true;
+        message.textContent = messageText;
+        replayButton.style.display = 'block';
+    }
+    // 인트로 애니메이션이 완료된 후 게임 시작
+    function startGameAfterIntro() {
+        document.getElementById('introCanvas').style.display = 'none';
+        document.getElementById('gameCanvas').style.display = 'block';
+        document.getElementById('message').style.display = 'block';
+        document.getElementById('stats').style.display = 'block';
+        document.getElementById('villainCount').style.display = 'block';
+        bgMusic.play();
+        updateGame();
+        setInterval(spawnEnemy, 2000);
+    }