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

Commit6d61e9c

Browse files
update roll dice simulator
1 parent0643a11 commit6d61e9c

File tree

3 files changed

+38
-34
lines changed

3 files changed

+38
-34
lines changed
Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<!DOCTYPE html>
2-
<html>
2+
<htmllang="en">
33
<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"/>
47
<title>Dice Roll Simulator</title>
58
<linkrel="stylesheet"href="style.css"/>
69
</head>
710
<body>
811
<h1>Dice Roll Simulator</h1>
9-
<divid="dice"class="dice">⚀</div>
12+
<divclass="dice"id="dice">&#9860;</div>
1013
<buttonid="roll-button">Roll Dice</button>
1114
<ulid="roll-history">
12-
<li>Roll 1:<span>&#9856;</span></li>
13-
<li>Roll 2:<span>&#9856;</span></li>
15+
<!-- <li>Roll 1: <span>&#9856;</span></li>
16+
<li>Roll 2: <span>&#9860;</span></li> -->
1417
</ul>
15-
16-
<scriptsrc="dice-roll.js"></script>
18+
<scriptsrc="index.js"></script>
1719
</body>
1820
</html>
Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,53 @@
1-
constdiceElement=document.getElementById("dice");
2-
constrollButton=document.getElementById("roll-button");
3-
constrollHistory=document.getElementById("roll-history");
1+
constbuttonEl=document.getElementById("roll-button");
2+
3+
constdiceEl=document.getElementById("dice");
4+
5+
constrollHistoryEl=document.getElementById("roll-history");
6+
47
lethistoryList=[];
58

69
functionrollDice(){
710
constrollResult=Math.floor(Math.random()*6)+1;
811
constdiceFace=getDiceFace(rollResult);
9-
diceElement.textContent=diceFace;
12+
diceEl.innerHTML=diceFace;
1013
historyList.push(rollResult);
1114
updateRollHistory();
1215
}
1316

17+
functionupdateRollHistory(){
18+
rollHistoryEl.innerHTML="";
19+
for(leti=0;i<historyList.length;i++){
20+
constlistItem=document.createElement("li");
21+
listItem.innerHTML=`Roll${i+1}: <span>${getDiceFace(
22+
historyList[i]
23+
)}</span>`;
24+
rollHistoryEl.appendChild(listItem);
25+
}
26+
}
27+
1428
functiongetDiceFace(rollResult){
1529
switch(rollResult){
1630
case1:
17-
return"⚀";
31+
return"&#9856;";
1832
case2:
19-
return"⚁";
33+
return"&#9857;";
2034
case3:
21-
return"⚂";
35+
return"&#9858;";
2236
case4:
23-
return"⚃";
37+
return"&#9859;";
2438
case5:
25-
return"⚄";
39+
return"&#9860;";
2640
case6:
27-
return"⚅";
41+
return"&#9861;";
2842
default:
2943
return"";
3044
}
3145
}
3246

33-
functionupdateRollHistory(){
34-
rollHistory.innerHTML="";
35-
for(leti=0;i<historyList.length;i++){
36-
constlistItem=document.createElement("li");
37-
listItem.innerHTML=`Roll${i+1}: <span>${getDiceFace(
38-
historyList[i]
39-
)}</span>`;
40-
rollHistory.appendChild(listItem);
41-
}
42-
}
43-
44-
rollButton.addEventListener("click",()=>{
45-
diceElement.classList.add("roll-animation");
47+
buttonEl.addEventListener("click",()=>{
48+
diceEl.classList.add("roll-animation");
4649
setTimeout(()=>{
47-
diceElement.classList.remove("roll-animation");
50+
diceEl.classList.remove("roll-animation");
4851
rollDice();
4952
},1000);
5053
});

‎projects/dice-roll-simulator/style.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ h1 {
2424
0% {
2525
transform:rotateY(0deg)rotateX(0deg);
2626
}
27+
2728
100% {
2829
transform:rotateY(720deg)rotateX(720deg);
2930
}
@@ -33,9 +34,8 @@ button {
3334
background-color:#47a5c4;
3435
color: white;
3536
font-size:1.5rem;
36-
border: none;
3737
padding:1rem2rem;
38-
margin:5px;
38+
border: none;
3939
border-radius:1rem;
4040
cursor: pointer;
4141
transition: background-color0.3s ease;
@@ -48,9 +48,8 @@ button:hover {
4848
ul {
4949
list-style: none;
5050
padding:0;
51-
margin:2rem;
5251
max-width:600px;
53-
margin:0 auto;
52+
margin:2rem auto;
5453
}
5554

5655
li {

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp