JavaScript と jQuery で簡単な抽選アプリケーションを作成する

はじめに

このプロジェクトでは、JavaScript と jQuery を使って簡単な抽選アプリケーションを作成する方法を学びます。このアプリケーションは、賞品のリストを回転させ、回転が止まったときに当選賞品を表示することで抽選をシミュレートします。

👀 プレビュー

抽選アニメーションのプレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

プロジェクトファイルとディレクトリをセットアップする方法
賞品の回転を処理し、当選賞品を表示する rolling 関数を実装する方法
プロジェクトをテストして、期待通りに機能することを確認する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JavaScript と jQuery を使ってインタラクティブな Web アプリケーションを作成する
requestAnimationFrame を使って簡単なアニメーションループを実装する
ユーザーインタラクションを処理し、UI を適切に更新する

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── index.html
└── js
    ├── index.js
    └── jquery.js

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

未完成のプロジェクト構造

ローリング機能を実装する

このステップでは、index.js 内の rolling 関数を jQuery または JavaScript を使って実装します。以下の手順に従ってこのステップを完了しましょう。

index.js 内の rolling 関数を見つけます。
rolling 関数を以下の要件を達成するように改良します。
- 開始ボタンをクリックすると、li1 の class 要素が起点となり、賞品に黄色い背景（クラス .active）が時計回りに回転します。
- 回転が止まったとき、賞品ヒントがページの id が award の要素に表示されます。賞品ヒントには賞品の名前が含まれており、タイトル内の名前とまったく同じでなければなりません。
- 回転間隔と回転停止条件を設定します。

rolling 関数と同じレベルで変数 num を定義し、初期値を -1 に設定します。num と rolling 関数内の具体的なコードは以下の通りです。

//...

// TODO: この関数を完成させてください
let num = -1; // 回転後に位置する要素のインデックス

function rolling() {
  time++; // 回転数を 1 増やす
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 再帰的なアニメーションを実行する
  }, speed);
  num++; // インデックスを 1 増やす
  if (num > 8) {
    // インデックスが 7 を超えた場合、8 つの賞品があるので 0 にリセットする
    num = 1;
  }
  // 当選した li に active クラスを追加する
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // 回転数が総回転数を超えた場合、回転を停止してタイマーをクリアする
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "index");
    console.log($(".li" + num).text());
    // 当選情報を表示する
    $("#award").text(
      `Congratulations on your prize-winning ${$(".li" + num).text()}!!!`
    );
    time = 0;
    num = -1;
    return;
  }
}

プロジェクトをテストする

このステップでは、プロジェクトをテストして、期待通りに機能することを確認します。以下の手順に従ってこのステップを完了しましょう。

js/index.js ファイルの変更を保存します。
ブラウザでページを更新します。
「開始」ボタンをクリックして抽選を開始します。
賞品の回転と回転が止まったときの賞品ヒントの表示を確認します。
プロジェクトが正しく動作していることを確認するために、手順 3 - 4 を数回繰り返します。

完成した結果は以下の通りです。

抽選アニメーションの結果

おめでとうございます！あなたは抽選プロジェクトを完了させました。質問や問題がある場合は、遠慮なくお尋ねください。

まとめ

おめでとうございます！このプロジェクトを完了させました。あなたは実験（Lab）をもっとたくさん練習することができ、あなたの技術を向上させることができます。