swapnilsparsh · swapnilsparsh · Oct 3, 2021 · Oct 2, 2021 · Oct 2, 2021 · Oct 2, 2021
diff --git a/30DaysOfJavaScript/assets/37.png b/30DaysOfJavaScript/assets/37.png
diff --git a/37 - RPS Game/assets/images1.png b/37 - RPS Game/assets/images1.png
diff --git a/37 - RPS Game/assets/images2.png b/37 - RPS Game/assets/images2.png
diff --git a/37 - RPS Game/assets/images3.png b/37 - RPS Game/assets/images3.png
diff --git a/37 - RPS Game/fonts/sans.ttf b/37 - RPS Game/fonts/sans.ttf
diff --git a/37 - RPS Game/start.html b/37 - RPS Game/start.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="start.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div>
+            <h2> Stone Paper Scissors Game</h2><br>
+            <img id="Rock" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMm_CG8rW0lcRsU44OEJ72i9Fqgl8e65dOzTA2CNl7M7urmaAEvWSMzhrO9UXQI87PQHg&usqp=CAU" alt="Rock" height="150px" width="150px" onclick="rpsGame(id)">
+            <img id="Paper" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTq5coVBzk-fBpsBg0mH5IHjE-z7wsSyO6LAnaGPRp5KOsySVwfH89a3vj1qI92tmIKP1Q&usqp=CAU" alt="Paper"
+            height="150px" width="150px" onclick="rpsGame(id)">
+            <img id="Scissors" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4KAZtQUpeqelxjO89TJxMfAFtWsX1SCIwCXNaY3HNhfKSy5WTZKEF4K5nWX7upL5NvKo&usqp=CAU"alt="Scissors"
+            height="150px" width="150px" onclick="rpsGame(id)">
+        </div>
+
+    </div>
+
+    <div id="message">
+
+    </div>
+</body>
+</html>
diff --git a/37 - RPS Game/start.js b/37 - RPS Game/start.js
@@ -0,0 +1,53 @@
+function rpsGame(humanChoice) {
+
+    let myChoice = number(humanChoice);
+    let comChoice = random();
+
+    let final=result(myChoice,comChoice);
+
+
+    document.getElementById("message").innerHTML=`Human choice is ${str(myChoice)} and Computer choice is ${str(comChoice)} <br> ${final}`;
+
+}
+
+function random() {
+    return Math.floor(Math.random() * 3);
+}
+
+function number(word) {
+    if (word == "Rock") {
+        return 0;
+    }
+    else if (word == "Paper") {
+        return 1;
+    }
+    else if (word == "Scissors") {
+        return 2;
+    }
+}
+
+function str(number) {
+    if (number == 0) {
+        return "Rock";
+    }
+    else if (number == 1) {
+        return "Paper";
+    }
+    else if (number == 2) {
+        return "Scissors";
+    }
+}
+
+function result(myChoice, comChoice) {
+    if (myChoice == comChoice) {
+        return "Tied";
+    }
+    else {
+        if ((comChoice == 0  && myChoice == 1)|| (comChoice ==1  && myChoice ==2) || (comChoice ==2  && myChoice ==0)) {
+            return "You won";
+        }
+        else if ((comChoice == 1  && myChoice == 0)|| (comChoice ==2  && myChoice ==1) || (comChoice ==0  && myChoice ==2)) {
+            return "Computer won";
+        }
+    }
+}
diff --git a/37 - RPS Game/style.css b/37 - RPS Game/style.css
@@ -0,0 +1,42 @@
+body{
+    background-color: #19172e;
+    font-family: 'sans';
+}
+
+h2
+{
+    font-style: oblique;
+    color: #fff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-align: center;
+    font-size: 40px;
+    padding: 0%;
+}
+
+img:hover
+{
+    box-shadow: rgb(95, 9, 26) 10px 10px 10px;
+}
+
+img
+{
+    box-shadow: crimson -10px -10px 10px;
+    margin: 40px;
+}
+
+.container
+{
+    max-width: 700px;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    display: flex;
+    border: 5px solid #fff;
+    padding: 10px;
+}
+#message{
+    text-align: center;
+    font-size: 50px;
+
+    color: #fff;
+}
diff --git a/index.html b/index.html
@@ -257,6 +257,14 @@ <h4>Hangman</h4>
         <img src="30DaysOfJavaScript/assets/36.png" alt="Hangman" />
       </a>
     </div>
+
+    <div class="item">
+      <a target="_blank" href="37 - RPS Game/start.html">
+        <h4>Rock Paper Scissors Game</h4>
+        <img src="30DaysOfJavaScript/assets/37.png" alt="Rock Paper Scissors Game" />
+      </a>
+    </div>
+
   </div>
 </div>