Skip to content

Flappy Bird - Fliege durch die Röhren

In dieser Lektion programmierst du dein eigenes Flappy Bird! Du lernst dabei:

  • Schwerkraft mit Variablen nachzubilden
  • Hindernisse automatisch zu erzeugen und zu bewegen
  • Kollisionen zu erkennen und das Spiel zu beenden

Zeitbedarf

ca. 90 Minuten

So funktioniert das Spiel

Der Vogel fällt ständig nach unten (Schwerkraft). Mit einem Klick flattert er kurz nach oben. Ziel ist es, so lange wie möglich durch die Lücken zwischen den Röhren zu fliegen, ohne eine zu berühren.


Schritt 1: Figuren und Hintergrund einrichten

1.1 Hintergrund wählen

  1. Klicke auf Hintergrund auswählen
  2. Suche nach Blue Sky oder einem ähnlichen Himmel-Hintergrund
  3. Alternativ: Klicke auf Malen und fülle den Hintergrund mit hellblau

1.2 Den Vogel anlegen

  1. Lösche die Katze (Mülleimer-Symbol)
  2. Klicke auf Figur auswählen und suche nach Parrot oder Toucan
  3. Alternativ: Suche nach Bat oder male selbst einen einfachen Vogel
  4. Verkleinere den Vogel auf etwa Grösse 40
  5. Platziere ihn links in der Mitte: x = -150, y = 0

1.3 Die Röhre anlegen

  1. Klicke auf Figur auswählenMalen
  2. Male ein grünes Rechteck, das die ganze Höhe des Bereichs ausfüllt (ca. 50 breit, 400 hoch)
  3. Nenne diese Figur "Röhre"

Tipp

Die Röhre muss nur einmal gezeichnet werden – wir werden sie duplizieren und mit Variablen steuern, um obere und untere Röhre zu erzeugen.


Schritt 2: Schwerkraft und Flattern

Das Herzstück von Flappy Bird ist die Schwerkraft. Wir simulieren sie mit einer Variable geschwindigkeit, die ständig nach unten zieht.

2.1 Variable anlegen

  1. Klicke auf VariablenNeue Variable
  2. Nenne sie "geschwindigkeit"
  3. Stelle sicher, dass sie nur für diese Figur gilt (wähle "Nur für diese Figur")

2.2 Schwerkraft programmieren

Dieser Code läuft beim Vogel und zieht ihn ständig nach unten:

txt
Wenn 🎬 angeklickt
setze [geschwindigkeit v] auf (0)
setze x auf (-150)
setze y auf (0)
wiederhole fortlaufend
    ändere [geschwindigkeit v] um (-0.5)
    ändere y um (geschwindigkeit)

Was passiert hier? Jedes Mal wird geschwindigkeit um 0.5 kleiner (negativer). Der Vogel fällt deshalb immer schneller – genau wie in der Realität!

2.3 Flattern mit Klick

Wenn die Maustaste gedrückt wird, soll der Vogel nach oben schiessen:

txt
Wenn diese Figur angeklickt
setze [geschwindigkeit v] auf (8)

Tipp

Probiere verschiedene Werte aus. Ist 8 zu stark oder zu schwach? Du kannst auch die Leertaste statt dem Klick verwenden: Wenn Taste [Leertaste v] gedrückt

2.4 Boden und Decke

Verhindere, dass der Vogel aus dem Bild fliegt:

txt
Wenn 🎬 angeklickt
wiederhole fortlaufend
    falls (y-Position) < (-170) dann
        stoppe alles
    falls (y-Position) > (170) dann
        setze [geschwindigkeit v] auf (0)

Schritt 3: Die Röhren bewegen

3.1 Grundbewegung der Röhre

Die Röhre soll von rechts nach links durchs Bild fahren. Klicke auf die Röhren-Figur und füge folgenden Code hinzu:

txt
Wenn 🎬 angeklickt
wiederhole fortlaufend
    setze x auf (240)
    wiederhole bis (x-Position) < (-240)
        ändere x um (-3)
    warte (0) Sekunden

Was passiert? Die Röhre startet rechts ausserhalb des Bildes, bewegt sich nach links und erscheint dann wieder von vorne.

3.2 Zufällige Höhe

Damit das Spiel interessant wird, soll die Röhre jedes Mal an einer anderen Höhe erscheinen:

txt
Wenn 🎬 angeklickt
wiederhole fortlaufend
    setze y auf (Zufallszahl von (-80) bis (80))
    setze x auf (240)
    wiederhole bis (x-Position) < (-240)
        ändere x um (-3)

3.3 Obere und untere Röhre

Für die Lücke brauchen wir zwei Röhren. Klicke mit der rechten Maustaste auf die Röhren-Figur und wähle Duplizieren.

  • Untere Röhre: Bleibt wie sie ist (zeigt nach oben)
  • Obere Röhre: Gehe zum Kostüm-Editor und spiegele sie vertikal (Kostüm → Vertikal spiegeln)

