kunjgit · KomalMaurya · Jun 3, 2024 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024
diff --git a/Games/Beyblade/3D Stadium.glb b/Games/Beyblade/3D Stadium.glb
diff --git a/Games/Beyblade/BB-LOGO.png b/Games/Beyblade/BB-LOGO.png
diff --git a/Games/Beyblade/README.md b/Games/Beyblade/README.md
@@ -6,21 +6,23 @@
 <!-- add your game description here  -->
 - This Beyblade game is developed using HTML, CSS, and JavaScript. 
 The game will simulate a spinning battle between two Beyblades, where players can launch their Beyblades and compete to earn a high score and determine the winner.
+This game contains a 3D Model of Beyblade Stadium too...
 
 ## **functionalities 🎮**
 <!-- add functionalities over here -->
 1. Players can choose their Beyblade from a variety of options, each with unique characteristics and abilities.
-2. Players can launch their Beyblade into the battle arena by clicking a launch button.
+2. Players can launch their Beyblade into the battle arena by clicking on "Play" button and "Launch" button.
 3. The Beyblade will spin continuously after being launched, creating an engaging visual effect.
 4. The game will keep track of each player's score based on the performance of their Beyblade during the battle.
-5. Each Beyblade will have a stamina value that decreases over time.
+5. Each Beyblade will have a stamina value that decreases over time by clicking on "Launch" button continuously.
 6. The game will end when a Beyblade's stamina reaches zero.
 7. The game is be designed to work on various screen sizes and devices, ensuring a seamless gaming experience.
 <br>
 
 ## **How to play? 🕹️**
 <!-- add the steps how to play games -->
-- To play the Beyblade game, click the "Player 1 Launch" button to launch Player 1's Beyblade, then wait for it to stop spinning and see if there's a collision, with the scores and stamina updated accordingly.
+- To play the Beyblade game, Click on "Play" Button, click the "Player 1 Launch" and "Player 2 Launch" button to launch Player 1's Beyblade and Player 2's Beyblade, then wait for it to stop spinning and see if there's a collision, with the scores and stamina updated accordingly.
+- There is a note on "How to Play" in the game itself describing every step to play.
 
 <br>
 
@@ -29,7 +31,6 @@ The game will simulate a spinning battle between two Beyblades, where players ca
 <br>
 <!-- add your screenshots like this -->
 <!-- ![image](url) -->
-<img width="960" alt="Screenshot 2023-07-02 172036" src="https://github.com/abhinav-m22/GameZone/assets/113239388/deeab107-9267-44c2-92a2-3397ae59905e">
-<img width="960" alt="Screenshot 2023-07-02 172053" src="https://github.com/abhinav-m22/GameZone/assets/113239388/e1ac281a-dc7c-4dc4-b864-ffef0b56343e">
+<img width="960" alt="Screenshot 2023-07-02 172036" src="https://github.com/KomalMaurya/GameZone/blob/Beyblade/Games/Beyblade/assets/Webpage.png">
 
-<br>
+<br>
diff --git a/Games/Beyblade/assets/Webpage.png b/Games/Beyblade/assets/Webpage.png
diff --git a/Games/Beyblade/assets/b1.jpg b/Games/Beyblade/assets/b1.jpg
diff --git a/Games/Beyblade/assets/b2.png b/Games/Beyblade/assets/b2.png
diff --git a/Games/Beyblade/assets/bey1.png b/Games/Beyblade/assets/bey1.png
diff --git a/Games/Beyblade/assets/bey2.jpg b/Games/Beyblade/assets/bey2.jpg
diff --git a/Games/Beyblade/index.html b/Games/Beyblade/index.html
@@ -1,31 +1,66 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>Beyblade Game</title>
-  <link rel="stylesheet" type="text/css" href="style.css">
-</head>
-
-<body>
-  <h1>Beyblade Game</h1>
-  <div id="game-container">
-    <div id="player1">
-      <h2>Player 1</h2>
-      <button onclick="launchBlade(1)">Launch</button>
-      <p>Score: <span id="score1">0</span></p>
-      <p>Stamina: <span id="stamina1">100</span></p>
-      <img id="blade1" src="./assets/beyblade-1.jpg" alt="Blade 1">
-    </div>
-    <div id="player2">
-      <h2>Player 2</h2>
-      <button onclick="launchBlade(2)">Launch</button>
-      <p>Score: <span id="score2">0</span></p>
-      <p>Stamina: <span id="stamina2">100</span></p>
-      <img id="blade2" src="./assets/beyblade-2.jpg" alt="Blade 2">
-    </div>
-  </div>
-
-  <script src="script.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beyblade Game</title>
+    <link rel="stylesheet" href="style.css">
+    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+</head>
+<body>
+    <div class="container">
+        <header>
+                <ul class="navbar">
+                    <div class="logo">
+                        <img src="BB-LOGO.png" alt="">
+                    </div>
+                    <li><a href="https://kunjgit.github.io/GameZone/" class="active"><i class="fa-solid fa-house"></i>Home</a></li>
+                    <li><a href="#Stadium" class="active">Stadium</a></li>
+                    <li><button class="active" onclick="openPopup()">How to Play?</button></li>
+                    <div class="popup" id="popup">
+                      <i class="fa-solid fa-gamepad"></i>
+                      <h2 style="color: black;">To Play :</h2>
+                      <p>Click on "Play Button" & "Launch" and if Stamina becomes zero, the winner will be decided by whose score is high!</p>
+                      <button type="button" onclick="closePopup()">OK</button>
+                    </div>
+                </ul>
+                <button type="button" id="btn" onclick="hideShow()"><i class="fa-solid fa-play">PLAY NOW</i></button>
+        </header>
+        <div id="game-container">
+            <div id="player1">
+                <h2>Player 1</h2>
+                <button onclick="launchBlade(1)">Launch</button>
+                <p>Score: <span id="score1">0</span></p>
+                <p>Stamina: <span id="stamina1">100</span></p>
+                <img src="./assets/b1.jpg" alt="Blade 1" class="blader1">
+            </div>
+            <div id="container3D">
+                <div id="game-timer"></div>
+                <div class="circle1 img-bey" id="hide">
+                    <!-- <div class="box1"></div> -->
+                        <img src="assets/bey2.jpg" alt="" id="blade2">
+                    <div class="circle2">
+                        <!-- <div class="box2"></div> -->
+                        <img src="assets/bey1.png" alt="" id="blade1">
+                    </div>
+                </div>
+            </div>
+            <div id="player2">
+                <h2>Player 2</h2>
+                <button onclick="launchBlade(2)">Launch</button>
+                <p>Score: <span id="score2">0</span></p>
+                <p>Stamina: <span id="stamina2">100</span></p>
+                <img src="./assets/b2.png" alt="Blade 2" class="blader2">
+            </div>
+        </div>
+    </div>
+    <div id="Stadium">
+        <center><h2>3D Beyblade Stadium</h2></center>
+        <model-viewer src="3D Stadium.glb" alt="A 3D model" auto-rotate camera-controls class="model"></model-viewer>
+    </div>
+    <script src="script1.js"></script>
+    <script src="script.js"></script>
+
+</body>
 </html>
