주사위 굴리기 시뮬레이터 웹사이트 구축-CSS 튜토리얼-php.cn

주사위 굴리기 시뮬레이터 웹사이트 구축

PHPz

풀어 주다： 2024-08-11 06:34:32

원래의

923명이 탐색했습니다.

Build a Dice Roll Simulator Website

소개

안녕하세요, 개발자 여러분! 오늘은 제가 최근 완료한 프로젝트인 주사위 굴리기 시뮬레이터를 공유하게 되어 기쁩니다. 이 프로젝트는 주사위 굴리기를 시뮬레이션하는 재미 있고 대화형 방법으로, 특히 DOM 조작 및 이벤트 처리 영역에서 JavaScript를 연습할 수 있는 좋은 방법입니다. 재미있는 것을 만들고 싶거나 게임에 간단한 주사위 굴리기 기능이 필요한 경우 이 프로젝트가 완벽한 시작입니다.

프로젝트 개요

주사위 굴리기 시뮬레이터를 사용하면 간단한 버튼 클릭만으로 육면체 주사위 굴림을 시뮬레이션할 수 있습니다. 결과는 실제 주사위 모양을 모방하여 시각적으로 매력적인 방식으로 표시됩니다. 이 프로젝트는 애니메이션 및 이벤트 리스너로 작업하면서 대화형 웹 애플리케이션 구축 기술을 향상시키려는 개발자에게 적합합니다.

특징

주사위 굴리기 시뮬레이션: 사용자는 버튼을 클릭하여 가상 주사위를 굴릴 수 있으며 결과가 즉시 표시됩니다.
롤 기록: 애플리케이션은 모든 이전 롤의 기록을 유지하므로 사용자는 과거 롤의 결과를 볼 수 있습니다.
애니메이션: 주사위 굴림에는 부드러운 회전 애니메이션이 수반되어 시뮬레이션에 사실감을 더해줍니다.
반응형 디자인: 인터페이스는 다양한 기기와 화면 크기에서 잘 작동하도록 설계되었습니다.

사용된 기술

HTML: 웹페이지 콘텐츠를 구성하는 데 사용됩니다.
CSS: 웹페이지 스타일 지정 및 애니메이션 추가에 적용됩니다.
JavaScript: 주사위 굴리기 로직 처리, DOM 업데이트 및 애니메이션 관리를 위해 구현되었습니다.

프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다.

Dice-Roll-Simulator/
├── index.html
├── style.css
└── script.js

로그인 후 복사

index.html: 웹페이지의 HTML 구조를 포함합니다.
style.css: 애니메이션 및 반응형 디자인 규칙을 포함한 CSS 스타일을 보유합니다.
script.js: JavaScript를 사용하여 페이지의 동적 측면을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

저장소 복제:

git clone https://github.com/abhishekgurjar-in/Dice-Roll-Simulator.git

로그인 후 복사

프로젝트 디렉토리 열기:
```
cd Dice-Roll-Simulator
```
로그인 후 복사
프로젝트 실행:
- 로컬 서버에서 실행하거나 간단히 웹 브라우저에서 index.html 파일을 열 수 있습니다.

용법

웹사이트를 엽니다 웹 브라우저에서
"주사위 굴리기" 버튼을 클릭하여 주사위 굴리기를 시뮬레이션합니다.
주사위의 결과보기와 아래에 표시되는 굴림 내역을 확인하세요.

코드 설명

HTML

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">&#9860;</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>

로그인 후 복사

CSS

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 "&#9856;";
    case 2:
      return "&#9857;";
    case 3:
      return "&#9858;";
    case 4:
      return "&#9859;";
    case 5:
      return "&#9860;";
    case 6:
      return "&#9861;";
    default:
      return "";
  }
}

buttonEl.addEventListener("click", () => {
  diceEl.classList.add("roll-animation");
  setTimeout(() => {
    diceEl.classList.remove("roll-animation");
    rollDice();
  }, 1000);
});

로그인 후 복사

라이브 데모

여기에서 주사위 굴리기 시뮬레이터의 라이브 데모를 확인하실 수 있습니다.

결론

이 주사위 굴리기 시뮬레이터를 구축하는 것은 JavaScript 애니메이션과 DOM 조작을 실험할 수 있는 재미있고 보람 있는 경험이었습니다. 이 프로젝트가 여러분이 자신만의 대화형 애플리케이션을 만드는 데 영감을 주기를 바랍니다. 자유롭게 코드를 탐색하고, 사용자 정의하고, 자신의 프로젝트에서 사용해 보세요. 즐거운 코딩하세요!