Zeichne eine Zukunft

Einführung

In diesem Projekt lernst du, wie du ein interaktives Puzzlespiel mit JavaScript erstellen kannst. Beim Spiel musst du die Puzzleteile neu anordnen, um das vollständige Bild wiederherzustellen. Dadurch erhält der Spieler eine spannende und herausfordernde Erfahrung.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Projektumgebung einrichtest und die Dateistruktur verstehst.
• Wie du die Funktionalität zum Ziehen und Ablegen der Puzzleteile implementierst.
• Wie du überprüft, ob das Puzzle fertiggestellt ist, und dementsprechend eine Erfolgsmeldung anzeigt.
• Wie du das fertige Projekt testest und die richtige Funktionalität des Spiels gewährleistest.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein interaktives Spiel mit JavaScript zu erstellen.
• Die Grundprinzipien der Ziehen- und-Ablegen-Funktionalität in der Webanwendung zu verstehen.
• Die Logik zur Überprüfung der Fertigstellung einer Aufgabe zu implementieren und dem Benutzer Feedback zu geben.
• Erfahrungen im Umgang mit dem Document Object Model (DOM) und der Manipulation von HTML-Elementen zu sammeln.

Projektumgebung einrichten

In diesem Schritt wirst du die Projektsumgebung einrichten und die Dateistruktur verstehen.

1. Öffne die Experimentumgebung und navigiere zum Projektverzeichnis /home/labex/project.

2. Die Verzeichnisstruktur ist wie folgt:

   ├── css
   ├── images
   ├── index.html
   └── js
       └── index.js
   

   • images ist der Projektbilderordner.
   • css ist der Projektstilordner.
   • index.html ist die Hauptseite.
   • js/index.js ist die JavaScript-Datei, in der du den Code hinzufügen musst.

3. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

4. Öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Ziehen- und-Ablegen-Funktionalität implementieren

In diesem Schritt wirst du die Ziehen- und-Ablegen-Funktionalität für die Puzzleteile implementieren.

1. Öffne die Datei js/index.js und finde die Funktion drop.

2. Füge im Inneren der Funktion drop folgenden Code hinzu, um die Bilder des gezogenen Puzzleteils und des Ziel-Puzzleteils zu tauschen:

   // Überprüfe, ob das gezogene Puzzleteil nicht das aktuelle Ziel-Puzzleteil ist
   if (draggedPiece !== this) {
     // TODO
     // Speichere den aktuellen Zustand der gezogenen und des Ziel-Puzzleteile
     let saveArr = [
       [draggedPiece.children[0].src, draggedPiece.children[0].dataset.id],
       [this.children[0].src, this.children[0].dataset.id]
     ];
   
     // Tausche die src- und data-id-Attribute der Bilder
     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];
   }
   
   // Setze das gezogene Puzzleteil zurück
   draggedPiece = null;
   

3. Dieser Code überprüft zunächst, ob das gezogene Puzzleteil nicht das aktuelle Ziel-Puzzleteil ist. Wenn ja, speichert er den aktuellen Zustand der gezogenen und des Ziel-Puzzleteile und tauscht dann die src- und data-id-Attribute der Bilder.

Prüfen auf Puzzlefertigstellung

In diesem Schritt wirst du die Logik implementieren, um zu überprüfen, ob das Puzzle erfolgreich fertiggestellt ist, und dementsprechend die Erfolgsmeldung anzuzeigen oder auszublenden.

1. Öffne die Datei js/index.js und finde die Funktion drop.

2. Füge im Inneren der Funktion drop nach dem Code, den du im vorherigen Schritt hinzugefügt hast, folgenden Code hinzu:

   if (draggedPiece !== this) {
     // TODO
     //...
     // Hole die data-id-Werte aller Bilder im Puzzle-Container
     let imgDataIdList = [...container.getElementsByTagName("img")].map(
       (item) => item.dataset.id
     );
   
     // Überprüfe, ob das Puzzle fertiggestellt ist
     if (imgDataIdList.join(",") === "1,2,3,4,5,6,7,8,9") {
       // Zeige die Erfolgsmeldung an
       successMessage.classList.remove("hide");
       successMessage.classList.add("show");
     } else {
       // Blende die Erfolgsmeldung aus
       successMessage.classList.remove("show");
       successMessage.classList.add("hide");
     }
   }
   

3. Dieser Code holt zunächst die data-id-Werte aller Bilder im Puzzle-Container und überprüft, ob sie in der richtigen Reihenfolge (1 bis 9) sind. Wenn ja, zeigt er die Erfolgsmeldung an, indem er die hide-Klasse entfernt und der Erfolgsmeldungselement die show-Klasse hinzufügt. Andernfalls blendet er die Erfolgsmeldung aus, indem er die show-Klasse entfernt und die hide-Klasse hinzufügt.

Das abgeschlossene Projekt testen

1. Aktualisiere die Seite, um den Anfangszustand des Puzzles zu sehen.
2. Versuche, die Puzzleteile zu ziehen und abzulegen, um sie neu zu ordnen.
3. Beobachte, wie die Erfolgsmeldung je nach Fertigstellung des Puzzles erscheint oder verschwindet.
4. Stelle sicher, dass die Puzzleteile korrekt getauscht werden und die src- und data-id-Attribute der Bilder entsprechend aktualisiert werden.

Der Effekt nach Abschluss ist wie folgt:

Herzlichen Glückwunsch! Sie haben das Puzzlespiel erfolgreich mit dem bereitgestellten Code implementiert. Sie können das Projekt gerne weiter erkunden und mit zusätzlichen Funktionen oder Verbesserungen experimentieren.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Übungen absolvieren, um Ihre Fähigkeiten zu verbessern.