Skip to content

Commit 0271107

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1131 from gururaj1512/master
Gururaj Gurram - Rock Paper Scissors Game
2 parents 3f5d8ba + d02e069 commit 0271107

File tree

9 files changed

+246
-0
lines changed

9 files changed

+246
-0
lines changed

‎RockPaperScissorsGame/Rock Paper Scissor/Rock-Paper-Scissors/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Rock-Paper-Scissors
2+
Dive into the classic game of Rock, Paper, Scissors with our interactive and fun GitHub repository. Whether you're a coding enthusiast looking for a cool project or just want to enjoy a quick game, this repository has got you covered.
3+
4+
### Game Preview
5+
[ROCK-PAPER_SCISSORS](https://663a40d74d4edd0e83db6ec3--dapper-kangaroo-b959cd.netlify.app/)
6+
7+
![alt text](image.png)
8+
![alt text](image-1.png)

‎RockPaperScissorsGame/Rock Paper Scissor/Rock-Paper-Scissors/image-1.png‎

77.2 KB
Loading

‎RockPaperScissorsGame/Rock Paper Scissor/Rock-Paper-Scissors/image.png‎

75.6 KB
Loading

‎RockPaperScissorsGame/Rock Paper Scissor/images/paper.png‎

424 Bytes
Loading

‎RockPaperScissorsGame/Rock Paper Scissor/images/rock.png‎

1.48 KB
Loading

‎RockPaperScissorsGame/Rock Paper Scissor/images/scissor.png‎

1.14 KB
Loading

‎RockPaperScissorsGame/Rock Paper Scissor/index.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Asap:wght@100&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: Asap, sans-serif;
7+
}
8+
9+
:root{
10+
--background: #292c34;
11+
}
12+
13+
body{
14+
background-color: var(--background);
15+
}
16+
17+
header{
18+
background: white;
19+
padding : 20px;
20+
}
21+
22+
header > h1{
23+
color: var(--background);
24+
text-align: center;
25+
font-family: Asap, sans-serif;
26+
}
27+
28+
.score-board{
29+
margin: 20px auto;
30+
border: 3px solid white;
31+
border-radius: 4px;
32+
text-align: center;
33+
width: 200px;
34+
color: white;
35+
font-size: 46px;
36+
font-weight: 600;
37+
padding: 15px 20px;
38+
position: relative;
39+
}
40+
41+
.badge{
42+
background: #E2584D;
43+
color: white;
44+
font-size: 14px;
45+
padding: 2px 10px;
46+
}
47+
48+
#user-label{
49+
position: absolute;
50+
top: 30px;
51+
left: -25px;
52+
}
53+
54+
#computer-label{
55+
position: absolute;
56+
top: 30px;
57+
right: -25px;
58+
}
59+
60+
.result{
61+
font-size: 40px;
62+
color: white;
63+
}
64+
65+
.result > p{
66+
text-align: center;
67+
font-weight: bold;
68+
}
69+
70+
.choices{
71+
margin: 50px 0;
72+
text-align: center;
73+
}
74+
75+
.choice{
76+
display: inline-block;
77+
border: 4px solid white;
78+
border-radius: 50%;
79+
padding: 15px;
80+
margin: 0 20px;
81+
transition: all 0.2s ease;
82+
}
83+
84+
.choice:hover{
85+
background-color: #1a1e29;
86+
cursor: pointer;
87+
}
88+
89+
.img{
90+
filter: invert();
91+
}
92+
93+
#action-message{
94+
text-align: center;
95+
color: white;
96+
font-size: 20px;
97+
}
98+
99+
100+
.green-glow{
101+
border: 4px solid green;
102+
box-shadow: 0 0 10px darkgreen;
103+
}
104+
105+
.red-glow{
106+
border: 4px solid red;
107+
box-shadow: 0 0 10px darkred;
108+
}
109+
110+
.grey-glow{
111+
border: 4px solid grey;
112+
box-shadow: 0 0 10px rgb(50, 50, 50);
113+
}