diff --git a/Games/Beyblade/script.js b/Games/Beyblade/script.js
@@ -1,112 +1,142 @@
-const MAX_STAMINA = 100;
-
-let score1 = 0;
-let score2 = 0;
-let stamina1 = MAX_STAMINA;
-let stamina2 = MAX_STAMINA;
-
-function launchBlade(player) {
-
-  const score = Math.floor(Math.random() * 100) + 1;
-  const decreaseStamina = Math.floor(Math.random() * 20) + 1;
-
-  if (player === 1) {
-    score1 += score;
-    stamina1 -= decreaseStamina;
-    if (stamina1 < 0) stamina1 = 0;
-    document.getElementById("score1").textContent = score1;
-    document.getElementById("stamina1").textContent = stamina1;
-    const blade1 = document.getElementById("blade1");
-    blade1.classList.add("spin-animation");
-    blade1.addEventListener("animationend", () => {
-      blade1.classList.remove("spin-animation");
-    }, { once: true });
-  } else {
-    score2 += score;
-    stamina2 -= decreaseStamina;
-    if (stamina2 < 0) stamina2 = 0;
-    document.getElementById("score2").textContent = score2;
-    document.getElementById("stamina2").textContent = stamina2;
-    const blade2 = document.getElementById("blade2");
-    blade2.classList.add("spin-animation");
-    blade2.addEventListener("animationend", () => {
-      blade2.classList.remove("spin-animation");
-    }, { once: true });
-  }
-
-  if (stamina1 === 0 || stamina2 === 0) {
-    endGame();
-  }
-}
-
-function endGame() {
-  document.getElementById("player1").getElementsByTagName("button")[0].disabled = true;
-  document.getElementById("player2").getElementsByTagName("button")[0].disabled = true;
-
-  let winner;
-  if (score1 > score2) {
-    winner = "Player 1";
-  } else if (score2 > score1) {
-    winner = "Player 2";
-  } else {
-    winner = "It's a tie!";
-  }
-
-  const resultDiv = document.createElement("div");
-  resultDiv.innerHTML = "<h2>Game Over!</h2><p>Winner: " + winner + "</p>";
-  document.getElementById("game-container").appendChild(resultDiv);
-}
-
-function handlePowerUp(player) {
-  const powerUpChance = Math.random();
-  if (powerUpChance <= 0.2) {
-    if (player === 1) {
-      player1Score += 5;
-      player1Stamina += 10;
-    } else {
-      player2Score += 5;
-      player2Stamina += 10;
-    }
-  }
-  updateUI();
-}
-
-function displayPowerUpMessage(player) {
-  const messageElement = document.getElementById('power-up-message');
-  if (player === 1) {
-    messageElement.textContent = 'Player 1 got a Power-Up!';
-  } else {
-    messageElement.textContent = 'Player 2 got a Power-Up!';
-  }
-  messageElement.classList.add('show');
-  setTimeout(() => {
-    messageElement.classList.remove('show');
-  }, 2000);
-}
-
-function generatePowerUps() {
-  setInterval(() => {
-    const player = Math.random() < 0.5 ? 1 : 2;
-    handlePowerUp(player);
-    displayPowerUpMessage(player);
-  }, 10000);
-}
-
-function updateTimer() {
-  const timerElement = document.getElementById('game-timer');
-  let seconds = 0;
-  setInterval(() => {
-    seconds++;
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = seconds % 60;
-    timerElement.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
-  }, 1000);
-}
-
-function startGame() {
-  resetGame();
-  generatePowerUps();
-  updateTimer();
-}
-
-startGame();
+const MAX_STAMINA = 100;
+
+let score1 = 0;
+let score2 = 0;
+let stamina1 = MAX_STAMINA;
+let stamina2 = MAX_STAMINA;
+
+var display=1;
+var div1 = document.getElementById("container3D");
+div1.style.display='none';
+function hideShow(){
+    if(display==0){
+        div1.style.display='none';
+        display=1;
+    }
+    else{
+        div1.style.display='block';
+        display=0;
+    }
+}
+
+let popup=document.getElementById("popup");
+function openPopup(){
+  popup.classList.add("open-popup");
+}
+function closePopup(){
+  popup.classList.remove("open-popup");
+}
+
+
+if(display==1){
+  function launchBlade(player) {
+
+    const score = Math.floor(Math.random() * 100) + 1;
+    const decreaseStamina = Math.floor(Math.random() * 20) + 1;
+
+    if (player === 1) {
+      score1 += score;
+      stamina1 -= decreaseStamina;
+      if (stamina1 < 0) stamina1 = 0;
+      document.getElementById("score1").textContent = score1;
+      document.getElementById("stamina1").textContent = stamina1;
+      const blade1 = document.getElementById("blade1");
+      blade1.classList.add("spin-animation");
+      blade1.addEventListener("animationend", () => {
+        blade1.classList.remove("spin-animation");
+      }, { once: true });
+    } else {
+      score2 += score;
+      stamina2 -= decreaseStamina;
+      if (stamina2 < 0) stamina2 = 0;
+      document.getElementById("score2").textContent = score2;
+      document.getElementById("stamina2").textContent = stamina2;
+      const blade2 = document.getElementById("blade2");
+      blade2.classList.add("spin-animation");
+      blade2.addEventListener("animationend", () => {
+        blade2.classList.remove("spin-animation");
+      }, { once: true });
+    }
+
+    if (stamina1 === 0 || stamina2 === 0) {
+      endGame();
+    }
+  }  
+}
+
+function endGame() {
+  document.getElementById("player1").getElementsByTagName("button")[0].disabled = true;
+  document.getElementById("player2").getElementsByTagName("button")[0].disabled = true;
+
+  let winner;
+  if (score1 > score2) {
+    winner = "Player 1";
+  } else if (score2 > score1) {
+    winner = "Player 2";
+  } else {
+    winner = "It's a tie!";
+  }
+
+  const resultDiv = document.createElement("div");
+  resultDiv.innerHTML = "<h2>Game Over!</h2><p>Winner: " + winner + "</p>";
+  document.getElementById("container3D").appendChild(resultDiv);
+  var div = document.getElementById("hide");
+  div.style.display='none';
+}
+
+function handlePowerUp(player) {
+  const powerUpChance = Math.random();
+  if (powerUpChance <= 0.2) {
+    if (player === 1) {
+      player1Score += 5;
+      player1Stamina += 10;
+    } else {
+      player2Score += 5;
+      player2Stamina += 10;
+    }
+  }
+  updateUI();
+}
+
+function displayPowerUpMessage(player) {
+  const messageElement = document.getElementById('container3D');
+  if (player == 1) {
+    messageElement.textContent = 'Player 1 got a Power-Up!';
+  } else {
+    messageElement.textContent = 'Player 2 got a Power-Up!';
+  }
+  messageElement.classList.add('show');
+  setTimeout(() => {
+    messageElement.classList.remove('show');
+  }, 2000);
+}
+
+function generatePowerUps() {
+  setInterval(() => {
+    const player = Math.random() < 0.5 ? 1 : 2;
+    handlePowerUp(player);
+    displayPowerUpMessage(player);
+  }, 1000);
+}
+
+function updateTimer() {
+  const timerElement = document.getElementById('game-timer');
+  let seconds = 0;
+  setInterval(() => {
+    seconds++;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    timerElement.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+  }, 100);
+  if(seconds==60&& (stamina1==0||stamina2==0)){
+    endGame();
+  }
+}
+
+function startGame() {
+  resetgame();
+  generatePowerUps();
+  updateTimer();
+}
+
+startGame();