Fruit for Fun | HTML, CSS, JavaScript-Spieleentwicklung

Einführung

In diesem Projekt lernst du, wie du ein einfames "Fruit for Fun"-Spiel mit HTML, CSS und JavaScript erstellst. Beim Spiel musst du Paare von Fruchtbildern finden, indem du auf die Quadrate auf der Spielfläche klickst.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projekt-Dateien und -Verzeichnisse einrichtest
Wie du die Funktionalität der Start-Schaltfläche implementierst, um die Fruchtbilder anzuzeigen und auszublenden
Wie du die Funktionalität implementierst, um auf die Quadrate zu klicken und die Fruchtbilder anzuzeigen
Wie du die Funktionalität implementierst, um die beiden angeklickten Bilder zu vergleichen und den Score entsprechend zu aktualisieren
Wie du den Score-Display in Echtzeit aktualisierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Ein Web-Entwicklungsprojekt zu strukturieren und zu organisieren
JavaScript zum Manipulieren des DOM und zur Behandlung von Benutzereingaben zu verwenden
jQuery zum Vereinfachen von JavaScript-Code und -Animationen zu verwenden
Die Benutzeroberfläche in Echtzeit basierend auf der Spiel-Logik zu aktualisieren

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -Struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

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

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen. Das Spiel funktioniert nicht richtig, wenn du auf die Start-Schaltfläche klickst, wie folgt:

Vergleichsfunktionalität implementieren

In diesem Schritt wirst du die Funktionalität implementieren, um die beiden angeklickten Bilder zu vergleichen. Folge den Schritten unten, um diesen Schritt abzuschließen:

Füge am Ende der Datei js/index.js die folgende compare()-Funktion hinzu:

// Vergleiche zwei Bilder miteinander, um zu sehen, ob sie gleich sind
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // Verstecke
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

Diese Funktion vergleicht die Quelle der beiden angeklickten Bilder. Wenn sie gleich sind, wird der Score um 2 erhöht und die Quadrate werden versteckt. Wenn sie nicht gleich sind, wird der Score um 2 verringert und die Bilder werden versteckt. $("#score").text(score) aktualisiert das Score-Display in der <p>The current number of points is <span id="score">0</span></p>-Sektion der html-Datei in Echtzeit.

Start-Schaltflächenfunktionalität implementieren

In diesem Schritt wirst du die Funktionalität der Start-Schaltfläche implementieren. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei js/index.js.
Füge im Inneren der startGame()-Funktion folgenden Code hinzu, um die Bilder auf den Quadraten anzuzeigen und anschließend zu verstecken, wenn auf die Start-Schaltfläche geklickt wird:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

In der startGame()-Funktion füge nach dem vorherigen Code folgenden Code hinzu, um die "Start"-Schaltfläche zu verstecken:

// Verstecke Start-Schaltfläche
$("#start").css("visibility", "hidden");

Klickfunktionalität implementieren

In diesem Schritt wirst du die Funktionalität implementieren, um auf die Quadrate zu klicken. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei js/index.js.
Füge im Inneren der startGame()-Funktion folgenden Code hinzu, um das Klickereignis auf den Quadraten zu behandeln:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // Verstecke Start-Schaltfläche
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // Hole die ID des angeklickten Bildes
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

Dieser Code wird die ID des angeklickten Bildes in das images-Array einfügen. Wenn das Bild versteckt ist, wird es angezeigt. Wenn das Bild bereits angezeigt ist, wird es aus dem images-Array entfernt. Wenn es zwei Bilder im images-Array gibt, wird die compare()-Funktion nach einer Verzögerung von 500 Millisekunden aufgerufen.

Nach Abschluss dieser Schritte sollte das "Fruit for Fun"-Spiel voll funktionsfähig sein und das fertige Ergebnis wie folgt aussehen: