Bina Laman Web Simulator Dice Roll-tutorial css-php.cn

Bina Laman Web Simulator Dice Roll

PHPz

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

asal

893 orang telah melayarinya

Build a Dice Roll Simulator Website

pengenalan

Helo, rakan pembangun! Hari ini, saya teruja untuk berkongsi projek yang baru saya siapkan: Simulator Guling Dadu. Projek ini ialah cara yang menyeronokkan dan interaktif untuk mensimulasikan lemparan dadu, menjadikannya cara yang bagus untuk mempraktikkan JavaScript, terutamanya dalam bidang manipulasi DOM dan pengendalian acara. Sama ada anda ingin membina sesuatu yang menyeronokkan atau memerlukan ciri balingan dadu yang ringkas untuk permainan, projek ini merupakan permulaan yang sempurna.

Gambaran Keseluruhan Projek

Simulator Guling Dadu membolehkan pengguna mensimulasikan gulungan dadu enam segi dengan satu klik butang yang mudah. Hasilnya dipaparkan dengan cara yang menarik secara visual, meniru rupa dadu sebenar. Projek ini sesuai untuk pembangun yang ingin meningkatkan kemahiran mereka dalam membina aplikasi web interaktif sambil bekerja dengan animasi dan pendengar acara.

Ciri-ciri

Simulasi Balingan Dadu: Pengguna boleh membaling dadu maya dengan mengklik butang dan hasilnya dipaparkan serta-merta.
Sejarah Gulung: Aplikasi menyimpan rekod semua gulungan sebelumnya, membolehkan pengguna melihat hasil gulungan masa lalu mereka.
Animasi: Lemparan dadu disertakan dengan animasi putaran lancar untuk menambah realisme pada simulasi.
Reka Bentuk Responsif: Antara muka direka untuk berfungsi dengan baik merentas peranti dan saiz skrin yang berbeza.

Teknologi yang Digunakan

HTML: Digunakan untuk menstruktur kandungan pada halaman web.
CSS: Digunakan untuk menggayakan halaman web dan menambah animasi.
JavaScript: Dilaksanakan untuk mengendalikan logik lemparan dadu, mengemas kini DOM dan mengurus animasi.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML halaman web.
style.css: Memegang gaya CSS, termasuk animasi dan peraturan reka bentuk responsif.
script.js: Menguruskan aspek dinamik halaman menggunakan JavaScript.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Dice-Roll-Simulator
```
Salin selepas log masuk
Jalankan projek:
- Anda boleh sama ada menjalankannya pada pelayan setempat atau hanya membuka fail index.html dalam penyemak imbas web.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Klik butang "Baling Dadu" untuk mensimulasikan balingan dadu.
Lihat keputusan pada dadu dan semak sejarah gulungan yang dipaparkan di bawah.

Penerangan Kod

HTML

Fail index.html mengandungi struktur halaman web, termasuk paparan dadu, butang guling dan senarai sejarah guling. Di bawah ialah coretan kod 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>

Salin selepas log masuk

CSS

Fail style.css mengandungi gaya yang memastikan halaman web menarik secara visual dan termasuk animasi untuk balingan dadu. Berikut ialah beberapa gaya utama:

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

Salin selepas log masuk

JavaScript

Fail script.js mengurus logik lemparan dadu, mengemas kini sejarah lemparan dan mengendalikan animasi lemparan dadu. Di bawah ialah coretan kod 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);
});

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Simulator Dice Roll di sini.

Kesimpulan

Membina Simulator Dice Roll ini merupakan pengalaman yang menyeronokkan dan bermanfaat yang membolehkan saya mencuba animasi JavaScript dan manipulasi DOM. Saya harap projek ini memberi inspirasi kepada anda untuk mencipta aplikasi interaktif anda sendiri. Jangan ragu untuk meneroka kod, menyesuaikannya dan menggunakannya dalam projek anda sendiri. Selamat mengekod!