‎RockPaperScissorsGame/Rock Paper Scissor/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Rock Paper Scissor Game</title>
7+
<link rel="stylesheet" href="index.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Rock Paper Scissor</h1>
12+
</header>
13+
14+
<div class="score-board">
15+
<div class="badge" id="user-label">user</div>
16+
<div class="badge" id="computer-label">comp</div>
17+
<span id="user-score">0</span>:<span id="computer-score">0</span>
18+
</div>
19+
20+
<div class="result">
21+
<p>Paper covers rock. You win!</p>
22+
</div>
23+
24+
<div class="choices">
25+
<div class="choice" id="r">
26+
<img src="images/rock.png" alt="rock" class="img">
27+
</div>
28+
<div class="choice" id="p">
29+
<img src="images/paper.png" alt="paper" class="img">
30+
</div>
31+
<div class="choice" id="s">
32+
<img src="images/scissor.png" alt="scissor" class="img">
33+
</div>
34+
</div>
35+
36+
<p id="action-message">Make your move</p>
37+
38+
<script src="index.js" charset="UTF-8"></script>
39+
</body>
40+
</html>

‎RockPaperScissorsGame/Rock Paper Scissor/index.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
let userScore = 0;
2+
let computerScore = 0;
3+
const userScore_span = document.getElementById("user-score");
4+
const computerScore_span = document.getElementById("computer-score");
5+
const scoreBoard_div = document.querySelector(".scoreboard");
6+
const result_p = document.querySelector(".result > p");
7+
const rock_div = document.getElementById("r");
8+
const paper_div = document.getElementById("p");
9+
const scissor_div = document.getElementById("s");
10+
11+
function getComputerChoice() {
12+
const choices = ['r', 'p', 's'];
13+
const randomNumber = Math.floor(Math.random() * 3);
14+
return choices[randomNumber]
15+
}
16+
17+
function convertToWord(letter) {
18+
if (letter === "r") return "Rock";
19+
if (letter === "p") return "Paper";
20+
return "Scissor";
21+
}
22+
23+
function win(userChoice, computerChoice) {
24+
const smallUserWord = "user".fontsize(3).sub();
25+
const smallCompWord = "comp".fontsize(3).sub();
26+
const userChoice_div = document.getElementById(userChoice);
27+
userScore++;
28+
userScore_span.innerHTML = userScore;
29+
computerScore_span.innerHTML = computerScore;
30+
result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord}. You win!`;
31+
userChoice_div.classList.add('green-glow');
32+
setTimeout(() => userChoice_div.classList.remove('green-glow'), 300);
33+
}
34+
35+
function lose(userChoice, computerChoice) {
36+
const smallUserWord = "user".fontsize(3).sub();
37+
const smallCompWord = "comp".fontsize(3).sub();
38+
const userChoice_div = document.getElementById(userChoice);
39+
computerScore++;
40+
userScore_span.innerHTML = userScore;
41+
computerScore_span.innerHTML = computerScore;
42+
result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord}. You Lost..!`;
43+
userChoice_div.classList.add('red-glow');
44+
setTimeout(() => userChoice_div.classList.remove('red-glow'), 300);
45+
}
46+
47+
function draw(userChoice, computerChoice) {
48+
const smallUserWord = "user".fontsize(3).sub();
49+
const smallCompWord = "comp".fontsize(3).sub();
50+
const userChoice_div = document.getElementById(userChoice);
51+
result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} equals ${convertToWord(computerChoice)}${smallCompWord}. It's a draw.`;
52+
userChoice_div.classList.add('grey-glow');
53+
setTimeout(() => userChoice_div.classList.remove('grey-glow'), 300);
54+
}
55+
56+
function game(userChoice) {
57+
const computerChoice = getComputerChoice();
58+
switch (userChoice + computerChoice) {
59+
case "rs":
60+
case "sp":
61+
case "pr":
62+
win(userChoice, computerChoice);
63+
break;
64+
case "sr":
65+
case "ps":
66+
case "rp":
67+
lose(userChoice, computerChoice);
68+
break;
69+
case "rr":
70+
case "pp":
71+
case "ss":
72+
draw(userChoice, computerChoice);
73+
break;
74+
}
75+
}
76+
77+
function main() {
78+
79+
rock_div.addEventListener('click', () => game("r"))
80+
paper_div.addEventListener('click', () => game("p"))
81+
scissor_div.addEventListener('click', () => game("s"))
82+
83+
}
84+
85+
main();

0 commit comments

Comments
 (0)