Add files via upload

hitarthpathak · Apr 15, 2024 · 8f747b7 · 8f747b7
commit 8f747b7
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 0 deletions.
diff --git a/Images/Icon.jpg b/Images/Icon.jpg
diff --git a/Images/Paper.jpg b/Images/Paper.jpg
diff --git a/Images/Rock.jpg b/Images/Rock.jpg
diff --git a/Images/Scissor.jpg b/Images/Scissor.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+
+<head>
+
+    <title>Rock-Paper-Scissor</title>
+
+    <link rel="icon" href="Images/Icon.jpg">
+
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+
+    <div class="nav">
+
+        <h1>Rock Paper Scissor</h1>
+
+    </div>
+
+    <div class="main-box">
+
+        <div class="box" id="rock">
+
+            <img src="Images/Rock.jpg" alt="Image Not Available">
+
+        </div>
+
+        <div class="box" id="paper">
+
+            <img src="Images/Paper.jpg" alt="Image Not Available">
+
+        </div>
+
+        <div class="box" id="scissor">
+
+            <img src="Images/Scissor.jpg" alt="Image Not Available">
+
+        </div>
+
+    </div>
+
+    <div class="score">
+
+        <div id="user">
+
+            <p id="user-score">0</p>
+
+            <hr>
+
+            <p>User Score</p>
+
+        </div>
+
+        <div id="computer">
+
+            <p id="computer-score">0</p>
+
+            <hr>
+
+            <p>Computer Score</p>
+
+        </div>
+
+    </div>
+
+    <p id="result">[ Play With Computer ]</p>
+
+</body>
+
+<script src="script.js"></script>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,77 @@
+let userscore = 0;
+let computerscore = 0;
+
+// --------------------------------------------------------------------------------------------------
+
+const choices = document.querySelectorAll(".box");
+const result = document.querySelector("#result");
+
+const userscoredata = document.querySelector("#user-score");
+const computerscoredata = document.querySelector("#computer-score");
+
+// --------------------------------------------------------------------------------------------------
+
+choices.forEach((box) => {
+    box.addEventListener("click", () => {
+        const userchoice = box.getAttribute("id")
+        playgame(userchoice)
+    })
+})
+
+// --------------------------------------------------------------------------------------------------
+
+const generatecomputerchoice = () => {
+    const options = ["rock", "paper", "scissor"]
+    const randomindex = Math.floor(Math.random() * 3);
+    return options[randomindex];
+}
+
+// --------------------------------------------------------------------------------------------------
+
+const playgame = (userchoice) => {
+    console.log("User Choice =", userchoice)
+    const computerchoice = generatecomputerchoice();
+    console.log("Computer Choice =", computerchoice)
+
+    if (userchoice === computerchoice) {
+        // draw game
+        console.log("Draw!")
+        result.innerText = "[ Game Is Draw! ]";
+        result.style.backgroundColor = "white";
+    }
+    else {
+        let userwin = true;
+        if (userchoice === "rock") {
+            // paper, scissor
+            userwin = computerchoice === "paper" ? false : true;
+        }
+        else if (userchoice === "paper") {
+            // rock, scissor
+            userwin = computerchoice === "scissor" ? false : true;
+        }
+        else {
+            // rock, paper
+            userwin = computerchoice === "rock" ? false : true;
+        }
+        showwinner(userwin, userchoice, computerchoice);
+    }
+}
+
+// --------------------------------------------------------------------------------------------------
+
+const showwinner = (userwin, userchoice, computerchoice) => {
+    if (userwin) {
+        console.log("You Win!")
+        userscore++;
+        userscoredata.innerText = userscore;
+        result.innerText = `[ You Win! Your ${userchoice} beats Computer's ${computerchoice} ]`;
+        result.style.backgroundColor = "green";
+    }
+    else {
+        console.log("You Loose!")
+        computerscore++;
+        computerscoredata.innerText = computerscore;
+        result.innerText = `[ You Loose! Computer's ${computerchoice} beats Your ${userchoice} ]`;
+        result.style.backgroundColor = "red";
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,72 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    font-family: 'Times New Roman';
+    box-sizing: border-box;
+}
+
+.nav {
+    background-color: red;
+    color: yellow;
+    text-align: center;
+    padding: 20px;
+    font-size: 20px;
+}
+
+.main-box {
+    border: 5px dotted black;
+    height: fit-content;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 50px;
+    padding: 20px;
+    margin: auto;
+    margin-top: 20px;
+}
+
+.box {
+    border: 10px dashed blue;
+    border-radius: 25px;
+    background-color: red;
+    height: 300px;
+    width: 200px;
+    cursor: pointer;
+}
+
+.box:hover {
+    box-shadow: 0px 0px 20px 10px blue;
+}
+
+img {
+    height: 100%;
+    width: 100%;
+}
+
+.score {
+    height: auto;
+    width: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+#user, #computer {
+    height: auto;
+    width: auto;
+    text-align: center;
+    font-size: 20px;
+}
+
+#result {
+    border: 2px dashed black;
+    border-radius: 50px;
+    padding: 20px;
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+    margin-top: 20px;
+}