Scratch: Flappy Bird

Gebt den Teilnehmenden den Link zum online Scratch-Editor:

https://scratch.mit.edu/projects/editor

Diesen Editor kann man sofort ohne Anmeldung benutzen.

Sollten eure Teilnehmenden ihr Spiel abspeichern wollen, gibt es später einen kleinen Abschnitt dazu, wie das geht. Wir beginnen jetzt aber erst einmal mit dem Programmieren.

Sobald der Editor offen ist, kann man das Aussehen der Figur ändern. Zu Beginn ist es egal, ob man eine neue Figur erstellt oder nur das Kostüm ändert. Sobald Code für die Figur geschrieben worden ist, darf nur noch das Kostüm geändert werden, sonst geht der Code verloren!

Also: von Anfang an immer nur das Kostüm, also das "Aussehen" ändern.

Das geht oben Links unter dem Tab "Kostüme".

Der Tab "Kostüme" sollte so aussehen:

Dort in der linken Spalte ganz unten auf das Katze +-Icon klicken und ein beliebiges Kostüm auswählen. Figuren, von denen es mehrere Varianten gibt, kann man später "animieren", sodass sie sich bewegen. Das gibt es neben Parrot zum Beispiel auch für Bat, Butterfly 2, Griffin, Hare, Toucan und Unicorn. Die Kostümnamen sind leider unabhängig von der Spracheinstellung immer auf Englisch.

Die beiden Katzenkostüme können gelöscht werden, sobald die Teilnehmenden ein neues hinzugefügt haben.

Bei einigen Kostümen muss die Größe angepasst werden (beim Parrot haben wir 30 gewählt). Das geht unten rechts im Feld Größe. Lasst sie außerdem eine gute Startposition (horizontal links, vertikal mittig) für ihr Kostüm aussuchen. Die x- und y-Werte sind für jedes Kostüm anders. Die genaue Position brauchen wir gleich, also merkt sie euch.

Achtet darauf, dass alle ein offenes Projekt und selber ausgewählten Charakter haben, bevor ihr weiter macht. Das kann manchmal ein wenig dauern :)

• Jeder Codeblock in Scratch braucht einen Auslöser/ein Event (zB. Klick, grüne Flagge, Berührung). Beispiele, die zur Erläuterung helfen: Play Button bei YouTube; Knopf drücken an der Ampel; Uhrzeit – intelligenter Rollladen
• Unser “Startereignis” in Scratch ist der Klick auf die grüne Flagge oben links über dem Bühnenbild. Fügt den Wenn grüne Flagge angeklickt wird-Block hinzu. Code, den wir an den diesen Block anheften, wird ausgeführt, sobald die grüne Flagge gedrückt wird
• Die Startposition unserer Figur soll im linken Teil des Bildschirms und vertikal mittig sein:
  • Fügt gehe zu x: 0 y: 0 hinzu
  • Ändert dann die Koordinaten (z.B.: x: -180, y: 0)

Je nach Alter und Klassenstufe sind Koordinatensysteme vielleicht noch unbekannt. Sollte das der Fall sein, erklärt gerne kurz, wie das hier funktioniert (unsichtbare vertikale und horizontale Linien mit 0 je in der Mitte des Bildschirmes).

Fügt als Nächstes die Schwerkraft hinzu. Zeigt ihnen dafür den ändere y um -5-Block.

Um eindeutig zischen horizontaler und vertikaler Bewegung zu unterscheiden, verwenden wir hier diesen Block und keine andere Variante, Bewegung zu implementieren.

Falls jemand einen anderen Weg findet, ist das natürlich auch gerne gesehen.

Wenn wir das Spiel starten, stellen wir fest, dass sich die Figur nur einmal ganz kurz bewegt. Um das zu ändern, können wir Schleifen verwenden. Da es (noch) keine Endbedingung für unser Spiel gibt, erstellen wir eine Endlosschleife um den Bewegungsblock.

Jetzt fällt unsere Figur bis auf den Boden.

Damit unsere Figur auch fliegen und nicht nur fallen kann, fügen wir als Nächstes die Bewegung nach oben hinzu.

Wir wollen die Figur nur nach oben bewegen, wenn die Spielerin tippt. Das heißt, wir brauchen Bedingungen. Eine intuitive Erklärung aus dem echten Leben ist "Wenn es regnet, ziehe ich eine Regenjacke an, sonst nicht." Bei uns lautet die Bedingung "Wenn Spielerin tippt, dann bewege die Figur nach oben. Sonst bewegen wir uns nach unten (Schwerkraft)."

Als Code sieht das so aus:

Je nachdem wie viel Zeit schon vergangen ist, kann hier ein guter Zeitpunkt für eine Pause sein.

Als Nächstes suchen wir uns ein Hindernis aus. Dafür unten rechts unter Figur auf das Katze +-Symbol klicken.

Wir haben "building-j" gewählt.

Wichtig: es darf nicht nur das Kostüm der Figur geändert werden. Wir wollen ein neues Objekt hinzufügen.

Achtet außerdem hier ganz besonders darauf, dass niemand seine Figur löscht, sonst geht der bisherige Code verloren.

Genau wie die Figur sollen sich auch die Hindernisse automatisch bewegen.

Wählt unten rechts das Hindernis aus. Dass das erfolgreich war, erkennt man daran, dass kein Code auf dem Bildschirm zu sehen ist und dass in dem Feld, indem Code stehen könnte oben rechts klein das Hindernis zu sehen ist.

Fügt dann analog zur Figur den Bewegungscode für das Hindernis hinzu.

Damit das Spiel nicht nur ein, sondern viele Hindernisse hat, klonen wir unser Hindernis. Das funktioniert, indem wir den Code wie folgt ändern:

Nachdem die Hindernisse ganz nach Links gewandert sind, bleiben sie am linken Rand "stecken". Um das zu ändern, fügen wir eine neue Bedingung hinzu:

Damit das Spiel auch ein Ende hat, implementieren wir als Nächstes das "Sterben" der Figur. Dazu müssen wir zunächst wieder zurück zum Code für die Figur navigieren. Einfach unten rechts die Figur auswählen.

Wir wollen das Spiel beenden, wenn

• Die Figur den Rand oben oder unten berührt.
• Die Figur ein Hindernis berührt.

Diesmal brauchen wir keinen sonst-Fall:

Ab hier ist das Spiel problemlos spielbar :)

Wenn ihr das Gefühl habt, die Teilnehmenden haben wenig Lust noch mehr zu programmieren, lasst sie ihr Spiel spielen, vielleicht mit Kostümen kreativ werden (begleitet von noch einer Warnung, nicht den Code zu löschen ;D ). Es gibt aber einige Erweiterungen, die unterschiedlich aufwändig und kompliziert sind. Hier sind einige einfache Erweiterungen aufgelistet. Sie sind grob nach Schwierigkeit sortiert.