added rock-paper-scissors game

rituraj-abes · Oct 1, 2022 · 6732b2b · 6732b2b
1 parent 495c2f4
commit 6732b2b
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);
+}