HTML, CSS und JavaScript spielend mit Flappy Bird lernen!

HINWEIS: Da wir uns hier im HTML-Abschnitt befinden, betone ich, wie wichtig die genannten Quellen (MDN Web Docs, SELFHTML-Wiki und w3schools) für HTML-Fragen sind. Du findest dort aber auch Antworten auf deine CSS- und JavaScript-Fragen.

Eine Website wie bei einer Zeitung anhand von Headings (Überschriften), Textabschnitten (Parahraphs/Divs) und Footern (Fußnoten) gliedern

Zum Material:

Du findest meinen Pen auch hier: https://codepen.io/Sinah/pen/LYzbBYy

Zum Material:

Du findest meinen Pen auch hier: https://codepen.io/Sinah/pen/podzZqL

Manche HTML-Auszeichnungen führen zu dem gleichen optischen Ergebnis, unterscheiden sich aber in ihrer (semantischen) Bedeutung. Diese wird vom Screenreader erfasst, was besonders wichtig für Menschen mit Seh- oder Leseschwächen sein kann, aber auch von Suchmaschinen und Browsern.

Ich zeige dir hier solche ,,speziellen" Tags und Attribute, die zur Barrierefreiheit einer Website oder Anwendung beitragen können, ihre Kompatibilität erhöhen und technischen Problemen vorbeugen, sowie bei der Suchmaschinenoptimierung (engl. SEO für search engine optimization) eine Rolle spielen.

Zum Material:

Du findest meinen Pen auch hier: https://codepen.io/Sinah/pen/GROKBVN

Hier kommt ein kurzer Überblick darüber, was du bisher über HTML gelernt hast.

Zum Material:

Du willst noch (wesentlich) mehr über HTML lernen und innerhalb weniger Stunden deine eigenen Websites erstellen können? Dann findest du hier meinen HTML-Kurs:
https://www.udemy.com/course/html-crashkurs-eigene-website-und-html5-profi-in-wenigen-stunden/?referralCode=4DCEB9D15975C01E7AE0

Die MDN Web Docs findest du hier: https://developer.mozilla.org/de/

Regeln (rules), Sektoren (selectors), Eigenschaften (properties), Werte (values) sind die Grundbausteine in CSS. Sie alle lernen wir hier kennen.

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/JjrLGgq?editors=1100

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/rNGvKRR?editors=1100

Und die MDN Web Docs hier: https://developer.mozilla.org/de/

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/YzrNZbz

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/yLzMZVp?editors=0011

• Eine Funktion deklarieren bzw. definieren (das Keyword 'function', die Namenskonvention, der Anweisungsblock)

• Eine Funktion aufrufen (Funktionsaufruf, engl.: function invocation)

• Einer Funktion Parameter übergeben

• Den Wert einer Funktion in der Konsole ausgeben lassen (console.log() )

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzyzXw?editors=1011

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzyzXw?editors=1011

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzyzXw?editors=1011

Objekte erlauben es uns, Daten zu strukturieren und unseren Code so übersichtlicher und schneller zu schreiben.

Hier geht's zum Pen dieser Lektion: https://codepen.io/Sinah/pen/qBpxQvr?editors=0010

Je tiefer du ins Programmieren einsteigst, desto wichtiger wird die Verwendung bestimmter verbreiteter Methoden für die Arbeit mit Arrays. In dieser Lektion sehen wir uns die folgenden an:

• map, sort, filter und reduce

• push, pop, shift und unshift

• splice und slice

• isArray

Schreibe dein erstes eigenes Mini-Programm, das Hallo-Welt- oder Hello-World-Programm, klassisch oder freestyle, mit oder ohne Event Target und Styles.

Hier geht's zum Pen: https://codepen.io/Sinah/pen/OJxjJgp?editors=1112

Schalte auf CodeCombat immer neue Level frei, indem du selbst Code schreibst und ihn in Aktion siehst: https://codecombat.com/

Und wenn du mal steckenbleibst: Orientiere dich an den zahlreichen Hinweisen. Schon ein fehlendes Semikolon kann zu Fehlermeldungen führen, aber lass dich nicht entmutigen.

Das Coole an CodeCombat: Du musst (noch) nicht coden können- learning by doing.

Du lernst ein weiteres wichtiges Programm für deine Karriere als Programmierer*in kennen, und zwar VSCode (Visual Studio Code). Dabei handelt es sich um einen kostenlosen Quelltext-Editor mit vielen Features und Erweiterungen.

So, das war's, versprochen. Nach dieser Lektion machen wir uns endlich direkt an das Programmieren in VSCode.

Hier sehen wir, wie wir

• die Sprache in VSCode ändern

• Auto save (Automatisches Speichern) aktivieren

• ein Projekt in VSCode erstellen (mit Dateien und Ordnern) und öffnen

• die Erweiterung Live Server hinzufügen

