Skip to content

Commit 07a1687

Browse files
sahandghavidelsahandghavidel
committed
update Rock Paper Scissors Game project
1 parent 0c0e315 commit 07a1687

File tree

3 files changed

+45
-66
lines changed

3 files changed

+45
-66
lines changed

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

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Rock Paper Scissors</title>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<link rel="stylesheet" type="text/css" href="style.css" />
8-
</head>
9-
<body>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Rock Paper Scissors Game</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
1011
<h1>Rock Paper Scissors Game</h1>
1112
<p>Choose your move:</p>
1213
<div class="buttons">
13-
<button id="rock">&#x1F44A;</button>
14-
<button id="paper">&#x1F590;</button>
15-
<button id="scissors">&#x270C;</button>
16-
17-
<!-- HTML entities are used to display the icons. -->
14+
<button id="rock">&#x1F44A;</button>
15+
<button id="paper">&#x1f590;</button>
16+
<button id="scissors">&#x270c;</button>
1817
</div>
1918
<p id="result"></p>
2019
<p id="scores">
21-
Your score: <span id="player-score">0</span> Computer's score:
22-
<span id="computer-score">0</span>
20+
Your score: <span id="user-score">0</span>
21+
Computer score: <span id="computer-score">0</span>
2322
</p>
24-
2523
<script src="index.js"></script>
26-
</body>
27-
</html>
24+
</body>
25+
</html>

‎projects/rock-paper-scissors-game/index.js‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,42 @@
11
const buttons = document.querySelectorAll("button");
2+
3+
const resultEl = document.getElementById("result");
4+
5+
const playerScoreEl = document.getElementById("user-score");
6+
7+
const computerScoreEl = document.getElementById("computer-score");
8+
29
let playerScore = 0;
310
let computerScore = 0;
411

512
buttons.forEach((button) => {
613
button.addEventListener("click", () => {
7-
playRound(button.id, computerPlay());
14+
const result = playRound(button.id, computerPlay());
15+
resultEl.textContent = result;
16+
817
});
918
});
1019

1120
function computerPlay() {
1221
const choices = ["rock", "paper", "scissors"];
13-
return choices[Math.floor(Math.random() * choices.length)];
22+
const randomChoice = Math.floor(Math.random() * choices.length);
23+
return choices[randomChoice];
1424
}
1525

1626
function playRound(playerSelection, computerSelection) {
1727
if (playerSelection === computerSelection) {
18-
document.getElementById("result").textContent = "Tie game!";
28+
return "It's a tie!";
1929
} else if (
2030
(playerSelection === "rock" && computerSelection === "scissors") ||
2131
(playerSelection === "paper" && computerSelection === "rock") ||
2232
(playerSelection === "scissors" && computerSelection === "paper")
2333
) {
2434
playerScore++;
25-
document.getElementById(
26-
"result"
27-
).textContent = `You win! ${playerSelection} beats ${computerSelection}`;
35+
playerScoreEl.textContent = playerScore;
36+
return "You win! " + playerSelection + " beats " + computerSelection;
2837
} else {
2938
computerScore++;
30-
document.getElementById(
31-
"result"
32-
).textContent = `You lose! ${computerSelection} beats ${playerSelection}`;
39+
computerScoreEl.textContent = computerScore;
40+
return "You lose! " + computerSelection + " beats " + playerSelection;
3341
}
34-
updateScore();
35-
}
36-
37-
function updateScore() {
38-
document.getElementById(
39-
"player-score"
40-
).textContent = `Your score: ${playerScore}`;
41-
document.getElementById(
42-
"computer-score"
43-
).textContent = `Computer's score: ${computerScore}`;
4442
}

‎projects/rock-paper-scissors-game/style.css‎

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
* {
2-
box-sizing: border-box;
3-
}
4-
51
body {
62
background-color: #f1f1f1;
7-
font-family: Arial, sans-serif;
3+
font-family: "Arial", sans-serif;
84
margin: 0;
95
padding: 0;
106
}
@@ -16,9 +12,10 @@ h1 {
1612
}
1713

1814
p {
19-
font-size: 1.2rem;
20-
margin-bottom: 0.5rem;
15+
font-size: 1.5rem;
16+
font-weight: 600;
2117
text-align: center;
18+
margin-bottom: 0.5rem;
2219
}
2320

2421
.buttons {
@@ -28,12 +25,11 @@ p {
2825

2926
button {
3027
border: none;
31-
border-radius: 5px;
32-
color: white;
33-
cursor: pointer;
3428
font-size: 3rem;
3529
margin: 0 0.5rem;
3630
padding: 0.5rem;
31+
cursor: pointer;
32+
border-radius: 5px;
3733
transition: all 0.3s ease-in-out;
3834
}
3935

@@ -42,34 +38,21 @@ button:hover {
4238
}
4339

4440
#rock {
45-
background-color: #f44336; /* Red */
41+
background-color: #ff0000;
4642
}
4743

4844
#paper {
49-
background-color: #2196f3; /* Blue */
45+
background-color: #2196f3;
5046
}
5147

5248
#scissors {
53-
background-color: #4caf50; /* Green */
54-
}
55-
56-
#result {
57-
font-size: 1.5rem;
58-
font-weight: bold;
59-
margin: 1rem 0;
60-
}
61-
62-
#scores {
63-
font-size: 1.2rem;
64-
font-weight: bold;
65-
text-align: center;
49+
background-color: #4caf50;
6650
}
6751

68-
#player-score {
69-
color: #4caf50;
70-
margin-right: 0.5rem;
52+
#user-score {
53+
color: #2196f3;
7154
}
7255

7356
#computer-score {
74-
color: #f44336;
57+
color: #ff0000;
7558
}

0 commit comments

Comments
 (0)