Spaces:

ProPerNounpYK
/

TimeWalker

Running

App Files Files Community

ProPerNounpYK commited on Dec 23, 2024

Commit

4c4af5a

verified ·

1 Parent(s): f55aec5

Update index.html

Browse files

Files changed (1) hide show

index.html +350 -497

index.html CHANGED Viewed

@@ -1,305 +1,292 @@
 <!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,
@@ -313,236 +300,102 @@ function startGame() {
         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);
-    }

 <!DOCTYPE html>
+<html lang="ko">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Space Guardians Game</title>
+  <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');
+    const message = document.getElementById('message');
+    const healthFill = document.getElementById('healthFill');
+    const bulletCount = document.getElementById('bulletCount');
+    const enemyCount = document.getElementById('enemyCount');
+    const replayButton = document.getElementById('replayButton');
+    const gameCanvas = document.getElementById('gameCanvas');
+    const gameCtx = gameCanvas.getContext('2d');
+    let particles = [];
+    let currentPhraseIndex = 0;
+    let animationFrame;
+    let mouseX = 0;
+    let mouseY = 0;
+    let gameStarted = false;
+    let gameOver = false;
+    introCanvas.width = window.innerWidth;
+    introCanvas.height = window.innerHeight;
+    gameCanvas.width = window.innerWidth;
+    gameCanvas.height = window.innerHeight;
+    // Particle class to generate text effect during intro
+    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';
+          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);
     }
+    window.addEventListener('mousemove', (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+    });
+    window.addEventListener('click', () => {
+      if (!gameStarted) {
+        introCanvas.style.display = 'none';
+        gameCanvas.style.display = 'block';
+        startGame();
+      }
+    });
+    const phrases = [
+      { text: 'Space Guardians Game\nComing soon!', size: 80, duration: 2000 },
+      { text: 'The fate of New York is in your hands.', size: 60, duration: 2000 },
+      { text: 'Defeat the Renovators and save the city in 2030!', size: 60, duration: 3000 }
+    ];
+    let particles = createParticles(phrases[0]);
+    animate(); // 시작 시 인트로 애니메이션
+    // 게임 시작 함수
+    function startGame() {
+      const player = {
+        x: gameCanvas.width / 2,
+        y: gameCanvas.height - 250,
         width: 250,
         height: 250,
         speed: 10,
         imageShootRight: 'gunshotright.png',
         imageHitLeft: 'ExplosionLeft.png',
         imageHitRight: 'ExplosionRight.png'
+      };
+      player.image.src = player.imageRight;
+      let enemies = [];
+      let bullets = [];
+      let enemyBullets = [];
+      let enemiesRemaining = 30;
+      let gameOver = false;
+      function spawnEnemy() {
+        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) {
+          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 updateBullets() {
         bullets.forEach((bullet, index) => {
+          bullet.x += bullet.speed;
+          gameCtx.fillStyle = 'yellow';
+          gameCtx.fillRect(bullet.x, bullet.y, 10, 5);
         });
+      }
+      // 적 업데이트
+      function updateEnemies() {
         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);
+          }
+          enemyShoot(enemy);
         });
+      }
+      // 게임 업데이트 루프
+      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);
+        updateBullets();
+        updateEnemies();
         enemyBullets.forEach((bullet, index) => {
+          bullet.x += bullet.speed;
+          gameCtx.fillStyle = 'orange';
+          gameCtx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
         });
         if (!gameOver) {
+          requestAnimationFrame(updateGame);
         }
+      }
+      // 적 생성 주기
+      setInterval(spawnEnemy, 2000);
+      bgMusic.play();
+      updateGame();
     }
+  </script>
+</body>
+</html>