Skip to content

Commit 03b18f8

Browse files
iamwatchdogsiamwatchdogs
authored
PR#4: Rock-Paper-Scissors Game
Rock-Paper-Scissors Game Merge pull request #4 from gauravbhaskar080/Tic-Tac-Toe
2 parents 6000788 + a61b802 commit 03b18f8

File tree

9 files changed

+314
-0
lines changed

9 files changed

+314
-0
lines changed

‎Rock-Paper-Scissors-Game/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
## Rock Paper Scissors Game
2+
3+
This is a simple web-based Rock Paper Scissors game where users can play against the computer. The game has a visually appealing interface and is built using HTML, CSS, and JavaScript.
4+
5+
### Table of Contents
6+
- [Setup](#setup)
7+
- [Usage](#usage)
8+
- [Code Structure](#code-structure)
9+
- [Contributing](#contributing)
10+
- [License](#license)
11+
12+
### Setup
13+
14+
1. **Clone the repository:**
15+
16+
```bash
17+
git clone https://github.com/gauravbhaskar080/Rock-Paper-Scissors-Game.git
18+
```
19+
20+
2. **Open the project:**
21+
22+
Navigate to the project directory.
23+
24+
```bash
25+
cd Rock-Paper-Scissors-Game
26+
```
27+
28+
3. **Open `index.html`:**
29+
30+
Right-click on `index.html` and open it with your preferred web browser.
31+
32+
### Usage
33+
34+
- Upon opening the game, users are presented with a visually appealing interface where they can see computer and user choices.
35+
- Users can click on the Rock, Paper, or Scissors buttons to make their choice.
36+
- The computer's choice is generated randomly.
37+
- The result of the game (win, lose, or draw) is displayed along with the respective icons.
38+
- The game also provides a navigation bar with the title "ROCK PAPER SCISSORS GAME" for easy navigation.
39+
40+
### Code Structure
41+
42+
- `index.html`: The main HTML file that contains the structure of the game interface.
43+
- `style.css`: The CSS file that provides the styling for the game.
44+
- `app.js`: The JavaScript file responsible for the game logic and interactivity.
45+
46+
### Contributing
47+
48+
If you'd like to contribute to this project, please follow these steps:
49+
50+
1. Fork the repository.
51+
2. Create a new branch for your feature or bug fix.
52+
3. Make your changes and commit them with descriptive messages.
53+
4. Push your changes to your forked repository.
54+
5. Create a pull request to the original repository.
55+
56+
### License
57+
58+
This project is licensed under the [MIT License](LICENSE). Feel free to use, modify, and distribute the code for your own purposes.
59+
60+
---

‎Rock-Paper-Scissors-Game/app.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const computerChoiceDisplay = document.getElementById('computer-choice');
2+
const userChoiceDisplay = document.getElementById('user-choice');
3+
const resultDisplay = document.getElementById('winner');
4+
const possibleChoices = document.querySelectorAll('.button-container > img');
5+
6+
let userChoice;
7+
let computerChoice;
8+
let result;
9+
10+
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
11+
userChoice = e.target.alt;
12+
userChoiceDisplay.src = e.target.src;
13+
generateComputerChoice();
14+
getResult();
15+
}));
16+
17+
function generateComputerChoice() {
18+
const randomNumber = Math.floor(Math.random() * possibleChoices.length);
19+
20+
computerChoice = possibleChoices[randomNumber].alt;
21+
computerChoiceDisplay.src = possibleChoices[randomNumber].src;
22+
}
23+
24+
function getResult() {
25+
if (computerChoice === userChoice) {
26+
result = "It's a draw";
27+
resultDisplay.innerHTML = result;
28+
resultDisplay.className = "it-s-a-draw";
29+
} else if (
30+
(computerChoice === 'Rock' && userChoice === 'Paper') ||
31+
(computerChoice === 'Scissors' && userChoice === 'Rock') ||
32+
(computerChoice === 'Paper' && userChoice === 'Scissors')
33+
) {
34+
result = 'You win!';
35+
resultDisplay.innerHTML = `<img src="./public/gamer.png" alt="Gamer" style="width: 10%;">`;
36+
resultDisplay.className = "you-win";
37+
} else {
38+
result = 'You lose!';
39+
resultDisplay.innerHTML = `<img src="./public/computer.png" alt="Computer" style="width: 10%;">`;
40+
resultDisplay.className = "you-lose";
41+
}
42+
}
43+

‎Rock-Paper-Scissors-Game/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Rock Paper Scissors Tutorial</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<nav>ROCK PAPER SCISSORS GAME</nav>
10+
<div class="choice-container">
11+
<div>
12+
<h2> <img src="./public/computer.png" alt="" class="logo"> <br> Computer Choice</h2>
13+
<img id="computer-choice" src="" >
14+
</div>
15+
<div>
16+
<h2> <img src="./public/gamer.png" alt="" class="logo"> <br> User Choice</h2>
17+
<img id="user-choice" src="" >
18+
</div>
19+
</div>
20+
21+
<div class="button-container">
22+
<img id="Rock" src="./public/rock.png" alt="Rock"><br>
23+
<img id="Paper" src="./public/paper.png" alt="Paper">
24+
<img id="Scissors" src="./public/scissors.png" alt="Scissors">
25+
</div>
26+
27+
<div class="winner-container">
28+
<h2>Winner:</h2>
29+
<span id="winner" class="result-text"></span>
30+
</div>
31+
32+
<footer>&copy; 2023, Made By Gaurav Bhaskar</footer>
33+
34+
<script src="app.js"></script>
35+
</body>
36+
</html>

‎Rock-Paper-Scissors-Game/public/computer.png‎

9.31 KB
Loading

‎Rock-Paper-Scissors-Game/public/gamer.png‎

35.5 KB
Loading

‎Rock-Paper-Scissors-Game/public/paper.png‎

5.43 KB
Loading

‎Rock-Paper-Scissors-Game/public/rock.png‎

28.5 KB
Loading

‎Rock-Paper-Scissors-Game/public/scissors.png‎

35.4 KB
Loading

‎Rock-Paper-Scissors-Game/style.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
body {
2+
background-color: #eec6c6;
3+
font-family: 'Arial', sans-serif;
4+
text-align: center;
5+
background-image: linear-gradient(to bottom, #f9b4c2, #ffdb86);
6+
color: #ffffff;
7+
position: relative;
8+
min-height: 91.5vh;
9+
margin: 0;
10+
padding-bottom: 60px;
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
15+
body::before {
16+
content: '';
17+
position: fixed;
18+
top: 0;
19+
left: 0;
20+
width: 100%;
21+
height: 100%;
22+
background-image: radial-gradient(ellipse at center, rgba(246, 231, 231, 0.813) 0%, rgba(0,0,0,0.9) 100%);
23+
z-index: -1;
24+
}
25+
26+
27+
h1 {
28+
font-size: 36px;
29+
font-weight: bold;
30+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
31+
margin-bottom: 20px;
32+
}
33+
34+
h2 {
35+
color: #ffffff;
36+
font-size: 24px;
37+
font-weight: bold;
38+
margin-bottom: 20px;
39+
}
40+
41+
#computer-choice,
42+
#user-choice,
43+
#result {
44+
color: #ff6f00;
45+
font-weight: bold;
46+
width: 10%;
47+
}
48+
49+
button {
50+
background-color: #4caf50;
51+
color: #ffffff;
52+
border: none;
53+
padding: 10px 20px;
54+
font-size: 16px;
55+
cursor: pointer;
56+
transition: background-color 0.3s ease;
57+
}
58+
59+
button:hover {
60+
background-color: #45a049;
61+
}
62+
63+
.choice-container {
64+
display: flex;
65+
justify-content: space-between;
66+
margin-bottom: 20px;
67+
}
68+
69+
.choice-container > div {
70+
flex-basis: 45%;
71+
}
72+
73+
.button-container {
74+
display: flex;
75+
justify-content: center;
76+
margin-bottom: 20px;
77+
78+
}
79+
80+
.button-container > button {
81+
margin: 0 10px;
82+
padding: 10px 20px;
83+
font-size: 16px;
84+
font-weight: bold;
85+
background-color: #ff6f00;
86+
color: #ffffff;
87+
border: none;
88+
cursor: pointer;
89+
border-radius: 5px;
90+
transition: background-color 0.3s ease;
91+
}
92+
93+
.button-container > button:hover {
94+
background-color: #ff4d00;
95+
}
96+
97+
.button-container > button > img {
98+
max-width: 100%;
99+
max-height: 100%;
100+
}
101+
102+
.choice-container {
103+
display: flex;
104+
justify-content: space-between;
105+
margin-bottom: 20px;
106+
}
107+
108+
.choice-container > div {
109+
flex-basis: 45%;
110+
}
111+
112+
.winner-container {
113+
margin-top: 20px;
114+
font-size: 24px;
115+
font-weight: bold;
116+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
117+
}
118+
119+
.result-text {
120+
color: #333333; /* Default color for the result text */
121+
}
122+
123+
.result-text.you-win {
124+
color: #42b72a; /* Green color for winning */
125+
}
126+
127+
.result-text.you-lose {
128+
color: #c71e1e; /* Red color for losing */
129+
}
130+
131+
.result-text.it-s-a-draw {
132+
color: #333333; /* Default color for draw */
133+
}
134+
135+
nav {
136+
padding: 10px;
137+
background-color: #ff8c00; /* Orange color */
138+
border-radius: 10px;
139+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
140+
margin-bottom: 20px;
141+
color: #ffffff; /* Text color for better contrast */
142+
font-weight: bold;
143+
text-align: center;
144+
font-size: 18px;
145+
}
146+
147+
148+
.button-container>img{
149+
width: 10%;
150+
margin: 0 10px;
151+
cursor: pointer;
152+
153+
}
154+
155+
.logo{
156+
width: 20%;
157+
}
158+
159+
footer {
160+
background-color: #f1f1f1;
161+
color: #333333;
162+
text-align: center;
163+
padding: 10px;
164+
position: absolute;
165+
bottom: 0;
166+
width: 98.7%;
167+
}
168+
169+
#Rock , #Paper, #Scissors{
170+
margin: 5%;
171+
}
172+
173+
#winner{
174+
width: 5px;
175+
}

0 commit comments

Comments
 (0)