Merge pull request #2235 from abhinav-m22/beyblade

Beyblade game added
kunjgit · Jul 9, 2023 · 0004342 · 0004342
2 parents 0903888 + 07162ca
commit 0004342
Show file tree

Hide file tree

Showing 8 changed files with 395 additions and 0 deletions.
diff --git a/Games/Beyblade/README.md b/Games/Beyblade/README.md
@@ -0,0 +1,35 @@
+# **Beyblade** 
+
+<br>
+
+## **Description 📃**
+<!-- 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.
+
+## **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.
+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.
+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.
+
+<br>
+
+## **Screenshots 📸**
+
+<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">
+
+<br>
diff --git a/Games/Beyblade/assets/beyblade-1.jpg b/Games/Beyblade/assets/beyblade-1.jpg
diff --git a/Games/Beyblade/assets/beyblade-2.jpg b/Games/Beyblade/assets/beyblade-2.jpg
diff --git a/Games/Beyblade/index.html b/Games/Beyblade/index.html
@@ -0,0 +1,31 @@
+<!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>
+
+</html>
diff --git a/Games/Beyblade/script.js b/Games/Beyblade/script.js
@@ -0,0 +1,112 @@
+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();