Fruchtstapelspiel mit HTML, CSS, JavaScript

JavaScriptJavaScriptIntermediate
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

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:

Fruit elimination game demo

Der nicht entfernbare Effekt ist wie folgt:

Non removable fruit stacking effect

🎯 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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/array_methods -.-> lab-445658{{"Fruchtstapelspiel mit HTML, CSS, JavaScript"}} javascript/dom_select -.-> lab-445658{{"Fruchtstapelspiel mit HTML, CSS, JavaScript"}} javascript/dom_manip -.-> lab-445658{{"Fruchtstapelspiel mit HTML, CSS, JavaScript"}} javascript/event_handle -.-> lab-445658{{"Fruchtstapelspiel mit HTML, CSS, JavaScript"}} end

Aufbau der Projektstruktur

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.
unfinished project screenshot

Füge den Klickereignishandler hinzu

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
});
  1. 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.

Beende das Projekt

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:
Fruit removal demonstration
  1. 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:
Non removable fruit effect

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

✨ Lösung prüfen und üben

Zusammenfassung

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