rock paper scissor game

web project
Atharvverma1234 · Jul 28, 2024 · db90fe2 · db90fe2
1 parent ecb59d5
commit db90fe2
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 0 deletions.
diff --git a/Paper.PNG b/Paper.PNG
diff --git a/app.js b/app.js
@@ -0,0 +1,68 @@
+let userScore = 0;
+let aiScore = 0;
+
+const choices = document.querySelectorAll(".choice");
+const msg = document.querySelector("#msg");
+
+const userScorePara = document.querySelector("#user_score");
+const aiScorePara = document.querySelector("#AI_score");
+
+const genAIChoice = () =>
+{
+    const options = ["rock","paper","scissors"];
+    let randIdx = Math.floor(Math.random()*3);   //math.random gives random number btw 0 to 1 multiplying 3 gives number btw 0 to 2
+    return options[randIdx]; 
+};
+
+const drawGame = () =>{
+    msg.innerText = "Game is Draw. Play Again";
+    msg.style.backgroundColor = "#081b31";
+};
+
+const showWinner = (userWin,userChoice,aiChoice,) =>{
+    if(userWin)
+    {
+        userScore++;
+        userScorePara.innerText = userScore;
+        msg.innerText = `You win! Your ${userChoice} beats ${aiChoice}`;
+        msg.style.backgroundColor = "green";
+    }
+    else{
+        aiScore++;
+        aiScorePara.innerText = aiScore;
+        msg.innerText = `You Lose! ${aiChoice} beats your ${userChoice}`; // keep an eye on quotation if printing value
+        msg.style.backgroundColor = "red";
+    }
+};
+
+const playGame = (userChoice) =>{
+
+    const aiChoice = genAIChoice();
+
+    if(userChoice === aiChoice)
+    {
+        drawGame();
+    }
+    else{
+        userWin = true;
+        if(userChoice === "rock")
+        {
+            userWin = aiChoice === "paper" ? false:true;
+        }
+        else if (userChoice === "paper") {
+            //rock, scissors
+            userWin = aiChoice === "scissors" ? false : true;
+          } else {
+            //rock, paper
+            userWin = aiChoice === "rock" ? false : true;
+          }
+          showWinner(userWin, userChoice, aiChoice);
+        }
+    };
+
+    choices.forEach((choice) => {
+        choice.addEventListener("click", () => {
+          const userChoice = choice.getAttribute("id");
+          playGame(userChoice);
+        });
+    });
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rock Paper Scissors Game</title>
+    <link rel="stylesheet" href="style.css">                  
+</head>
+<body>
+    <h1>ROCK PAPER SCISSOR</h1>
+    <div class="choices">
+        <div class="choice" id="rock">
+            <img src="rock.PNG"/>
+        </div>
+        <div class="choice" id="paper">
+            <img src="Paper.PNG"/>
+        </div>
+        <div class="choice" id="scissors">
+            <img src="scissor.PNG"/>
+        </div>
+    </div>
+
+    <div class="score_board">
+        <div class="score">
+            <p id="user_score">0</p>
+            <p>You</p>
+        </div>
+        <div class="score">
+            <p id="AI_score">0</p>
+            <p>AI</p>
+        </div>
+    </div>
+    <br></br>
+
+    <div class="msg_container">
+        <p id="msg">Play Your Move</p>
+    </div>
+    <script src="app.js">                      //important
+    </script>
+</body>
+</html>
diff --git a/rock.PNG b/rock.PNG
diff --git a/scissor.PNG b/scissor.PNG
diff --git a/style.css b/style.css
@@ -0,0 +1,68 @@
+* {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  h1 {
+    background-color: #081b31;
+    color: #3ea85c;
+    height: 5rem;
+    line-height: 5rem;
+  }
+
+  .choice {
+    height: 165px;
+    width: 165px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .choice:hover {
+    cursor: pointer;
+    background-color: #081b31;
+  }
+
+  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;
+  }
+
+  .score_board {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    margin-top: 3rem;
+    gap: 5rem;
+  }
+
+  #user_score,
+  #AI_score {
+    font-size: 4rem;
+  }
+
+  .msg-container {
+    margin-top: 5rem;
+  }
+
+  #msg {
+    background-color: #081b31;
+    color: #fff;
+    font-size: 2rem;
+    display: inline;
+    padding: 1rem;
+    border-radius: 1rem;
+  }