Programmiere dein Flappy Bird Spiel!

Name: Programmiere dein Flappy Bird Spiel!
Rating: 4.7 (26 reviews)

Eine Stunde, 100 Zeilen Code! Trainiere deine Kenntnisse in HTML und JavaScript und dein räumliches Verständnis.

Highest Rated

Created bySinah S.

Last updated 9/2025

German

What you'll learn

Dein eigenes Flappy Bird Spiel nachbauen und frei nutzen
Ein besseres Verständnis für die Spielelogik entwickeln (2D-Raum, Kollisionslogik, Animationen etc.)
Grundkenntnisse in HTML und JavaScript verbessern
Dein Spiel anschließend einfach veröffentlichen, verschenken, selber spielen etc.

Course content

3 sections • 9 lectures • 1h 21m total length

Hallo und willkommen!0:35
Schön, dass du hier bist! Kurze Begrüßung, dann geht es gleich rein ins Geschehen.
Für den genauen Aufbau des Kurses orientiere dich gerne an den Titeln und Beschreibungen der Lektionen.
Installation VSCode3:24
Falls noch nicht geschehen: Installiere VSCode für unser Spiel.
Setup VSCode7:41
So, das war's, versprochen. Nach dieser Lektion machen wir uns endlich direkt an das Programmieren unseres Flappy Bird Clons.
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".

HTML-Code und Bild-Dateien6:05
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.
Bilder auf den Canvas zeichnen und skalieren13:33
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.
Bewegte Bilder: Animationen21:44
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.
Den Vogel lenken mit Event Handlers9:53
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.
Die Kollisionslogik: Vogel vs. Rohre16:13
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.

Tipps & Tschüß2:30
Es war schön mit dir! Hoffentlich bleibst du dran und hast noch viele Programmier-Erfolgserlebnisse. In einem meiner anderen Kurse erkläre ich Grundlagen in HTML, CSS und JavaScript und zeige, wie du damit ein anderes Spiel (Pong Game) programmierst. Du erfährst dort 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

Requirements

Relevante Grundkenntnisse in HTML und JavaScript werden empfohlen
Sonst brauchst du nur einen Computer mit Internetzugang und ein paar Stunden deiner Zeit.
Alle verwendeten Programme und Plattformen sind kostenlos.

Description

Willkommen!

In diesem Kurs zeige ich dir Schritt für Schritt, wie du innerhalb kürzester Zeit dein eigenes ,,Flappy Bird" programmierst- und das mit gerade einmal 100 Zeilen Code oder weniger. Vielleicht kennst du dieses Spiel noch aus deiner Kindheit.

Wer behauptet, dass Programmieren trocken sein muss, liegt falsch: Wir tauchen direkt in dieses spannende und kurzweilige, interaktive Projekt ein. Nach dem Kurs wirst du dann immer ein eigens programmiertes Spiel haben, dass du selbst spielen, veröffentlichen oder verschenken kannst. Du besitzt damit auch ein außergewöhnliches Vorzeige-Projekt für die Jobsuche. Und du hast eine Vorlage, mit der du schon sehr bald deine ganz eigenen Spiele wirst erstellen können. Natürlich stelle ich dir in jeder Lektion meinen eigenen Code zum Vergleich zur Verfügung und verlinke dir Material zu den behandelten Konzepten. Alle Lektionen gibt es außerdem zum Download, damit du von überall bequem lernen kannst.

Mein Ziel ist es, möglichst anschaulich und unterhaltsam etwas fortgeschrittenere Konzepte in HTML und JavaScript bei dir zu verfestigen. Du kannst das Flappy-Bird-Spiel auch dann mit mir nachbauen, wenn du noch nie im Leben programmiert hast. Um aber wirklich zu verstehen, was wir machen werden, solltest du schon einige Vorkenntnisse besitzen. Wenn du nach einem noch passenderen Kurs suchst, schau gerne auch in meinen anderen Kursen vorbei!

Das erwartet dich hier:

Festigung deiner bisherigen Kenntnisse in HTML und JavaScript (Funktionen, Arrays, for, if/else, DOM Manipulation, Canvas)
Besseres Verständnis für Spielelogik (Kollisionslogik, Bilder im 2D-Raum, fließende Animationen erstellen)
ein tolles Endprodukt, das du für immer frei verwenden kannst (spielen, veröffentlichen, verschenken, individualisieren/verändern)
Sehr wahrscheinlich: Spaß, Glücksmomente und Stolz

Ich freue mich auf dich. Bis dann!

#flappybird #programmieren #webdevelopment #browsergames #programming #coding #happycoding #gamedevelopment #spieleentwicklung #javascript #lerneprogrammieren #html #browserspiele #js #2dgames

Who this course is for:

Programmierer*innen mit Vorkenntnissen in HTML und JavaScript, die ein spannendes und interaktives Projekt erstellen wollen

Programmiere dein Flappy Bird Spiel!

What you'll learn

Explore related topics

Course content

Einführung und Setup3 lectures • 12min

Let's play!5 lectures • 1hr 7min

Abschluss1 lecture • 3min

Requirements

Description

Who this course is for: