sadanandpai · satyamsharmasam · Oct 9, 2024 · Oct 10, 2024
diff --git a/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/images/paper.png b/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/images/paper.png
diff --git a/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/images/rock.png b/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/images/rock.png
diff --git a/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/images/scissor.png b/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/images/scissor.png
diff --git a/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/index.html b/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rock Paper Scissor </title>
+    <link rel="stylesheet" href="style.css">
+    <script src="./script.js" defer></script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="happen">
+            <img src="./images/rock.png" id="computer" alt="">
+            <img src="./images/rock.png" id="user" alt="">
+        </div>
+
+        <p id="Answer">Play</p>
+
+        <div class="options">
+            <img src="./images/rock.png" alt="" class="rock" id="option">
+            <img src="./images/paper.png" alt="" class="paper" id="option">
+            <img src="./images/scissor.png" alt="" class="scissor" id="option">
+        </div>
+    </div>
+
+    <section id="score-section">
+        <div class="score-container">
+            <h2>Score Board</h2>
+            <div id="both-score">
+                <div class="scores">
+                    <h3>Computer</h3>
+                    <hr>
+                    <h3 id="cm-score-count">0</h3>
+                </div>
+                <div class="scores">
+                    <h3>User </h3>
+                    <hr>
+                    <h3 id="user-score-count">0</h3>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <button id="reset-btn">Reset Game</button>
+
+</body>
+
+</html>
diff --git a/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/script.js b/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/script.js
@@ -0,0 +1,85 @@
+// step 1 initialize variables
+const computer = document.querySelector('#computer')
+const user = document.querySelector('#user')
+const options = document.querySelectorAll('#option')
+const Answer = document.querySelector('#Answer')
+const computerScoreCount = document.querySelector('#cm-score-count')
+const userScoreCount = document.querySelector('#user-score-count')
+const resetBtn = document.querySelector('#reset-btn')
+
+// step 2 crate array for computer images
+const optionsArray = ['rock', 'paper', 'scissor']
+
+function computerAnswer() {
+  const random = Math.floor(Math.random() * 3)
+  return optionsArray[random]
+}
+
+// step 3 main logic of game
+options.forEach((option) => {
+  option.addEventListener('click', (e) => {
+    computer.classList.add('animate-right')
+    user.classList.add('animate-left')
+
+    const computerChoose = computerAnswer()
+    const userChoose = e.target.className
+
+    setTimeout(() => {
+      computer.src = `./images/${computerChoose}.png`
+      user.src = `./images/${userChoose}.png`
+      computer.classList.remove('animate-right')
+      user.classList.remove('animate-left')
+
+      if (userChoose === computerChoose) {
+        Answer.innerText = 'draw'
+        UserScore()
+        cmScore()
+      } else if (userChoose === 'rock') {
+        if (computerChoose === 'paper') {
+          Answer.innerText = 'Computer Win'
+          cmScore()
+        } else {
+          Answer.innerText = 'User Win'
+          UserScore()
+        }
+      } else if (userChoose === 'paper') {
+        if (computerChoose === 'scissor') {
+          Answer.innerText = 'Computer Win'
+          cmScore()
+        } else {
+          Answer.innerText = 'User Win'
+          UserScore()
+        }
+      } else if (userChoose === 'scissor') {
+        if (computerChoose === 'rock') {
+          Answer.innerText = 'Computer Win'
+          cmScore()
+        } else {
+          Answer.innerText = 'User Win'
+          UserScore()
+        }
+      }
+    }, 1000)
+
+    computer.src = `./images/rock.png`
+    user.src = `./images/rock.png`
+  })
+})
+
+//step 4 increase score functions
+const cmScore = () => {
+  const cmScoreValue = parseInt(computerScoreCount.innerText)
+  computerScoreCount.innerText = cmScoreValue + 1
+}
+const UserScore = () => {
+  const userScoreValue = parseInt(userScoreCount.innerText)
+  userScoreCount.innerText = userScoreValue + 1
+}
+
+// step 5 reset game
+resetBtn.addEventListener('click', () => {
+  computerScoreCount.innerText = 0
+  userScoreCount.innerText = 0
+  computer.src = `./images/rock.png`
+  user.src = `./images/rock.png`
+})
diff --git a/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/style.css b/apps/javascript/src/challenges/Rock-Paper-Scissor-Game/style.css
@@ -0,0 +1,152 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.container {
+  color: black;
+  background-color: white;
+  width: 100%;
+  height: auto;
+  margin: 3rem 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: none;
+  border-radius: 5px;
+}
+
+.happen {
+  width: 100%;
+  height: 9rem;
+}
+#user {
+  float: right;
+  transform: rotateY(180deg);
+  width: 10rem;
+}
+.animate-right {
+  animation: rightShake 1s infinite;
+}
+
+@keyframes rightShake {
+  0% {
+    rotate: 12deg;
+  }
+  50% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 12deg;
+  }
+}
+#computer {
+  width: 10rem;
+}
+.animate-left {
+  animation: leftShake 1s infinite;
+}
+
+@keyframes leftShake {
+  0% {
+    rotate: 0deg;
+  }
+  50% {
+    rotate: 12deg;
+  }
+  100% {
+    rotate: 0deg;
+  }
+}
+
+#Answer {
+  font-size: 2.2rem;
+  font-family: cursive;
+  margin: 1rem 0px 0px 0px;
+  letter-spacing: 2px;
+  border: none;
+  outline: none;
+  align-self: flex-start;
+  width: 100%;
+  text-align: center;
+}
+.options {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin: 3.2rem 0px 0px 0px;
+}
+.options img {
+  transform: rotate(270deg);
+  width: 6rem;
+  filter: drop-shadow(1px 1px 5px);
+  cursor: pointer;
+}
+
+#score-section {
+  width: 20rem;
+  padding: 0px 1rem;
+}
+.score-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 4rem 0px 2rem 0px;
+  font-family: cursive;
+  border: 1px solid black;
+  border-radius: 1rem;
+}
+
+#both-score {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.scores {
+  width: 9rem;
+  display: flex;
+  flex-direction: column;
+  /* background-color: green; */
+  align-items: center;
+  padding: 0.5rem 2rem;
+  gap: 2px;
+}
+
+#reset-btn {
+  font-size: 1.2rem;
+  border: none;
+  padding: 0.4rem 2rem;
+  background-color: rgb(146, 218, 246);
+  border-radius: 0.5rem;
+  font-family: cursive;
+  font-weight: 800;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 450px) {
+  #computer,
+  #user {
+    width: 8rem;
+  }
+  .options img {
+    width: 5rem;
+  }
+  #Answer {
+    font-size: 2rem;
+  }
+  body {
+    overflow: scroll;
+  }
+}