Skip to content

Commit 461451a

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #109 from RiyaGupta89/rock-paper-scissor
Added Rock paper scissor Game
2 parents aa50c27 + 9ce49da commit 461451a

File tree

7 files changed

+160
-0
lines changed

7 files changed

+160
-0
lines changed

‎Rock-Paper-Scissor Game/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Rock-Paper-Scissor Game 🗿 📜 ✂️
2+
3+
4+
*This Rock-Paper-Scissor Game allows you to play rock paper scissor with the computer. Have fun playing :)*
5+
6+
> Used Technologies
7+
- HTML
8+
- CSS
9+
- JAVASCRIPT
10+
11+
12+
### Steps to use:
13+
14+
- Download or clone the repositor
15+
`
16+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
17+
`
18+
19+
- Go to the directory
20+
- Run the index.html file
21+
- Start Playing!!!
22+
23+
<!-- image -->
24+

‎Rock-Paper-Scissor Game/images/paper.jpeg

16.9 KB
Loading

‎Rock-Paper-Scissor Game/images/rock.jpeg

18 KB
Loading

‎Rock-Paper-Scissor Game/images/scissors.jpeg

15.9 KB
Loading

‎Rock-Paper-Scissor Game/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Rock Paper Scissors Game</title>
9+
10+
</head>
11+
12+
<body>
13+
14+
<div class="container">
15+
<h2>Rock Paper Scissors</h2>
16+
<p id="startingPoint">Choose any one.</p>
17+
<div class="flex-box" id="flex-box-rps">
18+
<img src="images/rock.jpeg" alt="This is a rock image." id="rock" width="150px" height="150px"
19+
onclick="rpsGame(this)">
20+
<img src="images/paper.jpeg" alt="This is a paper image." id="paper" width="150px" height="150px"
21+
onclick="rpsGame(this)">
22+
<img src="images/scissors.jpeg" alt="This is a scissors image." id="scissors" width="150px" height="150px"
23+
onclick="rpsGame(this)">
24+
</div>
25+
</div>
26+
27+
28+
<script src="script.js"></script>
29+
30+
</body>
31+
32+
</html>

‎Rock-Paper-Scissor Game/script.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
2+
function rpsGame(yourChoice) {
3+
console.log(yourChoice);
4+
5+
var humanChoice, botChoice;
6+
humanChoice = yourChoice.id;
7+
var imgs = [document.getElementById("rock"), document.getElementById("paper"), document.getElementById("scissors")]
8+
botChoice = imgs[Math.floor(Math.random() * 3)];
9+
botChoice = botChoice.id;
10+
console.log('Computer choice:', botChoice);
11+
results = decideWinner(humanChoice, botChoice);
12+
console.log(results);
13+
message = finalMessage(results);
14+
15+
16+
rpsFrontend(yourChoice.id, botChoice, message);
17+
}
18+
19+
20+
function decideWinner(yourChoice, computerChoice) {
21+
var rpsDataBase = {
22+
'rock': { 'scissors': 1, 'rock': 0.5, 'paper': 0 },
23+
'paper': { 'rock': 1, 'paper': 0.5, 'scissors': 0 },
24+
'scissors': { 'paper': 1, 'scissors': 0.5, 'rock': 0 },
25+
}
26+
27+
var yourScore = rpsDataBase[yourChoice][computerChoice];
28+
var computerScore = rpsDataBase[computerChoice][yourChoice];
29+
30+
return [yourScore, computerScore];
31+
}
32+
33+
34+
function finalMessage([yourScore, computerScore]) {
35+
if (yourScore === 0) {
36+
return { 'message': "You lost!", 'color': 'red' };
37+
} else if (yourScore === 0.5) {
38+
return { 'message': "You tied!", 'color': 'yellow' };
39+
} else {
40+
return { 'message': "You won!", 'color': 'green' };
41+
}
42+
}
43+
44+
45+
46+
47+
function rpsFrontend(humanImageChoice, botImageChoice, finalMessage) {
48+
// console.log(yourChoice);
49+
var imagesDataBase = {
50+
'rock': document.getElementById("rock").src,
51+
'paper': document.getElementById("paper").src,
52+
'scissors': document.getElementById("scissors").src
53+
};
54+
55+
document.getElementById("startingPoint").remove();
56+
document.getElementById("rock").remove();
57+
document.getElementById("paper").remove();
58+
document.getElementById("scissors").remove();
59+
60+
var humanDiv = document.createElement('div');
61+
var messageDiv = document.createElement('div');
62+
var botDiv = document.createElement('div');
63+
64+
humanDiv.innerHTML = "<img src='" + imagesDataBase[humanImageChoice] + "' alt='error' width='150' height='150' style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
65+
document.getElementById("flex-box-rps").appendChild(humanDiv);
66+
messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] +"; font-size: 60px; padding: 30px; '>" + finalMessage['message'] + "</h1>";
67+
document.getElementById("flex-box-rps").appendChild(messageDiv);
68+
botDiv.innerHTML = "<img src='" + imagesDataBase[botImageChoice] + "' alt='error' width='150' height='150' style='box-shadow: 0px 10px 50px rgba(243, 38, 24, 1);'>"
69+
document.getElementById("flex-box-rps").appendChild(botDiv);
70+
71+
72+
}
73+

‎Rock-Paper-Scissor Game/style.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.container{
2+
border: 1px solid black;
3+
margin: 0 auto;
4+
text-align: center;
5+
width: 75%;
6+
}
7+
8+
.container h2{
9+
font-size: 40px;
10+
}
11+
12+
.container p{
13+
font-size: 30px;
14+
font-weight: bold;
15+
color: darkgray;
16+
}
17+
18+
.flex-box{
19+
/* border: 1px solid black; */
20+
display: flex;
21+
justify-content: space-around;
22+
flex-wrap: wrap;
23+
}
24+
img{
25+
margin: 20px;
26+
27+
}
28+
29+
img:hover{
30+
box-shadow: 0px 10px 50px rgba(70, 32, 231, 1);
31+
}

0 commit comments

Comments
 (0)