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
- Klicke auf Hintergrund auswählen
- Suche nach
Blue Skyoder einem ähnlichen Himmel-Hintergrund - Alternativ: Klicke auf Malen und fülle den Hintergrund mit hellblau
1.2 Den Vogel anlegen
- Lösche die Katze (Mülleimer-Symbol)
- Klicke auf Figur auswählen und suche nach
ParrotoderToucan - Alternativ: Suche nach
Batoder male selbst einen einfachen Vogel - Verkleinere den Vogel auf etwa Grösse 40
- Platziere ihn links in der Mitte: x = -150, y = 0
1.3 Die Röhre anlegen
- Klicke auf Figur auswählen → Malen
- Male ein grünes Rechteck, das die ganze Höhe des Bereichs ausfüllt (ca. 50 breit, 400 hoch)
- 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
- Klicke auf Variablen → Neue Variable
- Nenne sie "geschwindigkeit"
- 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:
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
geschwindigkeitum 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:
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:
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:
Wenn 🎬 angeklickt
wiederhole fortlaufend
setze x auf (240)
wiederhole bis (x-Position) < (-240)
ändere x um (-3)
warte (0) SekundenWas 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:
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:
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:
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 alles4.2 Vogel trifft Boden
Der Boden-Check war schon in Schritt 2.4 drin. Ergänze dort noch einen Ton:
falls (y-Position) < (-170) dann
spiele Klang [Crash v]
stoppe allesSchritt 5: Punkte zählen
5.1 Punkte-Variable
- Erstelle eine neue Variable "Punkte" (für alle Figuren)
- Setze sie beim Start auf 0
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:
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:
Wenn 🎬 angeklickt
sage [Klicke zum Starten!] für (2) Sekunden6.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:
Wenn 🎬 angeklickt
verstecke dich
Wenn ich [GameOver v] empfange
zeige dich
sage (verbinde [Punkte: ] mit (Punkte)) für (3) SekundenSende die Nachricht in den Kollisions-Blöcken statt stoppe alles:
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":
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:
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:
| Konzept | Beispiel in diesem Spiel |
|---|---|
| Variablen | geschwindigkeit, Punkte, tempo |
| Schleifen | Röhren bewegen, Schwerkraft |
| Bedingungen | Kollision, Boden, Punkte vergeben |
| Nachrichten | sende [GameOver], empfange [GameOver] |
| Zufallszahlen | Zufä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!