Merge pull request #4762 from vivekvardhan2810/rock

[New game]: Rock Paper Scissors Neon Theme
kunjgit · Jul 8, 2024 · 662b82b · 662b82b
2 parents 340d450 + eb9e3de
commit 662b82b
Show file tree

Hide file tree

Showing 6 changed files with 244 additions and 0 deletions.
diff --git a/Games/Rock_Paper_Scissors_Neon/README.md b/Games/Rock_Paper_Scissors_Neon/README.md
@@ -0,0 +1,23 @@
+# *Game_Name* 
+Rock Paper Scissors (Neon)
+
+---
+
+<br>
+
+## *Description 📃*
+Step into the vibrant world of our neon Rock Paper Scissors game! Challenge the AI in this classic game with a futuristic twist and see if you can outsmart your opponent with your quick decision-making skills.
+
+
+
+## *Functionalities 🎮*
+
+1. Choose Your Move: Select either rock, paper, or scissors by clicking on the corresponding neon button.
+2. AI's Move: The AI will randomly select its move.
+3. Determine the Winner: The game will compare both moves to decide the winner based on the rules: Rock beats Scissors, Scissors beat Paper, Paper beats Rock
+4. Play Again: Click the reset button to play another round and try to beat the AI!
+
+<br>
+
+## *Screenshots 📸*
+![Rock Paper Scissors Neon](https://github.com/vivekvardhan2810/GameZone/assets/91594529/9c2108d6-2c95-4363-820a-58fdbf1cf5a7)
diff --git a/Games/Rock_Paper_Scissors_Neon/index.html b/Games/Rock_Paper_Scissors_Neon/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Rock Paper Scissors</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+</head>
+<body>
+    <div style="text-align: left; margin-left: 40px;
+    margin-top:-30px;
+        font-size: 30px;
+        padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:white;" class="fas fa-home home-icon"></i></a></div>
+    <h1>Rock Paper Scissors</h1>
+    <div id="game">
+        <div id="userPanel">
+            <p>Your Choice:</p>
+            <button class="emojiButton" id="rockButton" onclick="play('rock')">👊</button>
+            <button class="emojiButton" id="paperButton" onclick="play('paper')">✋</button>
+            <button class="emojiButton" id="scissorsButton" onclick="play('scissors')">✌️</button>
+        </div>
+        <div id="resultPanel">
+            <p id="resultText">Make your move!</p>
+            <p id="scoreText">Score: You - 0 | Computer - 0</p>
+            <p id="tieText">Ties: 0</p>
+        </div>
+        <div id="computerPanel">
+            <p>Computer's Choice:</p>
+            <div id="computerEmoji"></div>
+        </div>
+    </div>
+    <button class="btn" onclick="
+    userScore=0;
+    computerScore=0;
+    tieScore=0;
+    updateResult();
+    ">Reset Score</button>
+    <button class="but5 btn" onclick="
+    change();
+    autoPlay();
+    ">Auto Play</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Rock_Paper_Scissors_Neon/script.js b/Games/Rock_Paper_Scissors_Neon/script.js
@@ -0,0 +1,90 @@
+var choices = ["rock", "paper", "scissors"];
+var userScore = 0;
+var computerScore = 0;
+var tieScore = 0;
+let isAutoPlaying=false;
+let id;
+
+function autoPlay(){
+    if(! isAutoPlaying){
+        id=setInterval(function (){
+        const playerMove=getComputerChoice();
+        play(playerMove);
+        },2000);
+        isAutoPlaying=true;
+
+    } else{
+        clearInterval(id);
+        isAutoPlaying=false;
+
+    }
+
+}
+var resultText = document.getElementById("resultText");
+var scoreText = document.getElementById("scoreText");
+var computerEmoji = document.getElementById("computerEmoji");
+function getComputerChoice() {
+    var randomIndex = Math.floor(Math.random() * choices.length);
+    return choices[randomIndex];
+}
+
+function determineWinner(userChoice, computerChoice) {
+    if (userChoice === computerChoice) {
+        return "It's a tie!";
+    } else if (
+        (userChoice === "rock" && computerChoice === "scissors") ||
+        (userChoice === "paper" && computerChoice === "rock") ||
+        (userChoice === "scissors" && computerChoice === "paper")
+    ) {
+        return "You win!";
+    } else {
+        return "Computer wins!";
+    }
+}
+
+function updateScore(result) {
+    if (result === "You win!") {
+        userScore++;
+    } else if (result === "Computer wins!") {
+        computerScore++;
+    }else{
+        tieScore++;
+    }
+    updateResult();
+
+}
+function updateResult(){
+    scoreText.textContent = "Score: You - " + `${userScore}` + " | Computer - " + `${computerScore}`;
+    tieText.textContent = "Ties: "+`${tieScore}`;
+}
+function play(userChoice) {
+    var computerChoice = getComputerChoice();
+
+    computerEmoji.textContent = getEmoji(computerChoice);
+
+    var result = determineWinner(userChoice, computerChoice);
+    resultText.textContent = result;
+
+    updateScore(result);
+}
+
+function getEmoji(choice) {
+    switch (choice) {
+        case "rock":
+            return "👊";
+        case "paper":
+            return "✋";
+        case "scissors":
+            return "✌️";
+        default:
+            return "";
+    }
+}
+function change(){
+    const name=document.querySelector('.but5');
+    if(name.innerHTML==='Auto Play'){
+        name.innerHTML='Stop Play';
+    }else{
+        name.innerHTML='Auto Play';
+    }
+}
diff --git a/Games/Rock_Paper_Scissors_Neon/style.css b/Games/Rock_Paper_Scissors_Neon/style.css
@@ -0,0 +1,86 @@
+body {
+    color: #f0f0f0; /* A light neon-like color */
+    font-family: fantasy;
+    text-align: center;
+    margin-top: 100px;
+    background-color: #1a1a1a; /* Dark background for neon contrast */
+}
+
+@font-face {
+    font-family: header;
+    src: url(assets/KaushanScript-Regular.ttf);
+}
+
+h1 {
+    color: #39ff14; /* Bright neon green */
+    font-family: header;
+    font-size: 50px;
+}
+
+#game {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 50px;
+}
+
+#userPanel,
+#computerPanel {
+    flex: 1;
+}
+
+#userPanel p,
+#computerPanel p {
+    font-size: 18px;
+    color: #00ffff; /* Neon cyan */
+}
+
+.emojiButton {
+    height: 100px;
+    width: 100px;
+    font-size: 75px;
+    color: #ff073a; /* Neon red */
+    background: transparent;
+    border: 2px solid #ff073a; /* Neon red border */
+    border-radius: 10px;
+}
+
+#computerEmoji {
+    font-size: 100px;
+    color: #ffd700; /* Neon yellow */
+}
+
+#resultPanel {
+    flex: 1;
+}
+
+#resultText {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #39ff14; /* Bright neon green */
+}
+
+#scoreText, 
+#tieText {
+    font-size: 18px;
+    color: #00ffff; /* Neon cyan */
+}
+
+.btn {
+    color: #ff073a; /* Neon red */
+    background: transparent;
+    border: 2px solid #ff073a; /* Neon red border */
+    border-radius: 6px;
+    margin-top: 6px;
+    height: 43px;
+    cursor: pointer;
+}
+
+.btn:hover {
+    border: 2px solid #00ffff; /* Neon cyan */
+    background-color: #1a1a1a; /* Dark background for neon contrast */
+}
+
+.but5 {
+    width: 86px;
+}
diff --git a/README.md b/README.md
@@ -365,6 +365,7 @@ This repository also provides one such platforms where contributers come over an
 | [Catch_the_falling_Stars](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_the_falling_Stars)     |
 |[Town-Rise](https://github.com/kunjgit/GameZone/tree/main/Games/Town_Rise_Game)|
 | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) |
+|[Rock_Paper_Scissors_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_Paper_Scissors_Neon)|
 
   </center>
 

diff --git a/assets/images/Rock_Paper_Scissors_Neon.png b/assets/images/Rock_Paper_Scissors_Neon.png