Skip to content

Commit 23fc0e3

Browse files
kaal-coderkaal-coder
authored
Merge pull request #297 from subhasish-roy/rps-subhasish
added rock-paper-scissors game
2 parents 9b1ba20 + 8b8eed7 commit 23fc0e3

File tree

4 files changed

+231
-0
lines changed

4 files changed

+231
-0
lines changed

‎Fronted Projects/Rock-Paper-Scissors/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# I made a simple Rock-Paper-Scissors Game using HTML, CSS, JavaScript. It is a very beginner friendly project as the code written here is really easy to understand. You can have a look at the project...

‎Fronted Projects/Rock-Paper-Scissors/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>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div id="game_name">Rock Paper Scissors Game</div>
12+
13+
14+
<div id="direction">Choose your Move: </div>
15+
16+
17+
<div class="choices">
18+
19+
<button id="rock">&#x1F44A;</button>
20+
21+
<button id="paper">&#x1f590;</button>
22+
<button id="scissors">&#x270c;</button>
23+
</div>
24+
25+
26+
<div class="result">
27+
<p></p>
28+
</div>
29+
30+
<div class="score_board">
31+
<span class="score_board">Your Score: </span>
32+
<span id="user_score">0</span>
33+
<span class="score_board">Computer Score: </span>
34+
<span id="comp_score">0</span>
35+
</div>
36+
37+
38+
<script src="index.js"></script>
39+
</body>
40+
</html>

‎Fronted Projects/Rock-Paper-Scissors/index.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
let userScore=0;
2+
let compScore= 0;
3+
const userScore_span=document.getElementById("user_score");
4+
const compScore_span=document.getElementById("comp_score");
5+
const scoreBoard_div=document.querySelector(".score_board");
6+
const result_p=document.querySelector(".result>p");
7+
const rock_div=document.getElementById("rock")
8+
const paper_div=document.getElementById("paper")
9+
const scissors_div=document.getElementById("scissors")
10+
11+
function getComputerChoice(){
12+
const choices=['rock', 'paper', 'scissors'];
13+
const randomNumber=(Math.floor(Math.random()* 3));
14+
return choices[randomNumber];
15+
}
16+
17+
function convertToWord(letter){
18+
if(letter =="rock") return "Rock";
19+
if(letter =="paper") return "Paper";
20+
return "Scissors";
21+
}
22+
23+
//here we are making a function where the user wins
24+
function win(userChoice, compChoice){
25+
userScore++;
26+
userScore_span.innerHTML = userScore;
27+
compScore_span.innerHTML = compScore;
28+
result_p.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(compChoice)}. You WIN! :)`;
29+
30+
}
31+
32+
//here we are making a fuction where the user loses
33+
function lose(userChoice,compChoice){
34+
compScore++;
35+
userScore_span.innerHTML = userScore;
36+
compScore_span.innerHTML = compScore;
37+
result_p.innerHTML = `${convertToWord(userChoice)} loses to ${convertToWord(compChoice)}. You LOST! :(`;
38+
39+
}
40+
41+
//here we are making a function where the user and the computer ties
42+
function tie(userChoice,compChoice){
43+
result_p.innerHTML = `${convertToWord(userChoice)} equals ${convertToWord(compChoice)}. It's a DRAW!`;
44+
45+
}
46+
47+
function game(userChoice){
48+
const compChoice= getComputerChoice();
49+
50+
//here we are putting the winning conditions
51+
switch(userChoice + compChoice){
52+
case "rockscissors":
53+
case "paperrock":
54+
case "scissorspaper":
55+
win(userChoice, compChoice);
56+
break;
57+
58+
//here we are putting the losing conditions
59+
case "rockpaper":
60+
case "paperscissors":
61+
case "scissorsrock":
62+
lose(userChoice, compChoice);
63+
break;
64+
65+
//here we are putting the conditions for a draw
66+
case "rockrock":
67+
case "paperpaper":
68+
case "scissorsscissors":
69+
tie(userChoice, compChoice);
70+
break;
71+
}
72+
73+
}
74+
75+
76+
77+
78+
function main(){
79+
80+
81+
rock_div.addEventListener('click', function(){
82+
game("rock");
83+
})
84+
paper_div.addEventListener('click', function(){
85+
game("paper");
86+
})
87+
scissors_div.addEventListener('click', function(){
88+
game("scissors");
89+
})
90+
91+
}
92+
93+
main();

‎Fronted Projects/Rock-Paper-Scissors/style.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
body{
2+
background-color:rgb(117, 117, 198);
3+
font-family:"Arial",sans-serif;
4+
margin:0;
5+
padding:0;
6+
}
7+
8+
#game_name{
9+
color: rgb(0, 0, 0);
10+
font-weight: bold;
11+
font-size: 3em;
12+
text-align: center;
13+
margin-top: 50px;
14+
}
15+
16+
#direction{
17+
color: rgb(0, 0, 0);
18+
font-weight: bold;
19+
font-size: 1.5em;
20+
text-align: center;
21+
margin-top: 20px;
22+
margin-bottom: 20px;
23+
}
24+
25+
.choices{
26+
text-align: center;
27+
margin-top: 20px;
28+
display: flex;
29+
justify-content: center;
30+
flex-wrap: wrap;
31+
32+
}
33+
34+
35+
36+
37+
#rock{
38+
background-color:hsl(194, 86%, 67%);
39+
font-size: 4rem;
40+
margin: 0px 10px;
41+
border-radius: 55%;
42+
margin: 0px 10px;
43+
44+
45+
}
46+
#paper{
47+
background-color:hsl(114, 68%, 51%);
48+
font-size: 4rem;
49+
margin: 0px 10px;
50+
border-radius: 55%;
51+
52+
53+
54+
}
55+
#scissors{
56+
background-color:hsl(0, 98%, 59%);
57+
font-size: 4rem;
58+
margin: 0px 10px;
59+
border-radius: 55%;
60+
margin: 0px 10px;
61+
62+
}
63+
64+
.score_board{
65+
text-align: center;
66+
margin-top: 25px;
67+
font-weight: bold;
68+
font-size: 25px;
69+
color: rgb(22, 21, 21);
70+
margin-bottom: 50px;
71+
72+
}
73+
74+
.result{
75+
color: rgb(14, 14, 14);
76+
font-weight: bold;
77+
font-size: 1.9em;
78+
text-align: center;
79+
margin-top: 40px;
80+
81+
}
82+
83+
#user_score{
84+
color:rgb(8, 247, 44);
85+
text-align: center;
86+
margin-top: 25px;
87+
font-weight: bold;
88+
font-size: 25px;
89+
}
90+
#comp_score{
91+
color: rgb(165, 29, 29);
92+
text-align: center;
93+
margin-top: 25px;
94+
font-weight: bold;
95+
font-size: 25px;
96+
}
97+

0 commit comments

Comments
 (0)