Build a Dice Roll Simulator Website-CSS Tutorial-php.cn

Build a Dice Roll Simulator Website

PHPz

Release： 2024-08-11 06:34:32

Original

910 people have browsed it

Build a Dice Roll Simulator Website

Introduction

Hello, fellow developers! Today, I'm excited to share a project I recently completed: a Dice Roll Simulator. This project is a fun and interactive way to simulate the rolling of a dice, making it a great way to practice JavaScript, especially in the areas of DOM manipulation and event handling. Whether you're looking to build something playful or need a simple dice roll feature for a game, this project is a perfect start.

Project Overview

The Dice Roll Simulator allows users to simulate the roll of a six-sided dice with a simple click of a button. The result is displayed in a visually appealing way, mimicking the appearance of a real dice. This project is perfect for developers who want to enhance their skills in building interactive web applications while working with animations and event listeners.

Features

Dice Roll Simulation: Users can roll a virtual dice by clicking a button, and the result is displayed instantly.
Roll History: The application keeps a record of all previous rolls, allowing users to see the outcomes of their past rolls.
Animation: The dice roll is accompanied by a smooth rotation animation to add realism to the simulation.
Responsive Design: The interface is designed to work well across different devices and screen sizes.

Technologies Used

HTML: Used for structuring the content on the webpage.
CSS: Applied for styling the webpage and adding animations.
JavaScript: Implemented for handling the dice roll logic, updating the DOM, and managing animations.

Project Structure

Here's a quick look at the project structure:

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

Copy after login

index.html: Contains the HTML structure of the webpage.
style.css: Holds the CSS styles, including animation and responsive design rules.
script.js: Manages the dynamic aspects of the page using JavaScript.

Installation

To get started with the project, follow these steps:

Clone the repository:

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

Copy after login

Open the project directory:
```
cd Dice-Roll-Simulator
```
Copy after login
Run the project:
- You can either run it on a local server or simply open the index.html file in a web browser.

Usage

Open the website in a web browser.
Click the "Roll Dice" button to simulate a dice roll.
View the result on the dice and check the roll history displayed below.

Code Explanation

HTML

The index.html file contains the structure of the webpage, including the dice display, the roll button, and the roll history list. Below is a snippet of the HTML code:

<!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>

Copy after login

CSS

The style.css file contains styles that ensure the webpage is visually appealing and includes animations for the dice roll. Here are some key styles:

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;
}

Copy after login

JavaScript

The script.js file manages the dice roll logic, updates the roll history, and handles the dice roll animation. Below is a snippet of the JavaScript code:

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);
});

Copy after login

Live Demo

You can check out the live demo of the Dice Roll Simulator here.

Conclusion

Building this Dice Roll Simulator was a fun and rewarding experience that allowed me to experiment with JavaScript animations and DOM manipulation. I hope this project inspires you to create your own interactive applications. Feel free to explore the code, customize it, and use it in your own projects. Happy coding!

Credits

This project was inspired by the need for a simple and interactive dice roll tool.

Author

Abhishek Gurjar
- GitHub Profile

The above is the detailed content of Build a Dice Roll Simulator Website. For more information, please follow other related articles on the PHP Chinese website!