Update index.html

index.html

@@ -1,171 +1,177 @@
 <!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;
-        }
-
-        #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;
-        }
-
-        #stats {
-            display: none;
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            color: white;
-            font-family: Arial;
-            font-size: 28px;
-        }
-
-        #villainCount {
-            display: none;
-            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;
-        }
-
-        #replayButton {
-            display: none;
-            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;
-            cursor: pointer;
-        }
-
-        #replayButton:hover {
-            background-color: lightgray;
-        }
-    </style>
+<style>
+  body {
+    margin: 0;
+    overflow: hidden;
+    background: #1a1a1a;
+  }
+  
+  canvas {
+    cursor: pointer;
+  }
+
+  #gameCanvas {
+    background-image: url('stage 1.jpg');
+    background-size: cover;
+    display: none;
+  }
+
+  #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;
+    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="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>
-        const canvas = document.getElementById('canvas');
-        const ctx = canvas.getContext('2d');
-        const gameCanvas = document.getElementById('gameCanvas');
-        const gameCtx = gameCanvas.getContext('2d');
-        const message = document.getElementById('message');
-        const stats = document.getElementById('stats');
-        const villainCount = document.getElementById('villainCount');
-        const replayButton = document.getElementById('replayButton');
-
-        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;
-
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-        gameCanvas.width = window.innerWidth;
-        gameCanvas.height = window.innerHeight;
-
-        // Particle class and functions omitted for brevity. Refer to provided code.
-
-        function transition() {
-            if (currentPhraseIndex < phrases.length - 1) {
-                currentPhraseIndex++;
-                const currentPhrase = phrases[currentPhraseIndex];
-                particles = createParticles(currentPhrase);
-
-                if (currentPhrase.duration) {
-                    setTimeout(transition, currentPhrase.duration);
-                }
-            } else {
-                startGame();
-            }
-        }
-
-        function startGame() {
-            canvas.style.display = 'none';
-            gameCanvas.style.display = 'block';
-            stats.style.display = 'block';
-            villainCount.style.display = 'block';
-            message.textContent = "Click on the character";
-
-            // Start the second game's logic here.
-            initializeGame();
-        }
-
-        // Combine other game logic functions here, including player, enemy logic.
-
-        // Start animation for the introduction.
-        particles = createParticles(phrases[0]);
-        animate();
-        setTimeout(transition, phrases[0].duration);
-    </script>
+<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>
+// Intro Animation Code
+const introCanvas = document.getElementById('introCanvas');
+const gameCanvas = document.getElementById('gameCanvas');
+const introCtx = 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 introAnimationFrame;
+let mouseX = 0;
+let mouseY = 0;
+
+introCanvas.width = window.innerWidth;
+introCanvas.height = window.innerHeight;
+
+// ... [Your existing intro animation code - Particle class, createParticles, transition, animate functions etc]
+
+// Modify the transition function to start game after last phrase
+function transition() {
+  if(currentPhraseIndex < phrases.length - 1) {
+    currentPhraseIndex++;
+    const currentPhrase = phrases[currentPhraseIndex];
+    
+    // ... [Rest of your transition code]
+
+    if(currentPhrase.duration) {
+      setTimeout(transition, currentPhrase.duration);
+    }
+  } else {
+    // When intro ends, start the game
+    setTimeout(() => {
+      introCanvas.style.display = 'none';
+      gameCanvas.style.display = 'block';
+      document.getElementById('stats').style.display = 'block';
+      document.getElementById('villainCount').style.display = 'block';
+      startGame();
+    }, 2000);
+  }
+}
+
+// Start intro animation
+particles = createParticles(phrases[0]);
+animate();
+setTimeout(transition, phrases[0].duration);
+
+// Game Code
+function startGame() {
+  // ... [All your game code here]
+
+  const ctx = gameCanvas.getContext('2d');
+  gameCanvas.width = window.innerWidth;
+  gameCanvas.height = window.innerHeight;
+
+  // ... [Rest of your game initialization and logic]
+}
+
+// Play intro audio
+playAudioForDuration('reflected-light-147979.mp3', 31000);
+</script>
 </body>
 </html>