Fruit for Fun | HTML、CSS、JavaScript によるゲーム開発

はじめに

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

👀 プレビュー

Fruit matching game preview

🎯 タスク

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

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

🏆 成果

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

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

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

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

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

├──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」を開き、手動で更新してページを表示します。スタートボタンをクリックすると、ゲームが正常に動作しません。以下の画像の通りです。

unfinished game interface

比較機能を実装する

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

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> セクションのスコア表示をリアルタイムで更新します。

開始ボタンの機能を実装する

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

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

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

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

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

クリック機能を実装する

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

js/index.js ファイルを開きます。
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」ゲームは完全に機能するはずで、完成した結果は以下の通りです。

Finished game demonstration