Skip to content

Commit a06ee28

Browse files
Hrishikesh-DalalHrishikesh-Dalal
authored
Merge pull request #52 from SahasOP/rock-paper-scissors-game
Rock-Paper-Scissors: Initial game implementation
2 parents c7b46be + 587b779 commit a06ee28

3 files changed

Lines changed: 193 additions & 18 deletions

File tree

‎projects/rock-paper-scissors/index.html‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,18 @@
99
<body>
1010
<h1>Rock-Paper-Scissors Game</h1>
1111
<div id="rps-container">
12-
<!-- TODO: Buttons for Rock, Paper, Scissors -->
13-
<!-- TODO: Display user and computer choices -->
14-
<!-- TODO: Show result (win/lose/draw) -->
15-
<!-- TODO: Scoreboard for user and computer -->
16-
<!-- TODO: Option to restart game -->
12+
<div class="btn-group">
13+
<button class="rps-btn" data-choice="rock">Rock</button>
14+
<button class="rps-btn" data-choice="paper">Paper</button>
15+
<button class="rps-btn" data-choice="scissors">Scissors</button>
16+
</div>
17+
<div id="display-choices"></div>
18+
<div id="result"></div>
19+
<div id="scoreboard">
20+
<span id="user-score">0</span> : <span id="computer-score">0</span>
21+
</div>
22+
<button id="restart-btn">Restart</button>
1723
</div>
1824
<script src="main.js"></script>
1925
</body>
20-
</html>
26+
</html>

‎projects/rock-paper-scissors/main.js‎

Lines changed: 72 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,75 @@
1-
// TODO: Handle user selection (rock, paper, scissors)
2-
// TODO: Generate computer choice
3-
// TODO: Determine winner/loser/draw
4-
// TODO: Update and display scoreboard
5-
// TODO: Restart game functionality
6-
71
function initRockPaperScissors() {
8-
// TODO: Handle user choice
9-
// TODO: Generate computer choice
10-
// TODO: Determine winner
11-
// TODO: Update scoreboard
2+
const choices = ["rock", "paper", "scissors"];
3+
let userScore = 0;
4+
let computerScore = 0;
5+
6+
const userScoreSpan = document.getElementById("user-score");
7+
const computerScoreSpan = document.getElementById("computer-score");
8+
const resultDiv = document.getElementById("result");
9+
const displayChoicesDiv = document.getElementById("display-choices");
10+
const btns = document.querySelectorAll(".rps-btn");
11+
const restartBtn = document.getElementById("restart-btn");
12+
13+
function getComputerChoice() {
14+
return choices[Math.floor(Math.random() * 3)];
15+
}
16+
17+
function getResult(user, computer) {
18+
if (user === computer) return "draw";
19+
if (
20+
(user === "rock" && computer === "scissors") ||
21+
(user === "paper" && computer === "rock") ||
22+
(user === "scissors" && computer === "paper")
23+
)
24+
return "win";
25+
return "lose";
26+
}
27+
28+
function displayScores() {
29+
userScoreSpan.textContent = userScore;
30+
computerScoreSpan.textContent = computerScore;
31+
}
32+
33+
function handleClick(e) {
34+
const userChoice = e.target.dataset.choice;
35+
const computerChoice = getComputerChoice();
36+
const outcome = getResult(userChoice, computerChoice);
37+
displayChoicesDiv.textContent = `You: ${capitalize(
38+
userChoice
39+
)} | Computer: ${capitalize(computerChoice)}`;
40+
if (outcome === "win") {
41+
userScore++;
42+
resultDiv.textContent = "You win!";
43+
resultDiv.style.color = "#349946";
44+
} else if (outcome === "lose") {
45+
computerScore++;
46+
resultDiv.textContent = "You lose!";
47+
resultDiv.style.color = "#d43d29";
48+
} else {
49+
resultDiv.textContent = "It's a draw!";
50+
resultDiv.style.color = "#4078b3";
51+
}
52+
displayScores();
53+
}
54+
55+
function capitalize(str) {
56+
return str.charAt(0).toUpperCase() + str.slice(1);
57+
}
58+
59+
btns.forEach((btn) => {
60+
btn.addEventListener("click", handleClick);
61+
});
62+
63+
restartBtn.addEventListener("click", function () {
64+
userScore = 0;
65+
computerScore = 0;
66+
displayScores();
67+
resultDiv.textContent = "";
68+
displayChoicesDiv.textContent = "";
69+
});
70+
71+
// Initial score display
72+
displayScores();
1273
}
1374

