Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit07a1687

Browse files
update Rock Paper Scissors Game project
1 parent0c0e315 commit07a1687

File tree

3 files changed

+45
-66
lines changed

3 files changed

+45
-66
lines changed
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-
<metacharset="UTF-8"/>
6-
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7-
<linkrel="stylesheet"type="text/css"href="style.css"/>
8-
</head>
9-
<body>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
7+
<title>Rock Paper Scissors Game</title>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
1011
<h1>Rock Paper Scissors Game</h1>
1112
<p>Choose your move:</p>
1213
<divclass="buttons">
13-
<buttonid="rock">&#x1F44A;</button>
14-
<buttonid="paper">&#x1F590;</button>
15-
<buttonid="scissors">&#x270C;</button>
16-
17-
<!-- HTML entities are used to display the icons. -->
14+
<buttonid="rock">&#x1F44A;</button>
15+
<buttonid="paper">&#x1f590;</button>
16+
<buttonid="scissors">&#x270c;</button>
1817
</div>
1918
<pid="result"></p>
2019
<pid="scores">
21-
Your score:<spanid="player-score">0</span> Computer's score:
22-
<spanid="computer-score">0</span>
20+
Your score:<spanid="user-score">0</span>
21+
Computer score:<spanid="computer-score">0</span>
2322
</p>
24-
2523
<scriptsrc="index.js"></script>
26-
</body>
27-
</html>
24+
</body>
25+
</html>
Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,42 @@
11
constbuttons=document.querySelectorAll("button");
2+
3+
constresultEl=document.getElementById("result");
4+
5+
constplayerScoreEl=document.getElementById("user-score");
6+
7+
constcomputerScoreEl=document.getElementById("computer-score");
8+
29
letplayerScore=0;
310
letcomputerScore=0;
411

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

1120
functioncomputerPlay(){
1221
constchoices=["rock","paper","scissors"];
13-
returnchoices[Math.floor(Math.random()*choices.length)];
22+
constrandomChoice=Math.floor(Math.random()*choices.length);
23+
returnchoices[randomChoice];
1424
}
1525

1626
functionplayRound(playerSelection,computerSelection){
1727
if(playerSelection===computerSelection){
18-
document.getElementById("result").textContent="Tie game!";
28+
return"It's a tie!";
1929
}elseif(
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-
functionupdateScore(){
38-
document.getElementById(
39-
"player-score"
40-
).textContent=`Your score:${playerScore}`;
41-
document.getElementById(
42-
"computer-score"
43-
).textContent=`Computer's score:${computerScore}`;
4442
}
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:00.5rem;
3630
padding:0.5rem;
31+
cursor: pointer;
32+
border-radius:5px;
3733
transition: all0.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:1rem0;
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)
[8]ページ先頭
©2009-2025 Movatter.jp