Um deine Anwendung im Browser zu öffnen, klicke mit rechts auf deine HTML-Datei im VSCode-Explorer (also auf den Namen ,,index.html" links in deiner Datei-Übersicht des Projekts) und wähle ,,Open with Live Server".

Mithilfe eines nützlichen Shortcuts erstellen wir ein HTML-Template in VSCode. Wir lernen den Head oder Kopf unseres Dokuments kennen, den Teil, der ,,hinter den Kulissen" mit Metainformationen für eine reibungslose Darstellung unseres Dokuments sorgt. Unter anderem sehen wir dabei sogenannte Meta-Tags und einige vom Aussterben bedrohte Elemente.

Außerdem gucken wir uns den Body, also den ,,Körper" unserer Anwendung an, der deren sichtbaren Inhalt enthält.

Ein gutes Gefühl für den zweidimensionalen Raum ist sehr nützlich, um dein Spiel mit verschiedenen Formen zu stylen, aber auch für die Logik des Spiels (etwa Kollisionslogik und Animationslogik). Wir bringen hier verschiedene Formen und Text auf unsere ,,Leinwand", den Canvas.

________________________________

Auf dem Canvas zeichnen/Koordinatensystem (MDN Web Docs): https://developer.mozilla.org/de/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Rekursive Funktionen (engl.: recursive functions) stellen einen wichtigen Teil in der Spieleentwicklung dar. Wir lernen die Vorteile der JavaScript-Funktion ,,requestAnimationFrame" kennen, wenn es um leistungsstarke Animationen geht. Wir sehen auch, wie die Funktion ,,cancelAnimationFrame" funktioniert.

Außerdem erkläre ich dir das Konzept der Callback-Funktionen, der If/Else-Bedingungen und den Unterschied zwischen Parametern und Argumenten (engl. arguments).

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/oNGqXaz?editors=0011

Lernziele:

• Funktionsdeklaration (function declaration) vs. Funktionsausdruck (function expression)

• Anonyme Funktionen (anonymous functions)

• Arrow function/Pfeilfunktion/Lambda-Ausdruck

• Einzeilige Pfeilfunktion

• setTimeout

• eine Zeichenkette bilden (aus statischem String,  dynamischer Variable/Argument, Addition-Operator (+) und Leerzeichen)

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/yLzjdpW?editors=0011

Wir vollenden unsere HTML-Datei und fügen alle Bilddateien zum Projekt hinzu.

Wir sehen den Shortcut "html:5" und "!", weitere habe ich dir unten verlinkt. Außerdem findest du dort Quellen zum Nachlesen über die Konzepte dieser Lektion und meine Bilder sowie den HTML-Code zum Download.

Um deine Anwendung im Browser zu öffnen, klicke mit rechts auf deine HTML-Datei im VSCode-Explorer (also auf den Namen ,,index.html" links in deiner Datei-Übersicht des Projekts) und wähle ,,Open with Live Server".

_______________________________________________________________________________

Die Bilder kannst du einzeln oder im ZIP-Ordner herunterladen.

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben in unterschiedlichen Dateiversionen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Wir kommen zur JavaScript-Datei. Per DOM Manipulation greifen wir auf den Canvas, unsere ,,Leinwand" zu, umranden diesen schwarz und erstellen unseren 2D-Context. Statt der Methoden getElementById und getContext kannst du auch getElementsByClassName, wenn du deinem Canvas eine Klasse gibst. Auch diese Methode verlinke ich dir.

Wir laden unsere Bilder und zeichnen sie unter Beachtung der Maße auf den Canvas. Wir erstellen einen Event Handler für das Window-Objekt, damit nach dem Laden der Seite unsere Bilder dargestellt werden.

_______________________________________________________________________________

Zum Material:

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben als unterschiedliche Dateitypen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Endlich bringen wir Leben in unsere Bilder! Falls du dich schonmal gefragt hast, wie Animationen funktionieren: Hier erfährst du es. Außerdem sorgen wir dafür, dass es nirgendwo hakt und hängt, sondern die Bewegungen flüssig sind. Für die Spieler*innen sieht es zunächst aus, als befänden sie sich in einer Endlosschleife, doch natürlich sehen wir auch, wie wir unsere Animation wieder abbrechen, sobald das Spiel vorbei ist.

_______________________________________________________________________________

Zum Material:

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben als unterschiedliche Dateitypen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Wir sehen hier verschiedene Wege, den Vogel zu lenken und lernen Tricks kennen, mit denen wir diese Animation flüssiger machen.

_______________________________________________________________________________

Zum Material:

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben als unterschiedliche Dateitypen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Kollisionslogiken fallen nicht immer leicht. Es hilft, sie sich bildlich zu verdeutlichen. Daher zeige ich dir in dieser Lektion eine kleine Präsentation, bevor wir den erarbeiteten Code in unsere Datei einfügen und damit das Spiel abschließen. Konkret heißt das: Wir sorgen für den Abbruch des Spiels, wenn der Vogel mit den Rohren kollidiert und für die Erhöhung des Punktestands, wenn er hindurchfliegt.

_______________________________________________________________________________

Zum Material:

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben als unterschiedliche Dateitypen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Es war schön mit dir! Hoffentlich bleibst du dran und hast noch viele Programmier-Erfolgserlebnisse. Vielleicht auch in einem meiner weiteren Kurse?

Dort erkläre ich zum Beispiel, wie du mit Grundlagen in HTML, CSS und JavaScript ein anderes Spiel (Pong Game) programmierst (mit einer wiederum anderen Animations- und Kollisions-Logik als Flappy Bird). Du erfährst auch, wie du Musik für Start und Gameover einfügst sowie einen Start- und Neustart-Knopf:

https://www.udemy.com/course/lets-play-programmiere-dein-game-lerne-javascript-css-und-html/?referralCode=FB443A16D973181F1C21

Vielleicht willst du auch noch viel mehr über HTML lernen und wie du damit deine eigenen Websites baust. Dann schau' doch mal hier vorbei. Auch Inhalte wie das Internet, Web und Frontend sind Thema:

https://www.udemy.com/course/html-crashkurs-eigene-website-und-html5-profi-in-wenigen-stunden/?referralCode=4DCEB9D15975C01E7AE0

Oder möchtest du HTML und CSS im Doppelpack lernen und damit schöne, multimediale und responsive Websites erstellen? Dann bist du hier richtig:

https://www.udemy.com/course/html-css-frontend-website-programmierung-webentwicklung-crashkurs/?referralCode=FA9C30F5130E54B529EA