Spaces:

ProPerNounpYK
/

TimeWalker

Running

App Files Files Community

ProPerNounpYK commited on Dec 23, 2024

Commit

d96d2fc

verified ·

1 Parent(s): 4c4af5a

Update index.html

Browse files

Files changed (1) hide show

index.html +180 -390

index.html CHANGED Viewed

@@ -1,401 +1,191 @@
 <!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,
-        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;
-      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>

 <!DOCTYPE html>
+<html>
 <head>
+<style>
+  body {
+    margin: 0;
+    overflow: hidden;
+    background: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+  canvas {
+    cursor: pointer;
+  }
+</style>
 </head>
 <body>
+<canvas id="canvas"></canvas>
+<script>
+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();
+setTimeout(transition, phrases[0].duration);
+function playAudioForDuration(url, duration) {
+  const audio = new Audio(url);
+  audio.play();
+  setTimeout(() => {
+    audio.pause();
+    audio.currentTime = 0; // Reset to start
+  }, duration);
+}
+// Play audio for 31 seconds
+playAudioForDuration('reflected-light-147979.mp3', 31000);
+</script>
 </body>
 </html>