フリップコインウェブサイトを構築する-CSSチュートリアル-php.cn

フリップコインウェブサイトを構築する

PHPz

リリース： 2024-08-25 20:31:03

オリジナル

1055 人が閲覧しました

Build a Flip Coin Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、Flip Coin アプリケーションを共有できることを嬉しく思います。このシンプルだが楽しいプロジェクトでは、古典的なコイン投げをシミュレートでき、意思決定やただ楽しむのに最適です。これは、HTML、CSS、JavaScript を使用してインタラクティブな Web アプリケーションを作成する方法を示す優れた例です。

プロジェクト概要

Flip Coin は、コインの投げをシミュレートする Web ベースのアプリケーションです。ユーザーはボタンをクリックしてコインを投げると、結果が画面に表示されます。このプロジェクトでは、基本的な Web 開発テクニックを実証し、フロントエンドスキルを実践する実践的な方法を提供します。

特徴

コイン投げシミュレーション: ボタンをクリックしてコインを投げ、表になるか裏になるかを確認します。
ビジュアルフィードバック: ユーザーエクスペリエンスを向上させるために、コインの結果がシンプルなアニメーションで表示されます。
レスポンシブデザイン: アプリケーションはさまざまなデバイスで適切に動作するように設計されています。

使用されている技術

HTML: Flip Coin アプリケーションの構造を提供します。
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
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Flip-Coin
```
ログイン後にコピー
プロジェクトを実行します:
- Flip Coin アプリケーションを使用するには、Web ブラウザでindex.html ファイルを開きます。

使用法

Web ブラウザで Web サイトを開きます。
「コインを投げる」ボタンをクリックしてください コインを投げます。
画面上で結果を表示し、コインが表になったか裏になったかを示します。

コードの説明

HTML

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 ファイルは 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);
  }
}

ログイン後にコピー

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

ログイン後にコピー