建立一個翻轉硬幣網站

介紹

開發者們大家好！我很高興分享我的最新專案：Flip Coin 應用程式。這個簡單有趣的項目可以讓您模擬經典的硬幣翻轉，非常適合決策或只是為了好玩。這是如何使用 HTML、CSS 和 JavaScript 建立互動式 Web 應用程式的絕佳範例。

項目概況

翻轉硬幣 是一個基於網路的應用程序，可以模擬翻轉硬幣。使用者可以點擊按鈕來擲硬幣，結果會顯示在螢幕上。本專案示範了基本的 Web 開發技術，並提供了練習前端技能的實作方法。

特徵

• 硬幣翻轉模擬：點擊按鈕翻轉硬幣，看看它是正面還是反面。
• 視覺回饋：以簡單的動畫顯示硬幣的結果，以增強使用者體驗。
• 響應式設計：該應用程式旨在各種裝置上運作良好。

使用的技術

• HTML：提供翻轉硬幣應用程式的結構。
• CSS：設計應用程式的樣式並添加動畫以獲得視覺上吸引人的體驗。
• JavaScript：實作拋硬幣邏輯並處理使用者互動。

專案結構

以下是項目結構的概述：

Flip-Coin/
├── index.html
├── style.css
└── script.js

• index.html：包含 Flip Coin 應用程式的 HTML 結構。
• style.css：包含 CSS 樣式，實現簡潔的互動設計。
• script.js：管理硬幣翻轉邏輯和使用者互動。

安裝

要開始該項目，請按照以下步驟操作：

1. 複製儲存庫：
   

   git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
   

2. 開啟專案目錄:
   

   cd Flip-Coin
   

3. 運行項目:

   • 在網頁瀏覽器中開啟index.html 檔案以使用Flip Coin 應用程式。

用法

1. 在網頁瀏覽器中開啟網站。
2. 點選「拋硬幣」按鈕來拋硬幣。
3. 在螢幕上查看結果，顯示硬幣是正面還是反面落地。

程式碼說明

超文本標記語言

index.html 檔案定義了 Flip Coin 應用程式的結構，包括按鈕和顯示結果的區域。這是一個片段：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Coin</title>
    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>
  
  
    <div id="main">
      <div id="logo_image"></div>
      <div class="container">
        <p>Flipping your fate with a click</p>
        <div class="stats">
          <p id="heads-count">建立一個翻轉硬幣網站: 0</p>
          <p id="tails-count">Tails: 0</p>
        </div>
        <div class="coin">
          <div class="heads">
            <img src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/heads.svg" alt="建立一個翻轉硬幣網站">
          </div>
          <div class="tails">
            <img src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/tails.svg" alt="Tails">
          </div>
        </div>
        <div id="buttons">
          <button id="flip-button">Flip coin</button>
          <button id="reset-button">Reset</button>
          <audio id="flip-sound">
            <source src="./assets/coin-flip-88793.mp3" type="audio/mpeg"></source>
            Your browser does not support the audio element.
          </audio>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  

CSS

style.css 檔案設計翻轉硬幣應用程式的樣式，為硬幣翻轉添加簡單的動畫。以下是一些關鍵樣式：

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Rubik", sans-serif;
}

body {
  height: 100%;
  width: 100%;
  background-color: #072ac8;
}

#main {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 90vh;
}

#logo_image {
  width: 250px;
  height: 100px;
  background: url(./assets/original-68bc1d89ca3ea0450d8ca9f3a1403d42-removebg-preview.png);
  background-position: center;
  background-size: cover;
  align-items: center;
  justify-content: center;
}

.container {
  background: #a2d6f9;
  width: 700px;
  height: 500px;
  padding: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  -webkit-perspective: 300px;
  perspective: 300px;
}

.container p {
  text-align: center;
  font-size: 20px;
}

.stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #101020;
  font-weight: 500;
  line-height: 50px;
  font-size: 20px;
}

.coin {
  height: 150px;
  width: 150px;
  position: relative;
  margin: 50px auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.tails {
  transform: rotateX(180deg);
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coin img {
  width: 145px;
}

.heads,
.tails {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

button {
  width: 260px;
  padding: 10px 0;
  border: 2.5px solid black;
  font-size: 22px;
  border-radius: 5px;
  cursor: pointer;
}

#flip-button {
  background: #072ac8;
  color: white;
}

#flip-button:disabled {
  background-color: #e1e0ee;
  color: #101020;
  border-color: #e1e0ee;
}

#reset-button {
  background: #fff;
  color: #072ac8;
}

.footer {
  margin: 20px;
  text-align: center;
  color: white;
}

@keyframes spin-tails {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(1980deg);
  }
}

@keyframes spin-heads {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(2160deg);
  }
}

JavaScript

script.js 檔案包含翻轉硬幣並顯示結果的邏輯。這是一個片段：

let tails = 0;
let heads = 0; // Added heads variable definition
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");
let flipSound = document.querySelector("#flip-sound");

flipBtn.addEventListener("click", () => {
    flipSound.currentTime = 0; 
    flipSound.play();

    let i = Math.floor(Math.random() * 2);
    coin.style.animation = "none";

    if (i) {
        setTimeout(() => {
            coin.style.animation = "spin-heads 3s forwards";
        }, 100);
        heads++;
    } else {
        setTimeout(() => {
            coin.style.animation = "spin-tails 3s forwards";
        }, 100);
        tails++;
    }
    setTimeout(updateStatus, 3000);
    disableButton();
});

function updateStatus() {
    document.querySelector("#heads-count").textContent = `建立一個翻轉硬幣網站: ${heads}`;
    document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}

function disableButton() {
    flipBtn.disabled = true;
    setTimeout(() => {
        flipBtn.disabled = false;
    }, 3000);
}

resetBtn.addEventListener("click", () => {
    coin.style.animation = "none"; // Fixed typo: "aniamtion" to "animation"
    heads = 0;
    tails = 0;
    updateStatus();
});

現場演示

您可以在這裡查看 Flip Coin 專案的現場演示。

結論

建立 Flip Coin 應用程式是一次有趣且具有教育意義的體驗。這是一個簡單的項目，示範如何使用 HTML、CSS 和 JavaScript 建立互動式 Web 元素。我希望您發現它很有用並喜歡嘗試它。快樂編碼！

製作人員

這個專案是我持續不斷的旅程的一部分，旨在透過實用的互動式 Web 應用程式來增強我的前端開發技能。

作者

• 阿布舍克·古賈爾
  • GitHub 簡介

以上是建立一個翻轉硬幣網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！