Merge pull request AdarshAddee#56 from Rajpreetkaur02/new-branch

added rock-paper-scissors game
OREO1210 · Oct 1, 2022 · 84c6528 · 84c6528
2 parents e7c18cb + 6732b2b
commit 84c6528
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 0 deletions.
diff --git a/Game/Rock_Paper_Scissors/index.html b/Game/Rock_Paper_Scissors/index.html
@@ -0,0 +1,21 @@
+<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">
+</head>
+<body>
+ <div class="container">
+ <h2>Challenge 3: Rock, Paper, Scissors</h2>
+ <div class="flex-box-rps" id="flex-box-rps-div">
+ <img id="rock" src="rock.png" height="150" width="150" onclick="rps_game(this)">
+ <img id="paper" src="paper.jpg" height="150" width="150" onclick="rps_game(this)">
+ <img id="scissors" src="scissors.png" height="150" width="150" onclick="rps_game(this)">
+ </div>
+ <script src="script.js"></script>
+ </div>
+
+</body>
+</html>
diff --git a/Game/Rock_Paper_Scissors/paper.jpg b/Game/Rock_Paper_Scissors/paper.jpg
diff --git a/Game/Rock_Paper_Scissors/rock.png b/Game/Rock_Paper_Scissors/rock.png
diff --git a/Game/Rock_Paper_Scissors/scissors.png b/Game/Rock_Paper_Scissors/scissors.png
diff --git a/Game/Rock_Paper_Scissors/script.js b/Game/Rock_Paper_Scissors/script.js
@@ -0,0 +1,73 @@
+function rps_game(yourchoice){
+ console.log(yourchoice);
+ var humanChoice, botChoice;
+ humanChoice = yourchoice.id;
+ botChoice = numberToChoice(randToRpsInt());
+ console.log(botChoice);
+ var results = decidewinner(humanChoice,botChoice);
+ console.log(results);
+ var message = finalmessage(results);
+ console.log(message);
+ frontend(yourchoice.id,botChoice,message);
+
+}
+
+function randToRpsInt(){
+ return Math.floor(Math.random() * 3);
+}
+
+function numberToChoice(number){
+ return ['rock','paper','scissors'][number];
+}
+
+function decidewinner(humanChoice,botChoice){
+ var rpsdatabase = {
+ 'rock':{'scissors':1 , 'rock':0.5, 'paper':0},
+ 'paper':{'rock':1 , 'paper':0.5, 'scissors':0},
+ 'scissors':{'paper':1 , 'scissors':0.5, 'rock':0}
+ };
+
+ var yourscore = rpsdatabase[humanChoice][botChoice];
+ var botscore = rpsdatabase[botChoice][humanChoice];
+
+ return [yourscore,botscore];
+}
+
+function finalmessage([yourscore,botscore]){
+ if(yourscore === 0){
+ return {'message':'You Lost!!','color':'red'};
+ }
+ else if(yourscore === 0.5){
+ return {'message':'You tied!!','color':'yellow'};
+ }
+ else {
+ return {'message':'You Won!!','color':'green'};
+ }
+}
+
+function frontend(humanImageChoice,botImageChoice,finalmessage){
+ var imagesdatabase = {
+ 'rock': document.getElementById('rock').src,
+ 'paper': document.getElementById('paper').src,
+ 'scissors': document.getElementById('scissors').src 
+ }
+
+ document.getElementById('rock').remove();
+ document.getElementById('paper').remove();
+ document.getElementById('scissors').remove();
+
+ var humanDiv = document.createElement('div');
+ var botDiv = document.createElement('div');
+ var messageDiv = document.createElement('div');
+
+ humanDiv.innerHTML = "<img src='" + imagesdatabase[humanImageChoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37,50,233,1);'>";
+ document.getElementById('flex-box-rps-div').appendChild(humanDiv);
+
+ messageDiv.innerHTML = "<h1 style='color: " + finalmessage['color'] + "; font-size:60px; padding: 30px;' >"+ finalmessage['message'] +"</h1>"
+ document.getElementById('flex-box-rps-div').appendChild(messageDiv);
+
+ botDiv.innerHTML = "<img src='" + imagesdatabase[botImageChoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(243,38,24,1);'> ";
+ document.getElementById('flex-box-rps-div').appendChild(botDiv);
+
+
+}
diff --git a/Game/Rock_Paper_Scissors/style.css b/Game/Rock_Paper_Scissors/style.css
@@ -0,0 +1,23 @@
+body{
+ background-color: lightgray ;
+}
+
+.container{
+ border: 1px solid black;
+ width: 75%;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.flex-box-rps{
+ display: flex;
+ padding: 10px;
+ flex-wrap: wrap;
+ border: 1px solid black;
+ flex-direction: row;
+ justify-content: space-around;
+}
+
+.flex-box-rps img:hover{
+ box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);
+}