Packt

Game Time 2024 - Erstellen Sie ein JavaScript-Spiel mit zufälliger Reihenfolge

Sichern Sie sich eines unserer besten Angebote mit Coursera Plus für 199 $ (normalerweise 399 $). Jetzt sparen.

Packt

Game Time 2024 - Erstellen Sie ein JavaScript-Spiel mit zufälliger Reihenfolge

Bei Coursera PlusMehr erfahren enthalten

Fragen Sie Coursera

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.
Stufe Mittel

Empfohlene Erfahrung

8 Stunden zu vervollständigen
Flexibler Zeitplan
In Ihrem eigenen Lerntempo lernen
Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.
Stufe Mittel

Empfohlene Erfahrung

8 Stunden zu vervollständigen
Flexibler Zeitplan
In Ihrem eigenen Lerntempo lernen

Was Sie lernen werden

  • Erfahren Sie, wie Sie mit HTML, CSS und JavaScript ein dynamisches Kartenspiel erstellen

  • Lerne JavaScript-Konzepte wie async/await, die Fetch-API und den Fisher-Yates-Shuffle.

  • Lernen Sie, wie Sie die DOM-Bearbeitung mithilfe von Dokumentfragmenten und einer effizienten Ereignisbehandlung optimieren können.

  • Sammeln Sie praktische Erfahrungen mit CSS Grid und fortgeschrittenen Styling-Techniken für responsive Designs.

Kompetenzen, die Sie erwerben

  • Kategorie: Animation und Spieldesign
  • Kategorie: Ereignisgesteuerte Programmierung
  • Kategorie: HTML und CSS
  • Kategorie: Entwicklung von Videospielen
  • Kategorie: Reaktionsfähiges Web-Design
  • Kategorie: Algorithmen
  • Kategorie: Animationen
  • Kategorie: Web-Design und Entwicklung
  • Kategorie: Spiel-Design
  • Kategorie: Wiederverwendbarkeit von Code

Werkzeuge, die Sie lernen werden

  • Kategorie: Hypertext Markup Language (HTML)
  • Kategorie: Frontend-Leistung
  • Kategorie: Cascading Style Sheets (CSS)
  • Kategorie: JSON

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

7 Aufgaben

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

 Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

In diesem Kurs gibt es 6 Module

In diesem Modul starten wir das Projekt, indem wir die grundlegende HTML-Struktur einrichten, uns mit den Grundlagen von CSS für Layout und Design befassen und wichtige Styling-Konzepte wie REM vs. EM sowie CSS Grid vorstellen. Außerdem lernst du, wie du mithilfe von Root-Variablen einheitliche Stile verwaltest, und erhältst Einblicke in Best Practices für eine übersichtliche, skalierbare CSS-Struktur.

Das ist alles enthalten

6 Videos1 Lektüre1 Aufgabe

In diesem Modul konzentrieren wir uns darauf, das CSS-Grid mit dynamisch aus einer JSON-Datei geladenen Karten zu füllen. Sie lernen, wie Sie Daten mithilfe von `async/await`, `Fetch` und Array-Methoden wie `map()` und `flatMap()` abrufen und verarbeiten. Darüber hinaus werden wir effiziente Techniken zur DOM-Manipulation untersuchen, beispielsweise die Verwendung von Dokumentfragmenten, um die Leistung beim Hinzufügen von Karten zum Raster zu verbessern.

Das ist alles enthalten

17 Videos1 Aufgabe

In diesem Modul werden wir Interaktivität mithilfe dynamischer Ereignisbehandler implementieren und CSS-3D-Transformationen für einen flüssigen Umblättereffekt nutzen. Außerdem lernst du, wie du die Reihenfolge der Karten mithilfe des Fisher-Yates-Mischalgorithmus zufällig anordnest und häufige Probleme im Zusammenhang mit Arrays in JavaScript behebst. Abschließend werden wir unseren Code mithilfe von Destrukturierungszuweisungen und anderen Best Practices vereinfachen.

Das ist alles enthalten

8 Videos1 Aufgabe

In diesem Modul fügen wir die erforderliche Logik hinzu, um übereinstimmende und nicht übereinstimmende Karten zu erkennen. Sie lernen, wie Sie Flags einsetzen, um Benutzerinteraktionen einzuschränken, den ternären Operator für logische Prüfungen anwenden und setTimeout() für zeitgesteuerte Aktionen implementieren. Darüber hinaus werden wir uns damit befassen, wie man Spielzustände zurücksetzt und wiederholte Klicks verhindert, um das Spielerlebnis insgesamt zu verbessern.

Das ist alles enthalten

7 Videos1 Aufgabe

In diesem Modul fügen wir einen spannenden visuellen Effekt hinzu, indem wir fallende Sterne programmieren und eine Überlagerung für das Ende des Spiels implementieren. Du lernst, wie du mit JavaScript- und CSS-Animationen den Effekt fallender Sterne erzeugst und das Spiel-Timing mit setInterval und clearInterval steuerst, um den Spielablauf zu regeln. Außerdem werden das Testen und Bereinigen der Animationselemente behandelt, um eine reibungslose Leistung zu gewährleisten.

Das ist alles enthalten

10 Videos1 Aufgabe

In diesem Modul schließen wir den Kurs ab, indem wir die Konzepte und Fähigkeiten wiederholen, die Sie beim Erstellen Ihres JavaScript-basierten Spiels erworben haben. Wir fassen die im Laufe des Kurses verwendeten Techniken zusammen und überlegen, wie Sie diese in zukünftigen Projekten anwenden können, damit Sie bereit sind, neue Herausforderungen in der Spieleentwicklung anzugehen.

Das ist alles enthalten

1 Video2 Aufgaben

Dozent

Packt - Course Instructors
Packt
1.946 Kurse586.353 Lernende

von

Packt

Mehr von Mobile und Web-Entwicklung entdecken

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018
„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020
„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021
„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Häufig gestellte Fragen