Jetzt muss die obere Röhre immer Lücke Pixel über der unteren erscheinen. Erstelle dafür eine neue Variable "lücke" und setze sie auf 180.

Ändere den Code der oberen Röhre so:

txt
Wenn 🎬 angeklickt
wiederhole fortlaufend
    setze y auf ((y-Position von [Untere Röhre v]) + (lücke))
    setze x auf (240)
    wiederhole bis (x-Position) < (-240)
        ändere x um (-3)

Tipp

Beide Röhren müssen sich gleichzeitig bewegen. Stelle sicher, dass beide denselben x-Startwert und dieselbe Geschwindigkeit haben!


Schritt 4: Kollision erkennen

4.1 Vogel trifft Röhre

Füge beim Vogel folgenden Code hinzu:

txt
Wenn 🎬 angeklickt
wiederhole fortlaufend
    falls [wird [Untere Röhre v] berührt? v] dann
        spiele Klang [Crash v]
        stoppe alles
    falls [wird [Obere Röhre v] berührt? v] dann
        spiele Klang [Crash v]
        stoppe alles

4.2 Vogel trifft Boden

Der Boden-Check war schon in Schritt 2.4 drin. Ergänze dort noch einen Ton:

txt
falls (y-Position) < (-170) dann
    spiele Klang [Crash v]
    stoppe alles

Schritt 5: Punkte zählen

5.1 Punkte-Variable

  1. Erstelle eine neue Variable "Punkte" (für alle Figuren)
  2. Setze sie beim Start auf 0
txt
Wenn 🎬 angeklickt
setze [Punkte v] auf (0)

5.2 Punkt vergeben

Der Vogel soll einen Punkt bekommen, wenn er eine Röhre passiert. Wir erkennen das, wenn die Röhre den Vogel links überholt – also wenn die x-Position der Röhre kleiner wird als die x-Position des Vogels.

Füge diesen Code bei der Unteren Röhre ein:

txt
Wenn 🎬 angeklickt
wiederhole fortlaufend
    warte bis (x-Position) < (x-Position von [Vogel v])
    ändere [Punkte v] um (1)
    spiele Klang [Pop v]
    warte bis (x-Position) < (-240)

Denke nach: Warum warten wir nach dem Punkt noch, bis die Röhre ganz links ist? Was würde passieren, wenn wir das nicht tun würden?


Schritt 6: Spielstart und Game Over

6.1 Startbildschirm

Zeige zu Beginn eine Anweisung:

txt
Wenn 🎬 angeklickt
sage [Klicke zum Starten!] für (2) Sekunden

6.2 Game Over Nachricht

Erstelle eine neue Figur mit dem Text "Game Over" (im Kostüm-Editor). Verstecke sie am Anfang und zeige sie am Ende:

txt
Wenn 🎬 angeklickt
verstecke dich

Wenn ich [GameOver v] empfange
zeige dich
sage (verbinde [Punkte: ] mit (Punkte)) für (3) Sekunden

Sende die Nachricht in den Kollisions-Blöcken statt stoppe alles:

txt
falls [wird [Untere Röhre v] berührt? v] dann
    spiele Klang [Crash v]
    sende [GameOver v]
    stoppe [andere Skripte der Figur v]

Schritt 7: Schwierigkeit steigern (optional)

7.1 Röhren werden schneller

Je mehr Punkte der Spieler hat, desto schneller sollen die Röhren werden. Erstelle eine Variable "tempo":

txt
Wenn 🎬 angeklickt
setze [tempo v] auf (-3)
wiederhole fortlaufend
    falls (Punkte) > (5) dann
        setze [tempo v] auf (-4)
    falls (Punkte) > (10) dann
        setze [tempo v] auf (-5)

Ersetze in den Röhren-Skripten ändere x um (-3) durch ändere x um (tempo).

7.2 Lücke wird kleiner

Mache die Lücke kleiner, je mehr Punkte der Spieler hat:

txt
falls (Punkte) > (8) dann
    setze [lücke v] auf (150)
falls (Punkte) > (15) dann
    setze [lücke v] auf (120)

🎯 Zusammenfassung

Was du heute gelernt hast:

KonzeptBeispiel in diesem Spiel
Variablengeschwindigkeit, Punkte, tempo
SchleifenRöhren bewegen, Schwerkraft
BedingungenKollision, Boden, Punkte vergeben
Nachrichtensende [GameOver], empfange [GameOver]
ZufallszahlenZufällige Röhrenhöhe

🚀 Herausforderung

Mach das Spiel noch besser:

  • [ ] Füge einen Highscore hinzu, der auch nach Game Over sichtbar bleibt
  • [ ] Animiere den Vogel (wechsle das Kostüm beim Flattern)
  • [ ] Füge einen Boden hinzu, der sich mitbewegt (Parallax-Effekt)
  • [ ] Mache das Spiel lauter: verschiedene Töne für Flattern, Punkt, und Crash

Viel Spaß mit deinem Flappy Bird!

Informatik & ICT Unterricht Neufeld