kunjgit · kartikmehta18 · Jun 22, 2024 · Jun 22, 2024 · Jun 22, 2024 · Jul 8, 2024
diff --git a/Games/Rock-paper-scissor/FOLDER_README_TEMPLATE.md b/Games/Rock-paper-scissor/FOLDER_README_TEMPLATE.md
@@ -0,0 +1,35 @@
+# **RRock-paper-scissor** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- Rock-Paper-Scissors, is a simple hand game usually played between two people. Each player simultaneously forms one of three shapes with an outstretched hand. The possible outcomes are: Rock crushes Scissors, Scissors cuts Paper,Paper covers Rock
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+- The game displays the choices to play with computer and if you won the match you got +1 if u lose -1 this will be the point distribution
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- In this,the user chooses one from the three options available and the computer does the same simultaneously. And thus, making the combinations, one of the both wins or either its a tie
+1. Rock defeats Scissor
+2. Scissor defeats Paper
+3. Paper defeats Rock
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<!-- add your screenshots like this -->
+<!-- ![image](url) -->
+
+![image](..//..//assets/image.png)
+<br>
+
+## **Working video 📹**
+
diff --git a/Games/Rock-paper-scissor/assets/image.png b/Games/Rock-paper-scissor/assets/image.png
diff --git a/Games/Rock-paper-scissor/index.html b/Games/Rock-paper-scissor/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>rock,papper,cissor game
+  </title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+
+  <div class="wrapper">
+<div className=' fixed flex flex-wrap justify-center top-7 inset-x-0'><img src="https://readme-typing-svg.demolab.com?font=Poppins&duration=5000&pause=500&color=F7F7F7&random=false&width=400&lines=Hey+This+is+Rock+Paper+Scissor+Game" alt="Typing SVG" />
+    </div>
+   <h1> Lets play!! </h1>
+    <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/Games/Rock-paper-scissor/script.js b/Games/Rock-paper-scissor/script.js
@@ -0,0 +1,88 @@
+
+function getComputerChoice() {
+  let rpsChoices = ['Rock', 'Paper', 'Scissors']
+  let computerChoice = rpsChoices[Math.floor(Math.random() * 3)]
+  return computerChoice
+}
+
+
+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 === 'Rock' && computerChoice === 'Scissors') {
+    score = 1
+
+  } else if (playerChoice === "Paper" && computerChoice === "Rock") {
+    score = 1
+
+  } else if (playerChoice === "Scissors" && computerChoice === "Paper") {
+    score = 1
+
+  } else {
+    score = -1
+  }
+
+
+  return score
+}
+
+
+function showResult(score, playerChoice, computerChoice) {
+
+
+  let result = document.getElementById('result')
+  switch (score) {
+    case -1:
+      result.innerText = `You Lose!`
+      break;
+    case 0:
+      result.innerText = `It's a Draw!`
+      break;
+    case 1:
+      result.innerText = `You Win!`
+      break;
+  }
+
+  let playerScore = document.getElementById('player-score')
+  let hands = document.getElementById('hands')
+  playerScore.innerText = `${Number(playerScore.innerText) + score}`
+    hands.innerText = `👱 ${playerChoice} vs 🤖 ${computerChoice}`
+}
+
+function onClickRPS(playerChoice) {
+  const computerChoice = getComputerChoice()
+  const score = getResult(playerChoice.value, computerChoice)
+  showResult(score, playerChoice.value, computerChoice)
+}
+
+function playGame() {
+
+  let rpsButtons = document.querySelectorAll('.rpsButton')
+
+
+  rpsButtons.forEach(rpsButton => {
+    rpsButton.onclick = () => onClickRPS(rpsButton)
+  })
+
+
+  let endGameButton = document.getElementById('endGameButton')
+  endGameButton.onclick = () => endGame()
+}
+
+function endGame() {
+  let playerScore = document.getElementById('player-score')
+  let hands = document.getElementById('hands')
+  let result = document.getElementById('result')
+  playerScore.innerText = ''
+  hands.innerText = ''
+  result.innerText = ''
+}
+
+playGame()
diff --git a/Games/Rock-paper-scissor/style.css b/Games/Rock-paper-scissor/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;
+}
+