Fruchtstapelspiel mit HTML, CSS, JavaScript

Einführung

In diesem Projekt lernst du, wie du ein einfaches Fruchtstapelspiel mit HTML, CSS und JavaScript erstellst. Ziel ist es, die fallenden Fruchtgegenstände oben auf der Seite in die Box unten zu stapeln. Wenn in der Box drei identische Früchte vorhanden sind, werden sie automatisch entfernt.

👀 Vorschau

Der eliminierbare Effekt sieht so aus:

Der nicht entfernbare Effekt ist wie folgt:

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Projekt einrichtest, indem du die bereitgestellten Dateien im Editor öffnest
• Wie du einem Klickereignishandler den Fruchtgegenständen oben auf der Seite hinzufügst
• Wie du die Spiellogik implementierst, um die Fruchtgegenstände hinzuzufügen, zu entfernen und zu eliminieren
• Wie du das Projekt abschließt und die Funktionalität testest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• jQuery zum Manipulieren des DOM und zum Verarbeiten von Ereignissen zu verwenden
• Die grundlegende Spiellogik mit JavaScript zu implementieren
• Eine einfache und interaktive Benutzeroberfläche zu erstellen
• Deinen Code zu testen und zu debuggen, um die gewünschte Funktionalität sicherzustellen

Projektstruktur einrichten

In diesem Schritt wirst du das Projekt einrichten, indem du die bereitgestellten Dateien im Editor öffnest.

1. Öffne den Editor und du solltest folgende Dateien sehen: index.html, style.css, jquery.min.js und die Bilddateien.
2. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
3. Öffne "Web 8080" oben in der VM und aktualisiere es manuell, um die Seite zu sehen.

Den Click-Ereignis-Handler hinzufügen

In diesem Schritt wirst du dem Klickereignishandler den Fruchtgegenständen oben auf der Seite hinzufügen.

1. Öffne in der Datei index.html den Abschnitt TODO im <script>-Tag.
2. Der <script>-Tag enthält ein leeres Array von ids-Variablen.

let ids = [];

$("#card li").on("click", function (e) {
  // TODO: Bitte implementieren Sie die Funktion hier
});

3. Füge den folgenden Code im Abschnitt TODO hinzu:

$("#card li").on("click", function (e) {
  // TODO: Bitte implementieren Sie die Funktion hier
  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"
  });
});

Dieser Code fügt einem Klickereignishandler den Fruchtgegenständen oben auf der Seite hinzu. Wenn auf einen Fruchtgegenstand geklickt wird, wird er kloniert und der Box unten auf der Seite hinzugefügt. Wenn in der Box drei identische Früchte vorhanden sind, werden sie entfernt. Wenn das untere Rechteck (id=box)-Element 7 Früchte hat und nicht eliminiert werden kann, ist der geklickte Frucht-Elementknoten nicht im hinzugefügten Rechteck-Element.

Projekt abschließen

In diesem letzten Schritt wirst du das Projekt abschließen, indem du die abschließenden Details hinzufügst.

1. Teste das Projekt, indem du auf die Fruchtgegenstände oben auf der Seite klickst. Vergewissere dich, dass die Früchte der Box hinzugefügt und entfernt werden, wenn drei identische vorhanden sind. Der eliminierbare Effekt sieht so aus:

2. Wenn die Box 7 Früchte hat und keine weiteren entfernt werden können, sollte das Klicken auf das Fruchtgegenstand oben keine Auswirkungen haben. Der nicht entfernbare Effekt ist wie folgt:

Herzlichen Glückwunsch! Du hast das Fruit Stacker-Projekt abgeschlossen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.