Créer un jeu de puzzle interactif

Introduction

Dans ce projet, vous allez apprendre à créer un jeu de puzzle interactif à l'aide de JavaScript. Le jeu consiste à rearranger les pièces du puzzle pour reconstruire l'image complète, offrant une expérience captivante et stimulante pour les joueurs.

👀 Aperçu

Démo de puzzle interactif

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer l'environnement du projet et comprendre la structure des fichiers.
Comment implémenter la fonctionnalité de glisser-déposer pour les pièces du puzzle.
Comment vérifier la complétion du puzzle et afficher un message de réussite en conséquence.
Comment tester le projet terminé et s'assurer de la bonne fonctionnalité du jeu.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Créer un jeu interactif à l'aide de JavaScript.
Comprendre les principes de la fonctionnalité de glisser-déposer dans le développement web.
Implémenter une logique pour vérifier la complétion d'une tâche et fournir des retours à l'utilisateur.
Gagner de l'expérience dans la manipulation du Document Object Model (DOM) et des éléments HTML.

Configurer l'environnement du projet

Dans cette étape, vous allez configurer l'environnement du projet et comprendre la structure des fichiers.

Ouvrez l'environnement d'expérience et accédez au répertoire du projet /home/labex/project.
La structure du répertoire est la suivante :
```
├── css
├── images
├── index.html
└── js
    └── index.js
```
- images est le dossier d'images du projet.
- css est le dossier de styles du projet.
- index.html est la page principale.
- js/index.js est le fichier JavaScript dans lequel vous devez ajouter le code.
Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Implémenter la fonctionnalité de glisser-déposer

Dans cette étape, vous allez implémenter la fonctionnalité de glisser-déposer pour les pièces du puzzle.

Dans le fichier js/index.js, localisez la fonction drop.

Dans la fonction drop, ajoutez le code suivant pour échanger les images de la pièce du puzzle déplacée et de la pièce du puzzle cible :

// Vérifiez si la pièce du puzzle déplacée n'est pas la pièce du puzzle cible actuelle
if (draggedPiece !== this) {
  // TODO
  // Enregistrez l'état actuel des pièces du puzzle déplacée et cible
  let saveArr = [
    [draggedPiece.children[0].src, draggedPiece.children[0].dataset.id],
    [this.children[0].src, this.children[0].dataset.id]
  ];

  // Échangez les attributs src et data-id des images
  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];
}

// Remettez à zéro la pièce du puzzle en train d'être déplacée
draggedPiece = null;

Ce code vérifie d'abord si la pièce du puzzle déplacée n'est pas la pièce du puzzle cible actuelle. Si c'est le cas, il enregistre l'état actuel des pièces du puzzle déplacée et cible, puis échange les attributs src et data-id des images.

Vérifier la complétion du puzzle

Dans cette étape, vous allez implémenter la logique pour vérifier si le puzzle est complété avec succès et afficher ou cacher le message de réussite en conséquence.

Dans le fichier js/index.js, localisez la fonction drop.

Dans la fonction drop, après le code que vous avez ajouté dans l'étape précédente, ajoutez le code suivant :

if (draggedPiece !== this) {
  // TODO
  //...
  // Obtenez les valeurs de data-id de toutes les images dans le conteneur du puzzle
  let imgDataIdList = [...container.getElementsByTagName("img")].map(
    (item) => item.dataset.id
  );

  // Vérifiez si le puzzle est complété
  if (imgDataIdList.join(",") === "1,2,3,4,5,6,7,8,9") {
    // Affichez le message de réussite
    successMessage.classList.remove("hide");
    successMessage.classList.add("show");
  } else {
    // Cachez le message de réussite
    successMessage.classList.remove("show");
    successMessage.classList.add("hide");
  }
}

Ce code obtient d'abord les valeurs de data-id de toutes les images dans le conteneur du puzzle et vérifie si elles sont dans l'ordre correct (de 1 à 9). Si c'est le cas, il affiche le message de réussite en supprimant la classe hide et en ajoutant la classe show à l'élément du message de réussite. Sinon, il cache le message de réussite en supprimant la classe show et en ajoutant la classe hide.

Tester le projet terminé

Raffraîchissez la page pour voir l'état initial du puzzle.
Essayez de glisser et déposer les pièces du puzzle pour les réarranger.
Observez le message de réussite apparaître ou disparaître en fonction de la complétion du puzzle.
Assurez-vous que les pièces du puzzle sont correctement échangées et que les attributs src et data-id des images sont mis à jour en conséquence.

L'effet après la complétion est le suivant :

Effet terminé

Félicitations ! Vous avez réussi à implémenter le jeu de puzzle à l'aide du code fourni. N'hésitez pas à explorer le projet plus avant et à expérimenter des fonctionnalités ou des améliorations supplémentaires.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.

Tracer un avenir