はじめに
このプロジェクトでは、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 つあり削除できない場合、クリックされた果物要素ノードは追加された矩形要素に含まれません。
プロジェクトを完成させる
この最後のステップでは、仕上げの手を加えてプロジェクトを完成させます。
- ページ上部の果物アイテムをクリックしてプロジェクトをテストします。果物がボックスに追加され、同じ果物が 3 つある場合は削除されることを確認します。削除可能な効果はこのようになります。
- ボックスに果物が 7 つあり、もう削除できない場合、上部の果物アイテムをクリックしても何の影響もありません。削除できない効果は以下の通りです。
おめでとうございます！あなたは Fruit Stacker プロジェクトを完成させました。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習することができます。
