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

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、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: コイン投げロジックとユーザー インタラクションを管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

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

2. プロジェクト ディレクトリを開きます:
   

   cd Flip-Coin
   

3. プロジェクトを実行します:

   • Flip Coin アプリケーションを使用するには、Web ブラウザでindex.html ファイルを開きます。

使用法

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

コードの説明

HTML

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

ライブデモ

ここで Flip Coin プロジェクトのライブデモをチェックできます。

結論

Flip Coin アプリケーションの構築は楽しくて勉強になりました。これは、HTML、CSS、JavaScript を使用してインタラクティブな Web 要素を作成する方法を示す単純なプロジェクトです。ぜひ参考にして、楽しんで実験していただければ幸いです。コーディングを楽しんでください!

クレジット

このプロジェクトは、実用的でインタラクティブな Web アプリケーションによるフロントエンド開発スキルを向上させるという私の継続的な取り組みの一環として開発されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上がフリップコインウェブサイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。