Hallo, liebe Entwickler! Heute freue ich mich, ein Projekt vorzustellen, das ich kürzlich abgeschlossen habe: einen Würfelwurfsimulator. Dieses Projekt ist eine unterhaltsame und interaktive Möglichkeit, das Würfeln zu simulieren, was es zu einer großartigen Möglichkeit macht, JavaScript zu üben, insbesondere in den Bereichen DOM-Manipulation und Ereignisbehandlung. Egal, ob Sie etwas Spielerisches bauen möchten oder eine einfache Würfelwurffunktion für ein Spiel benötigen, dieses Projekt ist ein perfekter Anfang.
Der Würfelwurfsimulator ermöglicht es Benutzern, den Wurf eines sechsseitigen Würfels mit einem einfachen Klick auf eine Schaltfläche zu simulieren. Das Ergebnis wird optisch ansprechend dargestellt und imitiert das Aussehen eines echten Würfels. Dieses Projekt ist perfekt für Entwickler, die ihre Fähigkeiten beim Erstellen interaktiver Webanwendungen verbessern und gleichzeitig mit Animationen und Ereignis-Listenern arbeiten möchten.
Hier ein kurzer Blick auf die Projektstruktur:
Dice-Roll-Simulator/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Dice-Roll-Simulator.git
Öffnen Sie das Projektverzeichnis:
cd Dice-Roll-Simulator
Führen Sie das Projekt aus:
Die Datei index.html enthält die Struktur der Webseite, einschließlich der Würfelanzeige, der Wurfschaltfläche und der Wurfverlaufsliste. Unten finden Sie einen Ausschnitt des HTML-Codes:
<!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>
Die style.css-Datei enthält Stile, die dafür sorgen, dass die Webseite optisch ansprechend ist, und enthält Animationen für den Würfelwurf. Hier sind einige wichtige Stile:
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;
}
Die Datei script.js verwaltet die Würfelwurflogik, aktualisiert den Würfelwurfverlauf und verwaltet die Würfelwurfanimation. Unten ist ein Ausschnitt des JavaScript-Codes:
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);
});
Sie können sich hier die Live-Demo des Dice Roll Simulators ansehen.
Das Erstellen dieses Würfelwurfsimulators war eine unterhaltsame und lohnende Erfahrung, die es mir ermöglichte, mit JavaScript-Animationen und DOM-Manipulation zu experimentieren. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, Ihre eigenen interaktiven Anwendungen zu erstellen. Erkunden Sie den Code, passen Sie ihn an und verwenden Sie ihn in Ihren eigenen Projekten. Viel Spaß beim Codieren!
Dieses Projekt wurde von der Notwendigkeit eines einfachen und interaktiven Würfelwurfwerkzeugs inspiriert.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Würfelspiel-Simulator-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
