안녕하세요, 개발자 여러분! 오늘은 제가 최근 완료한 프로젝트인 주사위 굴리기 시뮬레이터를 공유하게 되어 기쁩니다. 이 프로젝트는 주사위 굴리기를 시뮬레이션하는 재미 있고 대화형 방법으로, 특히 DOM 조작 및 이벤트 처리 영역에서 JavaScript를 연습할 수 있는 좋은 방법입니다. 재미있는 것을 만들고 싶거나 게임에 간단한 주사위 굴리기 기능이 필요한 경우 이 프로젝트가 완벽한 시작입니다.
주사위 굴리기 시뮬레이터를 사용하면 간단한 버튼 클릭만으로 육면체 주사위 굴림을 시뮬레이션할 수 있습니다. 결과는 실제 주사위 모양을 모방하여 시각적으로 매력적인 방식으로 표시됩니다. 이 프로젝트는 애니메이션 및 이벤트 리스너로 작업하면서 대화형 웹 애플리케이션 구축 기술을 향상시키려는 개발자에게 적합합니다.
프로젝트 구조를 간단히 살펴보겠습니다.
Dice-Roll-Simulator/ ├── index.html ├── style.css └── script.js
프로젝트를 시작하려면 다음 단계를 따르세요.
저장소 복제:
git clone https://github.com/abhishekgurjar-in/Dice-Roll-Simulator.git
프로젝트 디렉토리 열기:
cd Dice-Roll-Simulator
프로젝트 실행:
index.html 파일에는 주사위 표시, 굴리기 버튼, 굴리기 기록 목록 등 웹페이지의 구조가 포함되어 있습니다. 다음은 HTML 코드의 일부입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dice Roll Simulator</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Dice Roll Simulator</h1>
<div class="dice" id="dice">⚄</div>
<button id="roll-button">Roll Dice</button>
<div class="roll-list">
<ul id="roll-history"></ul>
</div>
<div class="footer">
<p>Made With ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
style.css 파일에는 웹페이지가 시각적으로 매력적이도록 하는 스타일과 주사위 굴리기에 대한 애니메이션이 포함되어 있습니다. 주요 스타일은 다음과 같습니다.
body {
font-family: "Open Sans", sans-serif;
text-align: center;
margin: 0;
}
h1 {
font-size: 3rem;
margin-top: 2rem;
}
.dice {
font-size: 7rem;
margin: 5px;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.roll-animation {
animation-name: roll;
}
@keyframes roll {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
100% {
transform: rotateY(720deg) rotateX(720deg);
}
}
button {
background-color: #47a5c4;
color: white;
font-size: 1.5rem;
padding: 1rem 2rem;
border: none;
border-radius: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2e8baf;
}
.roll-list {
min-height: 270px;
}
ul {
list-style: none;
padding: 0;
max-width: 600px;
margin: 2rem auto;
}
li {
font-size: 1.5rem;
padding: 0.5rem;
margin: 0.5rem;
background-color: #f2f2f2;
border-radius: 0.5rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
}
li span {
font-size: 3rem;
margin-right: 1rem;
}
.footer {
margin: 50px;
}
script.js 파일은 주사위 굴리기 로직을 관리하고, 굴리기 기록을 업데이트하며, 주사위 굴리기 애니메이션을 처리합니다. 다음은 JavaScript 코드의 일부입니다.
const buttonEl = document.getElementById("roll-button");
const diceEl = document.getElementById("dice");
const rollHistoryEl = document.getElementById("roll-history");
let historyList = [];
function rollDice() {
const rollResult = Math.floor(Math.random() * 6) + 1;
const diceFace = getDiceFace(rollResult);
diceEl.innerHTML = diceFace;
historyList.push(rollResult);
updateRollHistory();
}
function updateRollHistory() {
rollHistoryEl.innerHTML = "";
for (let i = 0; i < historyList.length; i++) {
const listItem = document.createElement("li");
listItem.innerHTML = `Roll ${i + 1}: <span>${getDiceFace(historyList[i])}</span>`;
rollHistoryEl.appendChild(listItem);
}
}
function getDiceFace(rollResult) {
switch (rollResult) {
case 1:
return "⚀";
case 2:
return "⚁";
case 3:
return "⚂";
case 4:
return "⚃";
case 5:
return "⚄";
case 6:
return "⚅";
default:
return "";
}
}
buttonEl.addEventListener("click", () => {
diceEl.classList.add("roll-animation");
setTimeout(() => {
diceEl.classList.remove("roll-animation");
rollDice();
}, 1000);
});
여기에서 주사위 굴리기 시뮬레이터의 라이브 데모를 확인하실 수 있습니다.
이 주사위 굴리기 시뮬레이터를 구축하는 것은 JavaScript 애니메이션과 DOM 조작을 실험할 수 있는 재미있고 보람 있는 경험이었습니다. 이 프로젝트가 여러분이 자신만의 대화형 애플리케이션을 만드는 데 영감을 주기를 바랍니다. 자유롭게 코드를 탐색하고, 사용자 정의하고, 자신의 프로젝트에서 사용해 보세요. 즐거운 코딩하세요!
이 프로젝트는 간단하고 대화형 주사위 굴리기 도구의 필요성에서 영감을 받았습니다.
위 내용은 주사위 굴리기 시뮬레이터 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
