Merge pull request #1137 from shaanrxx/RockPaperScissor-shaanrxx

Add Rock Paper Scissors Files
thinkswell · May 21, 2024 · fa6ec7e · fa6ec7e
2 parents b48b879 + 0d2d470
commit fa6ec7e
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 0 deletions.
diff --git a/RockPaperScissorsGame/shaanrxx/ReadMe.md b/RockPaperScissorsGame/shaanrxx/ReadMe.md
diff --git a/RockPaperScissorsGame/shaanrxx/img/paper.png b/RockPaperScissorsGame/shaanrxx/img/paper.png
diff --git a/RockPaperScissorsGame/shaanrxx/img/rock.png b/RockPaperScissorsGame/shaanrxx/img/rock.png
diff --git a/RockPaperScissorsGame/shaanrxx/img/scissors.png b/RockPaperScissorsGame/shaanrxx/img/scissors.png
diff --git a/RockPaperScissorsGame/shaanrxx/index.html b/RockPaperScissorsGame/shaanrxx/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!-- Preconnect to Google Fonts for faster loading of the 'Orbitron' font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Link to Google Font 'Orbitron' with specified weights -->
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap" rel="stylesheet">
+    <title>Rock-Paper-Scissors Game</title>
+    <!-- Link to external CSS for styling the webpage -->
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Game title with interactive words that can potentially include animations -->
+    <h1><span id="rock">Rock  </span>    -   <span id="paper">Paper  </span>   -   <span id="scissors">Scissors</span></h1>
+
+    <!-- Main game container -->
+    <div id="game">
+        <!-- Section where the player can choose their move -->
+        <div id="player-choice">
+            <h2>Choose Your Weapon:</h2>
+            <!-- Buttons for selecting rock, paper, or scissors -->
+            <button class="choice" id="rock">
+                <img src="img/rock.png" alt="Rock"> <!-- Image representing rock -->
+                <span>Rock</span> <!-- Label for the button -->
+            </button>
+            <button class="choice" id="paper">
+                <img src="img/paper.png" alt="Paper"> <!-- Image representing paper -->
+                <span>Paper</span> <!-- Label for the button -->
+            </button>
+            <button class="choice" id="scissors">
+                <img src="img/scissors.png" alt="Scissors"> <!-- Image representing scissors -->
+                <span>Scissors</span> <!-- Label for the button -->
+            </button>
+        </div>
+
+        <!-- Section to display results and scores -->
+        <div id="result">
+            <h2>Results:</h2>
+            <p id="message"></p> <!-- Placeholder for result messages -->
+            <p>Player Score: <span id="player-score">0</span></p> <!-- Display player's score -->
+            <p>Computer Score: <span id="computer-score">0</span></p> <!-- Display computer's score -->
+        </div>
+        <!-- Button to reset the game -->
+        <button id="reset">R E S E T</button>
+    </div>
+    <!-- Link to external JavaScript file containing game logic -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/RockPaperScissorsGame/shaanrxx/script.js b/RockPaperScissorsGame/shaanrxx/script.js
@@ -0,0 +1,82 @@
+// Declaring the possible choices for the game and initial scores for both players
+const choices = ["rock", "paper", "scissors"];
+let playerScore = 0;
+let computerScore = 0;
+
+// Adding event listeners to each game choice button
+document.querySelectorAll(".choice").forEach(button => {
+    button.addEventListener("click", () => {
+        playGame(button.id); // Triggers the playGame function on click
+    });
+});
+
+// Reset game button event listener
+document.getElementById("reset").addEventListener("click", resetGame);
+
+// Function to handle the game logic
+function playGame(playerChoice) {
+    // Computer selects a random choice from the choices array
+    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
+    // Determine the winner of the round
+    const resultMessage = determineWinner(playerChoice, computerChoice);
+
+    // Update the DOM with the results and current scores
+    document.getElementById("message").textContent = `You chose ${playerChoice}, computer chose ${computerChoice}. ${resultMessage}`;
+    document.getElementById("player-score").textContent = playerScore;
+    document.getElementById("computer-score").textContent = computerScore;
+}
+
+// Function to determine the winner of each round
+function determineWinner(playerChoice, computerChoice) {
+    // Check if it's a tie
+    if (playerChoice === computerChoice) {
+        return "It's a tie!";
+    }
+
+    // Logic to determine if the player wins
+    if (
+        (playerChoice === "rock" && computerChoice === "scissors") ||
+        (playerChoice === "paper" && computerChoice === "rock") ||
+        (playerChoice === "scissors" && computerChoice === "paper")
+    ) {
+        playerScore++; // Increment player score
+        return "You win!";
+    } else {
+        computerScore++; // Increment computer score
+        return "Computer wins!";
+    }
+}
+
+// Function to reset the game
+function resetGame() {
+    // Reset scores to zero
+    playerScore = 0;
+    computerScore = 0;
+    // Clear messages and score display on the game interface
+    document.getElementById("message").textContent = "";
+    document.getElementById("player-score").textContent = "0";
+    document.getElementById("computer-score").textContent = "0";
+}
+
+// Adding animation to cycle through words in the HTML
+document.addEventListener('DOMContentLoaded', function() {
+    // Select all span elements within h1
+    const words = document.querySelectorAll('h1 span');
+    let current = 0; // Track the current word index
+
+    function animateWords() {
+        // Remove the class from all words to reset the zoom effect
+        words.forEach(word => {
+            word.classList.remove('zoom-effect');
+        });
+
+        // Add the zoom effect class to the current word
+        words[current].classList.add('zoom-effect');
+
+        // Increment and wrap around the word index to start over when it reaches the end
+        current = (current + 1) % words.length;
+    }
+
+    // Start the animation loop, changing the word every 3000 milliseconds (3 seconds)
+    setInterval(animateWords, 3000);
+});
diff --git a/RockPaperScissorsGame/shaanrxx/styles.css b/RockPaperScissorsGame/shaanrxx/styles.css
@@ -0,0 +1,118 @@
+/* Base styles for the body to set font, alignment, and background */
+body {
+    font-family: 'Orbitron', sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(165deg, #002c08, #000000); /* Dark green to black gradient */
+    height: 100vh; /* Full viewport height */
+    display: flex;
+    flex-direction: column;
+    justify-content: center; /* Center content vertically */
+    align-items: center; /* Center content horizontally */
+}
+
+/* Styling for the main title with specific margin, color, and a smooth scaling transition */
+h1 {
+    text-align: center;
+    margin-top: 30px; /* Fixed redundant margin-top */
+    color: rgb(0, 210, 39); /* Neon green color */
+    transition: transform 0.5s ease-in-out;
+}
+
+/* Styling for images, ensuring they fill their container and are rounded */
+img {
+    width: 100%; /* Full width of their container */
+    height: 100%; /* Full height, adjusted to maintain aspect ratio */
+    display: block; /* Block display to remove bottom space */
+    border-radius: 10px; /* Rounded corners */
+}
+
+/* Additional text color settings for headings and paragraphs */
+h2, p {
+    color: rgb(0, 210, 39); /* Uniform neon green text color for consistency */
+}
+
+/* Styling for the game container with gradients, shadows, and rounded borders */
+#game {
+    margin: 20px auto;
+    padding: 20px;
+    width: 50%;
+    height: 500px;
+    background-color: linear-gradient(165deg, #001952, #000000); /* Gradient background */
+    box-shadow: 0 4px 8px rgba(5, 158, 66, 0.6);
+    border-radius: 8px;
+}
+
+/* Styling for choice buttons to ensure the image and label fit perfectly */
+.choice {
+    padding: 0;
+    width: 150px;
+    height: 150px;
+    margin: 10px;
+    display: inline-block;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(5, 158, 66, 0.6);
+    position: relative;
+    background: none;
+    border-radius: 10px;
+}
+
+/* Hidden span elements that show on hover, providing interactive feedback */
+.choice span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
+    color: green;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0; /* Hidden by default */
+    transition: opacity 0.3s;
+    font-size: 20px;
+    border-radius: 10px;
+}
+
+/* Hover effect to show the text within the choice button */
+.choice:hover span {
+    opacity: 1;
+}
+
+/* Reset button styling with transition effects on hover */
+#reset {
+    padding: 10px 20px;
+    margin-top: 20px;
+    background-color: transparent;
+    color: rgb(130, 204, 130);
+    border: none;
+    cursor: pointer;
+    font-size: 15px;
+    box-shadow: 0 4px 8px rgba(5, 158, 66, 0.6);
+    border-radius: 5px;
+}
+
+#reset:hover {
+    background-color: green; /* Changes to solid green on hover */
+    color: black;
+}
+
+/* Animation for zoom effect used in the game title */
+@keyframes zoomInZoomOut {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.5); }
+}
+
+/* Apply transformation properties to the title spans */
+h1 span {
+    display: inline-block; /* Allows transformation */
+    transition: transform 1s ease-in-out;
+}
+
+/* Class for animating title spans, called dynamically */
+.zoom-effect {
+    animation: zoomInZoomOut 2s ease-in-out;
+}