Merge pull request #435 from Uzairhussain98/RockPaperScissors-Game

added RockPaperScissor js game
Ayushparikh-code · Sep 17, 2024 · ddde90f · ddde90f
2 parents 96c2166 + 5f49091
commit ddde90f
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 0 deletions.
diff --git a/Rock-Paper-Scissors/README.md b/Rock-Paper-Scissors/README.md
@@ -0,0 +1,6 @@
+# The Rock Paper Scissors Game
+
+This is a simple version of rock paper scissor game.
+Feel free to make it better in any way possible!
+
+![Rock Paper Scissors](rps.png "Rock Paper Scissors")
diff --git a/Rock-Paper-Scissors/index.html b/Rock-Paper-Scissors/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>replit</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <div class="wrapper">
+  <div class="buttons">
+    <button class="rpsButton" value="Rock">✊</button>
+    <button class="rpsButton" value="Paper">🤚</button>
+    <button class="rpsButton" value="Scissors">✌️</button>
+  </div>
+  <div class="resultContainer">
+  <div id="player-score"></div>
+  <div id="hands"></div>
+  <div id="result"></div>
+  <button id='endGameButton'>🔴</button>
+  </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Rock-Paper-Scissors/rps.png b/Rock-Paper-Scissors/rps.png
diff --git a/Rock-Paper-Scissors/script.js b/Rock-Paper-Scissors/script.js
@@ -0,0 +1,144 @@
+/*
+  Rock Paper Scissors 🚀🔥
+  Concepts covered in this project
+    👉 For loops
+    👉 Dom Manipulation
+    👉 Variables
+    👉 Conditionals (if else if)
+    👉 Template Literals
+    👉 Event Listeners
+    👉 Higher order Function (Math.random())
+*/
+
+const totalScore = {computerScore : 0, playerScore : 0}
+
+// ** getComputerChoice randomly selects between `rock` `paper` `scissors` and returns that string **
+// getComputerChoice() 👉 'Rock'
+// getComputerChoice() 👉 'Scissors'
+function getComputerChoice() {
+  const rpsChoice = ["Rock", "Paper", "Scissors"]
+  const randomNumber = Math.floor(Math.random() * 3)
+  return rpsChoice[randomNumber];
+  // console.log(rpsChoice[randomNumber])
+
+}
+
+// ** getResult compares playerChoice & computerChoice and returns the score accordingly **
+// human wins - getResult('Rock', 'Scissors') 👉 1
+// human loses - getResult('Scissors', 'Rock') 👉 -1
+// human draws - getResult('Rock', 'Rock') 👉 0
+function getResult(playerChoice, computerChoice) {
+  // return the result of score based on if you won, drew, or lost
+  let score;
+
+
+  // All situations where human draws, set `score` to 0
+  if (playerChoice == computerChoice) {
+    score = 0;
+  }
+  else if(playerChoice=="Paper" && computerChoice=="Rock"){
+  score = 1;  
+  }
+else if(playerChoice=="Scissors"&& computerChoice=="Paper"){
+  score = 1; 
+  }
+else if(playerChoice=="Rock" && computerChoice=="Scissors"){
+  score = 1; 
+  }
+  else{
+    score = -1;
+  }
+
+
+
+  // All situations where human wins, set `score` to 1
+  // make sure to use else ifs here
+
+
+  // Otherwise human loses (aka set score to -1)
+
+
+  // return score
+   return score
+}
+
+// ** showResult updates the DOM to `You Win!` or `You Lose!` or `It's a Draw!` based on the score. Also shows Player Choice vs. Computer Choice**
+function showResult(score, playerChoice, computerChoice) {
+  // Hint: on a score of -1
+  // You should do result.innerText = 'You Lose!'
+  // Don't forget to grab the div with the 'result' id!
+  const resultDiv = document.getElementById('result')
+    const handsDiv = document.getElementById('hands')
+    const playerScoreDiv = document.getElementById('player-score')
+
+
+    if(score == -1){
+      resultDiv.innerText = "You Lose"
+
+    }
+  else if(score ==0){
+          resultDiv.innerText = "That a Tie"
+
+
+  }
+  else{
+          resultDiv.innerText= "You Win"
+
+
+  }
+
+  handsDiv.innerText= `${playerChoice} VS ${computerChoice} `
+
+  playerScoreDiv.innerText = `Your Score ${totalScore.playerScore}`
+
+
+}
+
+// ** Calculate who won and show it on the screen **
+function onClickRPS(playerChoice) {
+  console.log(playerChoice)
+  const computerChoice = getComputerChoice()
+  console.log(computerChoice)
+  const score = getResult(playerChoice,computerChoice)
+  totalScore.playerScore += score
+  totalScore.computerScore == score
+
+  console.log({score})
+  console.log(totalScore)
+  showResult(score,playerChoice,computerChoice)
+}
+
+
+// ** Make the RPS buttons actively listen for a click and do something once a click is detected **
+function playGame() {
+  // use querySelector to select all RPS Buttons
+const rpsButtons = document.querySelectorAll('.rpsButton')
+  console.log(rpsButtons)
+
+  rpsButtons.forEach(rpsButtons => {
+    rpsButtons.onclick =() => onClickRPS(rpsButtons.value) 
+  })
+
+
+
+  // Add a click listener to the end game button that runs the endGame() function on click
+    const endGameButton = document.getElementById("endGameButton")
+    endGameButton.onclick = () => endGame(totalScore)
+}
+
+// ** endGame function clears all the text on the DOM **
+function endGame(totalScore) {
+  totalScore.playerScore = 0
+    totalScore.computerScore = 0
+
+   const resultDiv = document.getElementById('result')
+    const handsDiv = document.getElementById('hands')
+    const playerScoreDiv = document.getElementById('player-score')
+
+      playerScoreDiv.innerText = ''
+  handsDiv.innerText =''
+  resultDiv.innerText=''
+
+}
+
+playGame()
diff --git a/Rock-Paper-Scissors/style.css b/Rock-Paper-Scissors/style.css
@@ -0,0 +1,38 @@
+html, body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin:0;
+}
+
+.wrapper {
+  background: #1c1c1c;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+}
+
+.buttons {
+  display: flex;
+  gap: 20px;
+}
+
+button {
+  height: 100px;
+  width: 100px;
+  font-size: 48px;
+  border-radius: 30px;
+  cursor: pointer;
+
+}
+
+.resultContainer {
+  font-size: 2rem;
+  text-align: center;
+  margin-top: 20px;
+}
+