14-
window.addEventListener('DOMContentLoaded', initRockPaperScissors);
75+
window.addEventListener("DOMContentLoaded", initRockPaperScissors);

‎projects/rock-paper-scissors/styles.css‎

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,109 @@
1-
/* TODO: Style RPS container, buttons, choices display, scoreboard, restart button */
1+
body {
2+
font-family: "Segoe UI", Arial, sans-serif;
3+
background: linear-gradient(120deg, #e0e7ff, #f5f5fa 60%);
4+
margin: 0;
5+
min-height: 100vh;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
}
10+
11+
h1 {
12+
text-align: center;
13+
color: #2744ae;
14+
margin-top: 2.2em;
15+
font-weight: 700;
16+
letter-spacing: 0.5px;
17+
}
18+
19+
#rps-container {
20+
background: #fff;
21+
padding: 2em 2.5em 2.2em 2.5em;
22+
border-radius: 15px;
23+
box-shadow: 0 6px 24px #d0d7eacc;
24+
max-width: 340px;
25+
width: 90vw;
26+
margin: 1.4em auto 0 auto;
27+
text-align: center;
28+
}
29+
30+
.btn-group {
31+
margin-bottom: 1em;
32+
display: flex;
33+
justify-content: center;
34+
gap: 1em;
35+
}
36+
37+
.rps-btn {
38+
background: #f1f4ff;
39+
border: 2px solid #dbeafe;
40+
border-radius: 8px;
41+
padding: 0.7em 1.5em;
42+
font-size: 1.08em;
43+
color: #2252ba;
44+
font-weight: 500;
45+
cursor: pointer;
46+
transition: background 0.15s, border-color 0.15s, color 0.15s;
47+
box-shadow: 0 1px 3px #eee;
48+
}
49+
50+
.rps-btn:hover,
51+
.rps-btn:focus {
52+
background: #e0eaff;
53+
border-color: #7da9f2;
54+
color: #2744ae;
55+
outline: none;
56+
}
57+
58+
#display-choices {
59+
font-size: 1.09em;
60+
margin-bottom: 0.7em;
61+
color: #395e9d;
62+
min-height: 1.4em;
63+
}
64+
65+
#result {
66+
font-weight: 600;
67+
font-size: 1.18em;
68+
min-height: 2em;
69+
margin-bottom: 0.5em;
70+
}
71+
72+
#scoreboard {
73+
font-size: 1.24em;
74+
font-weight: 500;
75+
margin: 1em 0 1em 0;
76+
color: #1a851a;
77+
letter-spacing: 1.5px;
78+
}
79+
80+
#restart-btn {
81+
background: #5078f0;
82+
color: #fff;
83+
border: none;
84+
border-radius: 8px;
85+
padding: 0.58em 1.6em;
86+
font-size: 1.09em;
87+
cursor: pointer;
88+
margin-top: 0.8em;
89+
box-shadow: 0 1px 4px #e5e9fc;
90+
transition: background 0.18s;
91+
font-weight: 500;
92+
}
93+
94+
#restart-btn:hover,
95+
#restart-btn:focus {
96+
background: #2445a2;
97+
outline: none;
98+
}
99+
100+
@media (max-width: 480px) {
101+
#rps-container {
102+
padding: 1.1em 0.8em 1.4em 0.8em;
103+
max-width: 96vw;
104+
}
105+
106+
.btn-group {
107+
gap: 0.5em;
108+
}
109+
}

0 commit comments

Comments
 (0)