Add files via upload

ishikat · web-flow · commit fb42303f62f8 · 2024-05-21T13:50:17.000+05:30
diff --git a/116- rock-paper-scissors Game/README.md b/116- rock-paper-scissors Game/README.md
@@ -0,0 +1,2 @@
+# rock-paper-scissors-project
+A simple rock paper scissors JavaScript Project.
diff --git a/116- rock-paper-scissors Game/index.html b/116- rock-paper-scissors Game/index.html
@@ -0,0 +1,127 @@
+<!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</title>
+    <style>
+        body{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            align-content: center;
+            background-color: rgb(107, 141, 171);
+            background-repeat: no-repeat;
+            /* background-size: cover;    */
+            background-position-y: vertical ;
+            background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTD6rfzq2lVRsq2pF7_gNAwU_dCOkeUzTmpw&s");
+        }
+    </style>
+</head>
+<body>
+    <h1 style="color: rgb(11, 42, 69); font-size: 70px;">Rock-Paper-Scissor</h1>
+
+    <p style="color: rgb(150, 29, 29); font-size: 25px;">Select either rock, paper, or scissors to play the game!</p>
+
+    <p style="color: rgb(150, 29, 29); font-size: 25px;"><strong>Rules:</strong> “Rock breaks scissors, scissors cuts paper, paper covers rock.” </p>
+    <div class='score'>
+
+    </div>
+    <div class='message'>
+
+    </div>
+    <button type='button' style="background-color: rgb(89, 142, 142); height: 50px; width:110px ; font-size: 20px;"><strong>Rock</strong></button>
+    <button type='button' style="background-color: rgb(89, 142, 142); height: 50px; width:110px ; font-size: 20px;"><strong>Paper</strong></button>
+    <button type='button' style="background-color: rgb(89, 142, 142); height: 50px; width:110px ; font-size: 20px;"><strong>Scissors</strong></button>  
+    <script>
+
+        const message = document.querySelector('.message');
+        const score = document.querySelector('.score');
+        const buttons = document.querySelectorAll('button');
+        const winnerScores = [0,0];
+        
+        //add event listeners to buttons
+        for ( let i = 0 ; i < buttons.length ; i++){
+            buttons[i].addEventListener('click', playGame);
+        }
+
+        function playGame(e){
+            //setup player's selection
+            let playerSelection = e.target.innerText;
+            //setup a random number to select for computer
+            //selects a number between 0 and 1 (1 not-inclusive)
+            let computerSelection = Math.random();
+
+            //if computerSelection is less than .34, computer selects Rock
+            if (computerSelection < .34){
+                computerSelection = 'Rock';
+            } else if (computerSelection <= .67){
+                computerSelection = 'Paper';
+            } else {
+                computerSelection = 'Scissors';
+            }
+            
+            //setup a function to compare winners and return result
+            let result = checkWinner(playerSelection , computerSelection);
+
+            //output scores to the DOM
+            if (result === 'Player'){
+                result += '<strong style="font-size:35px; color:rgb(150, 29, 29)"> wins!<strong>';
+                //update score
+                winnerScores[0]++;
+            }
+
+            if (result === 'Computer'){
+                result += ' <strong style="font-size:35px; color:rgb(150, 29, 29)">wins!<strong/>';
+                winnerScores[1]++;
+            }
+
+            if (result === 'Draw'){
+                result += '<strong style="font-size:35px; color:rgb(150, 29, 29)"> It\'s a tie!<strong/>'
+            }
+
+            //output score into Score DIV
+            score.innerHTML = 'Player: [ ' + winnerScores[0]+ ' ] Computer: [ ' + winnerScores[1] + ' ]';
+
+            //output player and computer's selections
+            messenger('Player: <strong>' + playerSelection + '</strong> Computer: <strong>' + computerSelection + '</strong><br>' + result);
+        }   
+
+        function messenger(selectionMessage){
+            message.innerHTML = selectionMessage;
+        }
+
+        function checkWinner(player, computer){
+            if (player === computer){
+                return 'Draw';
+            }
+
+            if (player === 'Rock'){
+                if(computer === 'Paper'){
+                    return 'Computer';
+                } else {
+                    return 'Player';
+                }
+            }
+
+            if (player === 'Paper'){
+                if (computer === 'Scissors'){
+                    return 'Computer';
+                } else {
+                    return 'Player';
+                }
+            }
+
+            if (player === 'Scissors'){
+                if (computer === 'Rock'){
+                    return 'Computer';
+                } else {
+                    return 'Player';
+                }
+            }
+
+        }
+    </script>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# rock-paper-scissors-project`
	`2`	`+A simple rock paper scissors JavaScript Project.`