Merge pull request #4939 from Sam-Orion/Sam-Orion

Added Rock Paper Scissors Lizard Spock Game
kunjgit · Jul 24, 2024 · 9a224dc · 9a224dc
2 parents f7b9a8c + 3eda3d2
commit 9a224dc
Show file tree

Hide file tree

Showing 13 changed files with 300 additions and 0 deletions.
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/README.md b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/README.md
@@ -0,0 +1,59 @@
+# **Rock Paper Scissors Lizard Spock Game**
+
+---
+
+<br>
+
+## **Description 📃**
+Rock, Paper, Scissors, Lizard, Spock is a game of chance that expands the traditional game of Rock, Paper, Scissors and was invented by Sam Kass and Karen Bryla. It was brought to fame after being used to settle a dispute about what to watch on TV between Sheldon and Raj in episode "The Lizard-Spock Expansion" in the famous show "The Big Bang Theory".
+-
+<br>
+
+## **functionalities 🎮**
+1. Player vs. Computer gameplay
+2. Five choices: Rock, Paper, Scissors, Lizard, Spock
+3. Random computer move generation
+4. Score tracking for both player and computer
+5. Game reset option after completion
+6. Responsive UI with animated buttons
+7. Rules explanation available on demand
+- 
+<br>
+
+## **How to play? 🕹️**
+Simply click on the option which you'll like to choose, the computer will make a random move and the winner will be declared. Whoever reaches 5 points first, WINS!!
+
+# Rules 📝
+1. Scissors cuts Paper
+2. Paper covers Rock
+3. Rock crushes Lizard
+4. Lizard poisons Spock
+5. Spock smashes Scissors
+6. Scissors decapitates Lizard
+7. Lizard eats Paper
+8. Paper disproves Spock
+9. Spock vaporizes Rock
+10. (and as it always has) Rock crushes Scissors
+
+![Rules](https://static.wikia.nocookie.net/bigbangtheory/images/7/7d/RPSLS.png/revision/latest?cb=20120822205915)
+- 
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![Screenshots](./img/ss1.PNG)
+
+![Screenshot2](./img/ss2.PNG)
+
+![Screenshot3](./img/ss3.PNG)
+
+![Screenshot4](./img/ss4.PNG)
+
+<br>
+
+## **Working video 📹**
+
+[Watch Video](./path/to/your/video.mp4)
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/RPSLS-Title.png b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/RPSLS-Title.png
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss1.PNG b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss1.PNG
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss2.PNG b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss2.PNG
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss3.PNG b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss3.PNG
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss4.PNG b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/ss4.PNG
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/video.mp4 b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/img/video.mp4
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/index.html b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Include Tailwind CSS from CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Custom Tailwind configuration -->
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              brown: {
+                500: '#8B4513',
+                600: '#7A3C12',
+                700: '#693511',
+              }
+            }
+          }
+        }
+      }
+    </script>
+    <title>Rock, Paper, Scissors, Lizard, Spock Game</title>
+    <!-- Link to custom styles -->
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <!-- Body with background image and overlay -->
+  <body class="text-center text-white bg-cover bg-center bg-no-repeat bg-fixed" style="background-image: url('img/RPSLS-Title.png');">
+    <!-- Semi-transparent overlay for better text readability -->
+    <div class="fixed inset-0 bg-black bg-opacity-50 -z-10"></div>
+    <!-- Game title -->
+    <h1 class="text-4xl my-5">Let's play Rock, Paper, Scissors, Lizard, Spock!</h1>
+    <main class="container mx-auto px-4">
+      <!-- Rules section with animated border -->
+      <div class="px-[10px] py-[1px] rounded-2xl animate-gradient-border inline-block">
+        <details class="rules-container bg-white bg-opacity-90 text-gray-900 rounded-xl p-5 max-w-2xl mx-auto my-5">
+          <summary class="cursor-pointer">Rules to the game</summary>
+          <!-- Game rules content -->
+          <div class="text-center mt-4 space-y-2">
+            <!-- ... (rules content) ... -->
+            <p>You will be playing against the computer.</p>
+            <p>You can choose between Rock, Paper, Scissors, Lizard and Spock.</p>
+            <p>The first one to five points wins.</p>
+
+            <p>Here are the rules to getting a point in the game:</p>
+            <ul class="list-none space-y-1">
+              <li><span>&#9986;&#65039;</span>  Scissors cuts Paper  <span>&#128196;</span></li>
+              <li><span>&#128196;</span>  Paper covers Rock  <span>&#128511;</span></li>
+              <li><span>&#128511;</span>  Rock crushes Lizard  <span>&#129422;</span></li>
+              <li><span>&#129422;</span>  Lizard poisons Spock  <span>&#128406;</span></li>
+              <li><span>&#128406;</span>  Spock smashes Scissors  <span>&#9986;&#65039;</span></li>
+              <li><span>&#9986;&#65039;</span>  Scissors decapitates Lizard  <span>&#129422;</span></li>
+              <li><span>&#129422;</span>  Lizard eats Paper  <span>&#128196;</span></li>
+              <li><span>&#128196;</span>  Paper disproves Spock <span>&#128406;</span></li>
+              <li><span>&#128406;</span>  Spock vaporizes Rock  <span>&#128511;</span></li>
+              <li>(and as it always has)  <span>&#128511;</span>  Rock crushes Scissors  <span>&#9986;&#65039;</span></li>
+            </ul>
+            <p>
+              If the player and computer choose the same option (Ex. Paper and
+              Paper), then no one gets the point.
+            </p>
+          </div>
+        </details>
+      </div>
+
+      <!-- Score display -->
+      <div class="score-container flex justify-around my-8 text-xl">
+        <strong>Player Score: <span class="score font-medium" id="player-score">0</span></strong>
+        <strong>Computer Score: <span class="score font-medium" id="computer-score">0</span></strong>
+      </div>
+
+       <!-- Game options section -->
+      <section class="options-container">
+        <h2 class="text-2xl mb-4">Choose an option:</h2>
+        <!-- Buttons for player choices -->
+          <div class="btn-container">
+            <button id="rock-btn" class="btn bg-brown-600 bg-opacity-80 text-white border-brown-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-brown-700 hover:shadow-lg hover:shadow-brown-500/50 hover:scale-105">Rock</button>
+            <button id="paper-btn" class="btn bg-white bg-opacity-80 text-black border-gray-300 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-gray-100 hover:shadow-lg hover:shadow-gray-300/50 hover:scale-105">Paper</button>
+            <button id="scissors-btn" class="btn bg-red-600 bg-opacity-80 text-white border-red-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-red-700 hover:shadow-lg hover:shadow-red-500/50 hover:scale-105">Scissors</button>
+            <button id="lizard-btn" class="btn bg-violet-600 bg-opacity-80 text-white border-violet-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-violet-700 hover:shadow-lg hover:shadow-violet-500/50 hover:scale-105">Lizard</button>
+            <button id="spock-btn" class="btn bg-blue-600 bg-opacity-80 text-white border-blue-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/50 hover:scale-105">Spock</button>
+          </div>
+      </section>
+
+      <!-- Results display and reset button -->
+      <div class="results-container text-xl my-4">
+        <p id="results-msg"></p>
+        <p id="winner-msg"></p>
+        <!-- Hidden by default, shown when game ends -->
+        <button class="btn hidden bg-gradient-to-r from-blue-500 via-violet-500 to-red-500 text-white border-2 border-white rounded-full px-6 py-2 mx-auto mt-5 transition duration-300 ease-in-out hover:scale-105 hover:shadow-lg hover:ring-4 ring-offset-white ring-offset-2 hover:shadow-purple-500/50 animate-gradient" id="reset-game-btn">Play again?</button>
+      </div>
+    </main>
+    <!-- Link to JavaScript file -->
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/script.js b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/script.js
@@ -0,0 +1,110 @@
+ // Function to generate a random choice for the computer
+ function getRandomComputerResult() {
+    const options = ["Rock", "Paper", "Scissors", "Lizard", "Spock"];
+    const randomIndex = Math.floor(Math.random() * options.length);
+    return options[randomIndex];
+  }
+
+  // Function to determine if the player has won the round
+  function hasPlayerWonTheRound(player, computer) {
+    return (
+      (player === "Scissors" && computer === "Paper") ||
+      (player === "Paper" && computer === "Rock") ||
+      (player === "Rock" && computer === "Lizard") ||
+      (player === "Lizard" && computer === "Spock") ||
+      (player === "Spock" && computer === "Scissors") ||
+      (player === "Scissors" && computer === "Lizard") ||
+      (player === "Lizard" && computer === "Paper") ||
+      (player === "Paper" && computer === "Spock") ||
+      (player === "Spock" && computer === "Rock") ||
+      (player === "Rock" && computer === "Scissors")
+    );
+  }
+
+  // Initialize scores
+  let playerScore = 0;
+  let computerScore = 0;
+
+  // Function to get the results of a round
+  function getRoundResults(userOption) {
+    const computerResult = getRandomComputerResult();
+
+    if (hasPlayerWonTheRound(userOption, computerResult)) {
+      playerScore++;
+      return `Player wins! ${userOption} beats ${computerResult}`;
+    } else if (computerResult === userOption) {
+      return `It's a tie! Both chose ${userOption}`;
+    } else {
+      computerScore++;
+      return `Computer wins! ${computerResult} beats ${userOption}`;
+    }
+  }
+
+  // Get DOM elements
+  const playerScoreSpanElement = document.getElementById("player-score");
+  const computerScoreSpanElement = document.getElementById("computer-score");
+  const roundResultsMsg = document.getElementById("results-msg");
+  const winnerMsgElement = document.getElementById("winner-msg");
+  const optionsContainer = document.querySelector(".options-container");
+  const resetGameBtn = document.getElementById("reset-game-btn");
+
+  // Function to display results and check for game end
+  function showResults(userOption) {
+    roundResultsMsg.innerText = getRoundResults(userOption);
+    computerScoreSpanElement.innerText = computerScore;
+    playerScoreSpanElement.innerText = playerScore;
+
+    // Check if game has ended (first to 5 points)
+    if (playerScore === 5 || computerScore === 5) {
+      winnerMsgElement.innerText = `${
+        playerScore === 5 ? "Player" : "Computer"
+      } has won the game!`;
+
+      resetGameBtn.style.display = "block";
+      optionsContainer.style.display = "none";
+    }
+
+  };
+
+  // Function to reset the game
+  function resetGame() {
+    playerScore = 0;
+    computerScore = 0;
+    playerScoreSpanElement.innerText = playerScore;
+    computerScoreSpanElement.innerText = computerScore;
+    resetGameBtn.style.display = "none";
+    optionsContainer.style.display = "block";
+    winnerMsgElement.innerText = "";
+    roundResultsMsg.innerText = "";
+  };
+
+  // Add event listener to reset button
+  resetGameBtn.addEventListener("click", resetGame);
+
+  // Get button elements
+  const rockBtn = document.getElementById("rock-btn");
+  const paperBtn = document.getElementById("paper-btn");
+  const scissorsBtn = document.getElementById("scissors-btn");
+  const lizardBtn = document.getElementById("lizard-btn");
+  const spockBtn = document.getElementById("spock-btn");
+
+  // Add event listeners to game option buttons
+  rockBtn.addEventListener("click", function () {
+    showResults("Rock");
+  });
+
+  paperBtn.addEventListener("click", function () {
+    showResults("Paper");
+  });
+
+  scissorsBtn.addEventListener("click", function () {
+    showResults("Scissors");
+  });
+
+  lizardBtn.addEventListener("click", function () {
+    showResults("Lizard");
+  });
+
+  spockBtn.addEventListener("click", function () {
+    showResults("Spock");
+  });
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/styles.css b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/styles.css
@@ -0,0 +1,20 @@
+/* Define keyframes for gradient animation */
+@keyframes gradient-animation {
+  0% { background-position: 0% 50%; }      /* Start position */
+  50% { background-position: 100% 50%; }   /* Middle position */
+  100% { background-position: 0% 50%; }    /* End position (same as start) */
+}
+
+/* Gradient animation on hover */
+.animate-gradient:hover {
+  animation: gradient-animation 3s ease infinite; /* Apply the animation */
+  background-size: 200% 200%; /* Increase background size for smoother animation */
+}
+
+/* Animated gradient border */
+.animate-gradient-border {
+  /* Create a multi-color gradient background */
+  background: linear-gradient(60deg, #3b82f6, #8b5cf6, #ef4444, #3b82f6);
+  background-size: 300% 300%; /* Increase background size for smoother animation */
+  animation: gradient-animation 5s ease infinite; /* Apply the animation */
+}
diff --git a/Games/Rock_Paper_Scissors_Lizard_Spock_Game/tailwind.config.js b/Games/Rock_Paper_Scissors_Lizard_Spock_Game/tailwind.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+    theme: {
+      extend: {
+        colors: {
+          brown: {
+            500: '#8B4513',
+            600: '#7A3C12',
+            700: '#693511',
+          }
+        }
+      }
+    }
+  }
diff --git a/README.md b/README.md
@@ -1302,6 +1302,7 @@ This repository also provides one such platforms where contributers come over an
 |[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)|
 |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)|
 |[Tether](https://github.com/kunjgit/GameZone/tree/main/Games/Tether)|
+|[Rock Paper Scissors Lizard Spock Game](./Games/Rock_Paper_Scissors_Lizard_Spock_Game)|
 
  </center>
 <br>

diff --git a/assets/images/Rock_Paper_Scissors_Lizard_Spock_Game.PNG b/assets/images/Rock_Paper_Scissors_Lizard_Spock_Game.PNG