インタラクティブなジグソーパズルゲームを作成する

はじめに

このプロジェクトでは、JavaScript を使ってインタラクティブなジグソーパズルゲームを作成する方法を学びます。このゲームでは、パズルのピースを並べ替えて完全な画像を再構築し、プレイヤーに魅力的でチャレンジングな体験を提供します。

👀 プレビュー

インタラクティブなジグソーパズルのデモ

🎯 タスク

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

プロジェクト環境をセットアップし、ファイル構造を理解する方法。
パズルのピースにドラッグアンドドロップ機能を実装する方法。
パズルが完成したかどうかを確認し、それに応じて成功メッセージを表示する方法。
完成したプロジェクトをテストし、ゲームの正しい機能を確認する方法。

🏆 成果

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

JavaScript を使ってインタラクティブなゲームを作成する。
ウェブ開発におけるドラッグアンドドロップ機能の原理を理解する。
タスクが完了したかどうかを確認するロジックを実装し、ユーザーにフィードバックを提供する。
ドキュメントオブジェクトモデル（DOM）を使って HTML 要素を操作する経験を得る。

プロジェクト環境をセットアップする

このステップでは、プロジェクト環境をセットアップし、ファイル構造を理解します。

実験環境を開き、プロジェクトディレクトリ /home/labex/project に移動します。
ディレクトリ構造は以下の通りです。
```
├── css
├── images
├── index.html
└── js
    └── index.js
```
- images はプロジェクトの画像フォルダです。
- css はプロジェクトのスタイルフォルダです。
- index.html はメインページです。
- js/index.js はコードを追加する必要がある JavaScript ファイルです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

ドラッグアンドドロップ機能を実装する

このステップでは、パズルのピースにドラッグアンドドロップ機能を実装します。

js/index.js ファイルで、drop 関数を見つけます。

drop 関数の中に、ドラッグされたパズルのピースとターゲットのパズルのピースの画像を交換するために、次のコードを追加します。

// ドラッグされたパズルのピースが現在のターゲットのパズルのピースでないことを確認する
if (draggedPiece !== this) {
  // TODO
  // ドラッグされたパズルのピースとターゲットのパズルのピースの現在の状態を保存する
  let saveArr = [
    [draggedPiece.children[0].src, draggedPiece.children[0].dataset.id],
    [this.children[0].src, this.children[0].dataset.id]
  ];

  // 画像のsrcとdata-id属性を交換する
  draggedPiece.children[0].src = saveArr[1][0];
  draggedPiece.children[0].dataset.id = saveArr[1][1];
  this.children[0].src = saveArr[0][0];
  this.children[0].dataset.id = saveArr[0][1];
}

// ドラッグされているパズルのピースをリセットする
draggedPiece = null;

このコードはまず、ドラッグされたパズルのピースが現在のターゲットのパズルのピースでないことを確認します。そうであれば、ドラッグされたパズルのピースとターゲットのパズルのピースの現在の状態を保存し、次に画像の src と data-id 属性を交換します。

パズルの完成を確認する

このステップでは、パズルが正常に完成したかどうかを確認するロジックを実装し、それに応じて成功メッセージを表示または非表示にします。

js/index.js ファイルで、drop 関数を見つけます。

drop 関数の中で、前のステップで追加したコードの後に、次のコードを追加します。

if (draggedPiece !== this) {
  // TODO
  //...
  // パズルコンテナ内のすべての画像の data-id 値を取得する
  let imgDataIdList = [...container.getElementsByTagName("img")].map(
    (item) => item.dataset.id
  );

  // パズルが完成したかどうかを確認する
  if (imgDataIdList.join(",") === "1,2,3,4,5,6,7,8,9") {
    // 成功メッセージを表示する
    successMessage.classList.remove("hide");
    successMessage.classList.add("show");
  } else {
    // 成功メッセージを非表示にする
    successMessage.classList.remove("show");
    successMessage.classList.add("hide");
  }
}

このコードはまず、パズルコンテナ内のすべての画像の data-id 値を取得し、それらが正しい順序（1 から 9）にあるかどうかを確認します。そうであれば、成功メッセージ要素に対して hide クラスを削除し、show クラスを追加することで成功メッセージを表示します。それ以外の場合は、show クラスを削除し、hide クラスを追加することで成功メッセージを非表示にします。

完成したプロジェクトをテストする

ページを更新して、パズルの初期状態を確認します。
パズルのピースをドラッグしてドロップして、並べ替えてみます。
パズルが完成するにつれて、成功メッセージが表示されたり非表示になったりするのを確認します。
パズルのピースが正しく交換され、画像の src と data-id 属性が適切に更新されていることを確認します。

完成後のエフェクトは以下の通りです。

完成時のエフェクト

おめでとうございます！ご用意のコードを使って、ジグソーパズルゲームを正常に実装できました。さらにプロジェクトを調べて、追加の機能や改良を試してみてください。

まとめ

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

未来を紡ぐ