HTML、CSS、JavaScript を使った果物マッチングゲーム

はじめに

このプロジェクトでは、HTML、CSS、JavaScriptを使って簡単な「Fruit for Fun」ゲームを作成する方法を学びます。このゲームでは、ゲーム盤の四角をクリックすることで果物の画像のペアをマッチングします。

👀 プレビュー

🎯 タスク

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

• プロジェクトファイルとディレクトリをセットアップする方法
• スタートボタンの機能を実装して果物の画像を表示および非表示にする方法
• 四角をクリックして果物の画像を表示する機能を実装する方法
• クリックされた2つの画像を比較し、それに応じてスコアを更新する機能を実装する方法
• スコア表示をリアルタイムで更新する方法

🏆 成果

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

• ウェブ開発プロジェクトを構造化して整理する
• JavaScriptを使ってDOMを操作し、ユーザーインタラクションを処理する
• jQueryを使ってJavaScriptコードとアニメーションを簡略化する
• ゲームロジックに基づいてユーザーインターフェイスをリアルタイムで更新する

Skills Graph

プロジェクト構造をセットアップする

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

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

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

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

次に、VMの上部にある「Web 8080」を開き、手動で更新してページを表示します。スタートボタンをクリックすると、ゲームが正常に動作しません。以下の画像の通りです。

比較機能を実装する

このステップでは、2つのクリックされた画像を比較する機能を実装します。以下の手順に従ってこのステップを完了してください。

1. js/index.js ファイルの末尾に、以下の compare() 関数を追加します。

// Compare two images with each other to see if they are the same
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // Hide
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

この関数は、2つのクリックされた画像のソースを比較します。画像が同じ場合、スコアが2増え、四角が非表示になります。画像が異なる場合、スコアが2減り、画像が非表示になります。$("#score").text(score) は、htmlファイルの <p>The current number of points is <span id="score">0</span></p> セクションのスコア表示をリアルタイムで更新します。

スタートボタンの機能を実装する

このステップでは、スタートボタンの機能を実装します。以下の手順に従ってこのステップを完了してください。

1. js/index.js ファイルを開きます。
2. startGame() 関数の中に、スタートボタンがクリックされたときに四角の画像を表示し、その後非表示にするための以下のコードを追加します。

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

3. startGame() 関数の中で、前のコードの続きに、以下のコードを追加して「スタート」ボタンを非表示にします。

// Hide Start button
$("#start").css("visibility", "hidden");

クリック機能を実装する

このステップでは、四角をクリックする機能を実装します。以下の手順に従ってこのステップを完了してください。

1. js/index.js ファイルを開きます。
2. startGame() 関数の中に、四角のクリックイベントを処理するための以下のコードを追加します。

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // Hide Start button
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // Get the id of the clicked image
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

このコードは、クリックされた画像のIDを images 配列に追加します。画像が非表示の場合、表示されます。画像が既に表示されている場合、images 配列から削除されます。images 配列に2つの画像があるとき、500ミリ秒の遅延後に compare() 関数が呼び出されます。

これらの手順を完了すると、「Fruit for Fun」ゲームは完全に機能するはずで、完成した結果は以下の通りです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabExでさらに多くの実験を行って練習してください。