介紹
開發者們大家好！我很高興分享我的最新專案：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：管理硬幣翻轉邏輯和使用者互動。
安裝
要開始該項目，請按照以下步驟操作：
-
複製儲存庫：
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
登入後複製
-
開啟專案目錄:
-
運行項目:
- 在網頁瀏覽器中開啟index.html 檔案以使用Flip Coin 應用程式。
用法
-
在網頁瀏覽器中開啟網站。
-
點選「拋硬幣」按鈕來拋硬幣。
-
在螢幕上查看結果，顯示硬幣是正面還是反面落地。
程式碼說明
超文本標記語言
index.html 檔案定義了 Flip Coin 應用程式的結構，包括按鈕和顯示結果的區域。這是一個片段：
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<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" />
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
登入後複製
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 應用程式來增強我的前端開發技能。
作者
以上是建立一個翻轉硬幣網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！
