開発者の皆さん、こんにちは！私の最新プロジェクト、Flip Coin アプリケーションを共有できることを嬉しく思います。このシンプルだが楽しいプロジェクトでは、古典的なコイン投げをシミュレートでき、意思決定やただ楽しむのに最適です。これは、HTML、CSS、JavaScript を使用してインタラクティブな Web アプリケーションを作成する方法を示す優れた例です。
Flip Coin は、コインの投げをシミュレートする Web ベースのアプリケーションです。ユーザーはボタンをクリックしてコインを投げると、結果が画面に表示されます。このプロジェクトでは、基本的な Web 開発テクニックを実証し、フロントエンド スキルを実践する実践的な方法を提供します。
プロジェクト構造の概要は次のとおりです:
Flip-Coin/ ├── index.html ├── style.css └── script.js
プロジェクトを開始するには、次の手順に従います:
リポジトリのクローンを作成します:
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
プロジェクト ディレクトリを開きます:
cd 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>
style.css ファイルは Flip Coin アプリケーションのスタイルを設定し、コイン投げの簡単なアニメーションを追加します。以下にいくつかの主要なスタイルを示します:
@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);
}
}
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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
