game

stone paper scissors game
mukulraj-web · Jul 21, 2024 · 76c6432 · 76c6432
commit 76c6432
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,67 @@
+ let  userScore = 0;
+ let compScore = 0;
+
+ const choices = document.querySelectorAll(".choice");
+  const msg = document.querySelector("#msg")
+  const userScorepara = document.querySelector("#user-score")
+  const compScorepara = document.querySelector("#comp-score")
+const genCompChoice = ()=> {
+    const options = ["rock", "paper", "scissors" ]
+    const ranIdx = Math.floor(Math.random()*3);
+    return options[ranIdx];
+}
+const drawGame = ()=> {
+    console.log("game was draw")
+    msg.innerText = "Game was draw. play again.";
+    msg.style.background = "grey"
+}
+const showWinner = (userWin)=> {
+    if (userWin){
+        userScore++;
+        userScorepara.innerText = userScore;
+        console.log("user won");
+        msg.innerText = "you win!";
+        msg.style.background = "green"
+    }
+    else{
+        compScore++;
+        compScorepara.innerText = compScore;
+        console.log("computer won");
+        msg.innerText = "computer win";
+        msg.style.background = "red"
+    }
+}
+
+ const playGame =(userChoice) => {
+    console.log("user choice = ",userChoice);
+    const compChoice = genCompChoice();
+    console.log("comp choice =",compChoice)
+    if (userChoice === compChoice) {
+               drawGame();
+    }
+               else {
+                let userWin = true;
+                if (userChoice === "rock"){
+                    //comChoice = scissor,paper
+                    userWin = compChoice ==="paper" ? false:true ;
+                }
+                else if(userChoice ==="paper"){
+                    //comChoice = rock,paper
+                    userWin = compChoice === "scissors" ? false: true; 
+                }else {
+            userWin= compChoice === "rock" ? false: true;
+
+                }
+                showWinner(userWin);
+
+            }
+    }
+
+
+
+
+ choices.forEach((choice)=>{choice.addEventListener("click", ()=>{
+        const userChoice = choice.getAttribute("id")
+    playGame(userChoice);
+    })
+ })
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=
+    , initial-scale=1.0">
+    <title>Rock Paper Scissors game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+   <h1>Rock Paper Scissors game</h1>
+   <div class="choices">
+    <div class="choice" id="rock">
+    <img src="rock.png" alt="rock">
+   </div>
+   <div class="choice" id="paper">
+    <img src="paper.png" alt="paper">
+   </div>
+   <div class="choice" id="scissors" >
+    <img src="scissors.png" alt="scissors">
+   </div>
+   </div>
+
+   <div class="scoreboard">
+    <div class="score">
+        <p id="user-score">0</p>
+        <p>you</p>
+    </div>
+    <div class="score">
+        <p id="comp-score"> 0</p>
+        <p>comp</p>
+   </div>
+   </div>
+
+   <div class="msg-container">
+    <div id="msg">play your move</div>
+   </div>
+
+
+  <script src="app.js">javacsript</script>
+</body>
+
+</html>
diff --git a/paper.png b/paper.png
diff --git a/rock.png b/rock.png
diff --git a/scissors.png b/scissors.png
diff --git a/style.css b/style.css
@@ -0,0 +1,62 @@
+*{
+    margin: 0;
+  padding: 0;
+  text-align:center;
+  }
+  h1 {
+    background-color: #081b31; 
+    color: #fff;
+    height:5rem;
+    line-height: 5rem;
+  }
+  .choice{
+    height: 165px;
+    width: 165px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+  }
+  .choice:hover {
+    background-color: #081b31;
+    opacity: 0.5;
+    cursor: pointer;
+  }
+  img {
+    height: 150px;
+    width: 150px;
+    object-fit:cover ;
+    border-radius: 50%;
+  }
+  .choices {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 3rem;
+    margin-top:  5rem; 
+  }
+  .scoreboard {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    margin-top: 3rem;
+    gap: 5rem;
+  }
+  #user-score,#comp-score {
+    font-size: 4rem;
+  }
+  .msg-container {
+    margin-top: 2rem;
+  }
+  #msg {
+    background-color:#081b31;
+    color: #fff;
+    font-size: 2rem;
+    display: inline;
+    padding: 1rem;
+    border-radius: 1rem;
+  }
+
+