diff --git a/Games/Rock_Paper_Scissors_Neon/README.md b/Games/Rock_Paper_Scissors_Neon/README.md new file mode 100644 index 0000000000..e721c3967f --- /dev/null +++ b/Games/Rock_Paper_Scissors_Neon/README.md @@ -0,0 +1,23 @@ +# *Game_Name* +Rock Paper Scissors (Neon) + +--- + +
+ +## *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! + +
+ +## *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 new file mode 100644 index 0000000000..fab1701aa9 --- /dev/null +++ b/Games/Rock_Paper_Scissors_Neon/index.html @@ -0,0 +1,44 @@ + + + + Rock Paper Scissors + + + + + +
+

Rock Paper Scissors

+
+
+

Your Choice:

+ + + +
+
+

Make your move!

+

Score: You - 0 | Computer - 0

+

Ties: 0

+
+
+

Computer's Choice:

+
+
+
+ + + + + \ No newline at end of file diff --git a/Games/Rock_Paper_Scissors_Neon/script.js b/Games/Rock_Paper_Scissors_Neon/script.js new file mode 100644 index 0000000000..62ee2ab992 --- /dev/null +++ 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'; + } +} \ No newline at end of file diff --git a/Games/Rock_Paper_Scissors_Neon/style.css b/Games/Rock_Paper_Scissors_Neon/style.css new file mode 100644 index 0000000000..5252517816 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/README.md b/README.md index 96c64efc1f..e2bfb31e2c 100644 --- a/README.md +++ b/README.md @@ -368,6 +368,7 @@ This repository also provides one such platforms where contributers come over an |[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)| diff --git a/assets/images/Rock_Paper_Scissors_Neon.png b/assets/images/Rock_Paper_Scissors_Neon.png new file mode 100644 index 0000000000..b212583dcb Binary files /dev/null and b/assets/images/Rock_Paper_Scissors_Neon.png differ