果物積みゲームを作成する | HTML、CSS、JavaScript

はじめに

このプロジェクトでは、HTML、CSS、JavaScript を使って簡単な果物積みゲームを作成する方法を学びます。目的は、落ちてくる果物アイテムをページ上部に積み重ね、下部のボックスに入れることです。ボックスに同じ果物が 3 つある場合、それらは自動的に削除されます。

👀 プレビュー

削除可能な効果はこのようになります。

削除できない効果は以下の通りです。

🎯 タスク

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

エディタで提供されたファイルを開いてプロジェクトをセットアップする方法
ページ上部の果物アイテムにクリックイベントハンドラを追加する方法
果物アイテムを追加、削除、削除するゲームロジックを実装する方法
プロジェクトを完成させ、機能をテストする方法

🏆 成果

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

jQuery を使って DOM を操作し、イベントを処理する
JavaScript を使って基本的なゲームロジックを実装する
シンプルで対話型のユーザーインターフェイスを作成する
コードをテストしてデバッグし、目的の機能を確認する

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

このステップでは、エディタで提供されたファイルを開いてプロジェクトをセットアップします。

エディタを開くと、次のファイルが表示されます。index.html、style.css、jquery.min.js、および画像ファイル。
WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

✨ 解答を確認して練習

クリックイベントハンドラを追加する

このステップでは、ページ上部の果物アイテムにクリックイベントハンドラを追加します。

index.html ファイルで、<script> タグ内の TODO セクションを探します。
<script> タグは内部に空の ids 変数の配列を設定しています。

let ids = [];

$("#card li").on("click", function (e) {
  // TODO: ここで関数を実装してください
});

TODO セクション内に次のコードを追加します。

$("#card li").on("click", function (e) {
  // TODO: ここで関数を実装してください
  if ($("#box li").length >= 7) {
    return;
  }
  let clone = $(this).clone();
  $("#box").append(clone);

  let currentId = $(this).data("id");
  ids.push($(this).data("id"));

  let currentIdLen = ids.filter((id) => id == currentId)?.length;

  if (currentIdLen == 3) {
    ids = ids.filter((id) => id !== currentId);
    let three = $(`#box li[data-id=${currentId}]`);
    for (let index = 0; index < three.length; index++) {
      const element = three[index];
      $(element).addClass("active");
      setTimeout(() => {
        element.remove();
      }, 200);
    }
  }

  $(this).css({
    top: "600px",
    left: "200px",
    opacity: 0,
    transition:
      "left.2s linear, top.2s cubic-bezier(.08,-0.35,.99,.33),opacity.2s linear"
  });
});

このコードは、ページ上部の果物アイテムにクリックイベントハンドラを追加します。果物アイテムがクリックされると、それがクローンされてページ下部のボックスに追加されます。ボックスに同じ果物が 3 つある場合、それらは削除されます。下部の矩形 (id=box) 要素に果物が 7 つあり削除できない場合、クリックされた果物要素ノードは追加された矩形要素に含まれません。

✨ 解答を確認して練習