Spieleprogrammierung: Pong in Scratch

Anforderungen an Inspirer

Wer beruflich oder im Studium gewisse Programmiererfahrung gesammelt hat - egal worin - sattelt sich das fix auf. Wenn du einen Scratch-Kurs geben willst, check Folgendes für dich ab:
  • Du hast alle Programmierkonstrukte verstanden und kannst sie anschaulich erklären.
    -> Das heißt hier vor allem, dass du dich so viel mit Scratch beschäftigt hast, dass du in der Lage bist, deine eigenen Programmierideen in Scratch auszudrücken. Zum Beispiel gibt es dort keine Datenstrukturen.
  • Du weißt, wie die Entwicklungsumgebung funktioniert und kannst eine verständliche und hilfreiche Einführung dazu halten.
  • Du kannst mit 5. - 7.-Klässlern so kommunizieren, dass sie sich ernst genommen fühlen.
  • Du kannst auch erfahreneren Teilnehmenden Aufgaben geben, die sie nicht unterfordern - das muss zum Beispiel auch gar nicht mehr Scratch sein.

Genereller Ablauf

  • Der Kurs beginnt mit der Begrüßung im Plenum. Ein erfahrener Inspirer übernimmt die Einführung in das Thema und versucht sicherzustellen, dass die Technik bei den Meisten funktioniert. Danach werden die Teilnehmenden in kleine Teams eingeteilt. Jeder Inspirer ist während dem Kurs für etwa 4 bis 6 Teilnehmende verantwortlich.
  • Die eingeteilten Teams werden in Breakout-Rooms (bei Zoom) eingeteilt. Wenn ihr in den Breakout Rooms Fragen habt, ruft gerne über Zoom um Hilfe. Der Haupt-Inspirer wird dann zu euch in den Breakout-Room kommen.
  • Vorstellungsrunde in den Gruppen. Stellt euch einmal vor und erklärt gerne, wie ihr zu der IT gekommen seid. Lasst die Teilnehmenden sich vorstellen, inklusive Programmiererfahrung, Erwartungen und Motivation.
  • Jetzt geht es ans Eingemachte: Programmieren! Mehr Informationen zu den Einheiten findet ihr unten.
  • Versucht nach etwa der Halbzeit eine Pause von 30 Minuten einzulegen.
  • Der Abschluss findet wieder im Plenum mit der gesamten Klasse statt. Hier stellt sich jeder Inspirer einmal kurz vor und erklärt, warum er*sie für IT brennt.

P.S.: Vergesst nicht, eure Pausen zu machen 🙂

Hinweise zum Konzept

Lernziele

  • Es geht darum, die Teilnehmenden zu begeistern. Unser Ziel ist es, dass sie sich nach den 3 Stunden Kurs noch 12 Stunden hinsetzen und weiter recherchieren und programmieren. Wie das bei euch konkret aussieht, ist euch überlassen. Ihr merkt, die Teilnehmenden haben voll Lust mit euch eine halbe Stunde über Roboter zu reden? Dann macht das gerne.
  • Versucht eher, den Teilnehmenden grundlegende Konzepte beizubringen (“Wie debugge ich ein Programm?”), als Ihnen diese eine Eigenheit von Python lang und breit zu erklären. Zeigt/erklärt ihnen auch gerne, wo das, was sie gerade lernen, im echten Leben zum Einsatz kommt.
  • Lasst die Teilnehmenden so viele Schritte wie möglich selbst gehen. Sie werden so am Meisten lernen, und sind hoffentlich auch in der Lage, an das Gelernte nach Ende des Kurses anknüpfen zu können.
  • Lasst sie dabei auch scheitern. Im Optimalfall versucht ihr dann mit ihnen gemeinsam zu ergründen, wieso ihr Ansatz nicht funktioniert hat – dadurch müssen sie ihre Gedanken kommunizieren, und lernen so mehr.
  • Dieses Konzept ist unser Vorschlag, wie man Kinder und Jugendliche begeistern könnte. Seht es also mehr als groben Leitfaden und weniger als festen Lehrplan.

Feedback und Fragen an kurskonzepte@hacker-school.de.

Technologie

  • Wir arbeiten während des Kurses mit dem Online-Editor von Scratch → https://scratch.mit.edu/projects/editor
  • Scratch ist eine graphische Programmiersprache vom MIT, die es besonders einfach macht eigene kleine Spiele zu entwickeln.
  • Der Online Editor funktioniert ohne Account, wir können also sofort loslegen. Wenn man trotzdem Projekte speichern möchte, muss man sich entweder einen Account erstellen oder über Datei > Auf deinem Computer speichern die Datei speichern.
  • Wir gehen den Editor im Briefing einmal kurz mit euch durch.

Vorlage

Wir haben für den Kurs ein (mögliches) Projekt fertiggestellt, das ihr euch anschauen, herunterladen und als Anhaltspunkt verwenden könnt.

Ein paar denkbare Erweiterungen gibt es auch:

Wenn ihr wollt, könnt ihr selbst im Voraus Erweiterungen implementieren, um sie den Teilnehmer:innen als Inspiration zu geben. (Details: siehe Erweiterungen).
Dafür bietet es sich an, unser Beispielprojekt zu kopieren – damit die Codebasis mit der hier übereinstimmt.

Konzept

Begrüßung und generelle Motivation

  • Wer sind wir und was wünschen wir uns? (an die Kinder gerichtet)
    • Hacker School: Wir wollen, dass ihr alle etwas mitnehmen könnt. Uns ist es lieber, dass ihr Zusammenhänge verstanden habt, aber dafür insgesamt weniger Stoff. (Wird trotzdem vorkommen, dass euch Dinge überfordern, aber das ist normal. Behaltet das trotzdem im Hinterkopf)
    • Vordergründig bringen wir euch heute Programmieren bei, aber eigentlich geht es uns auch darum, euch mit Menschen zusammenzubringen, die das richtige Mindset haben. Damit ihr von Ihnen lernen könnt. Wenn ihr inhaltlich überhaupt nichts verstehen solltet, aber dafür die Fehlerkultur mitnehmt, sind wir happy.
    • A propos Fehlerkultur: Wenn ihr etwas nicht versteht – fragt nach. Das hier soll alles werden, bloß kein Frontalunterricht, in dem ihr Dinge schlucken, verdauen und nachher wieder auskotzen sollt. Uns geht es darum, dass ihr Spaß habt, und vor allem: etwas für euch lernt und mitnehmt. Und gerade dem stehen so ein paar Dinge im Weg, wie: Schon beim ersten kleinen Fitzelchen Syntax zu scheitern. Also: Wenn ihr jetzt gleich bei euren Inspirern seid und euer Programm nicht funktioniert, was macht ihr dann? Richtig. Fragt nach.
  • grober inhaltlicher Überblick
  • zeitlicher Überblick
  • Einmal kurz die Technologie durchgehen

Vorstellungsrunde

  • Stellt euch selber vor. (2-3 Sätze)
    • Was habt ihr gemacht, als ihr so alt wart wie die Teilnehmenden?
  • Lasst die Teilnehmenden sich vorstellen.
    • Wie heißt du?
    • Hast du schonmal programmiert?
    • Was erhoffst du dir von diesem Kurs?

Wichtig: achtet darauf, dass die Kinder sich nur mit Vornamen vorstellen – Datenschutz.

Zeit: ~ 3h + 30 min Pause
Ort: Kleingruppe
Verantwortlich: Inspirer

Wir programmieren Pong: Intro

In diesem Teil richten wir uns nach dem Pong-Tutorial auf der Seite https://scratch.mit.edu/projects/editor. Ihr findet es über Tutorien > Pong-Spiel.
Dieser Teil ist relativ eng angeleitet. Teilt euren Bildschirm, programmiert vor und lasst den Teilnehmenden danach Zeit, euch nachzuprogrammieren und auch eigene Ideen und Ansätze auszuprobieren.
Unser Programm besteht am Ende aus drei Gegenständen: Ball, Paddle und Linie. Im Weiteren werden diese Teile einzeln programmiert.

Teilt euren Bildschirm und zeigt ihnen dieses Beispiel-Spiel, damit sich die Teilnehmenden gut vorstellen können, woran wir die nächste Zeit arbeiten werden.
Lasst sie kurz überlegen, wie sie selber dieses Spiel modifizieren können und was sie gerne Kreatives daran ändern möchten.
Die Teilnehmenden sollen explizit dazu angeregt werden, kreativ zu werden, was die Wahl von Hintergrund und Kostümen angeht.

Jetzt bekommen die Teilnehmenden den Link für den Online Editor: https://scratch.mit.edu/projects/editor
Bei Scratch ist es für die Teilnehmenden vor allem wichtig, viel selbst auszuprobieren, da sie nur so die Konzepte richtig begreifen. Es geht also weniger darum, den von uns vorgeschlagenen Code genau so nachher auf den Bildschirmen der Teilnehmenden zu sehen, sondern darum, grundlegende Konzepte anhand dieses Codes zu erlernen.
Fangt daher gerne damit an, gemeinsam mit der Webseite zu experimentieren und erklärt währenddessen, was ihr gerade macht.
Gebt ihnen immer genug Zeit selbst Dinge auszuprobieren und mit ihrem Projekt herumzuspielen.
Achtet darauf, dass alle die Seite geöffnet haben, bevor ihr weitermacht.

Eigene Kostüme, eigener Hintergrund

Lasst die Teilnehmenden in ihrem eigenen Editor einen eigenen Hintergrund wählen.
Dies geht unten rechts unter Bühnenbild wählen.

Nun sollen die Teilnehmenden ihren Ball anpassen.
Dafür gehen sie unten rechts auf Figur wählen und wählen eine neue Figur aus.
Die Katze, die standardmäßig auf der Bühne erscheint, kann gelöscht werden.
Wählt einen Ball aus.

Funktionen aufrufen

  • Jeder Code in Scratch braucht einen Auslöser/ein Event (zB. Klick, grüne Flagge, Berührung)
    Beispiele aus dem echten Leben wären: Youtube - Play Button; Ampel - Knopf drücken; intelligenter Rollladen - Uhrzeit
  • 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 nun an den diesen Block anheften, wird ausgeführt, sobald die grüne Flagge gedrückt wird.

Bewegung

(Ball)

Fügt als nächstes Bewegungen hinzu. Zeigt ihnen dafür den gehe 10er Schritt-Block.
Lasst die Kinder ausprobieren, ob sie es hinbekommen, dass der Ball sich ein bisschen nach rechts bewegt.

Schleifen

(Ball)

Um nicht die ganze Zeit klicken zu müssen, können wir Schleifen verwenden. Da es (noch) keine Endbedingung für unser Spiel gibt, erstellen wir eine Endlosschleife um den Bewegungsblock.

Lasst die Teilnehmenden den Code ausführen. Der Ball schießt plötzlich nach rechts an den Rand und bewegt sich dann gar nicht mehr. Woran liegt das? Wie könnten wir das ändern?
  • Wie hätten wir gerne, dass der Ball sich verhält?
  • Wann sollte der Ball seine Richtung ändern?
  • In welche Richtung sollte der Ball sich dann bewegen?

If-Bedingungen

(Ball)

Manche Programmteile wollen wir nur unter bestimmten Bedingungen ausführen. (Im echten Leben: "Wenn es regnet, ziehe ich eine Regenjacke an, sonst nicht.")
In unserem Fall: Wenn der Ball die Wand berührt, dann (...) pralle vom Rand ab.
Fügt folgenden Code zu eurem Programm hinzu:

Hier ist ein guter Zeitpunkt, um auf die verschiedenen Kategorien (Farben) von Bausteinen einzugehen. Fragt, wo die Teilnehmenden verschiedene Bausteine vermuten würden, um frühzeitig ein Verständnis für die Struktur der Seite zu vermitteln.

Bewegung

(Paddle)

Fügt ein Paddle hinzu (unten rechts: neue Figur hinzufügen). Der*die Spieler*in bewegt nachher das Paddle, damit der Ball nicht den Boden berührt. Um das Paddle zu programmieren, muss man dieses unten auswählen. Im Programmierfeld rechts oben sieht man das Bild des Gegenstandes, den man gerade programmiert.

Da wir das Paddle mit der Maus steuern wollen, setzen wir die x-Position des Paddles auf die x-Koordinate unserer Maus.
Verwendet dafür folgenden Code:

Interaktion zwischen Objekten

(Ball)

Bisher fliegt der Ball durch das Paddle hindurch. Der Ball und das Paddle interagieren nicht miteinander.
Fügt folgenden Code zu dem Ball hinzu und erklärt jeden Baustein:

Endbedingung

(Linie)

Nun fehlt dem Spiel nur noch eines: Ein Ende.
Bisher passiert nichts, wenn der Ball den unteren Rand berührt. Das wollen wir ändern.
Dafür fügen wir am unteren Rand eine Linie hinzu (auch bei Figuren zu finden).
Genau wie bei dem Paddle müssen wir jetzt für die Linie Code schreiben.

Ab hier funktioniert das Spiel grundsätzlich. Bevor die Teilnehmenden komplett frei arbeiten, bietet es sich an, noch zwei kleine Erweiterungen vorzunehmen.

Korrektes Abprallen

(Ball)

Hierfür muss man ein bisschen mit den Einfalls- und Ausfallswinkeln herumüberlegen.

  • Der Ball soll beim Abprallen die Richtung umkehren (drehe dich um 180)
  • Aber er sollte nicht in dieselbe Richtung zurückfliegen - da wir hier eine “richtige” Physik möchten wir, dass Einfallswinkel = Ausfallswinkel gilt. Um das zu implementieren, machen wir uns die Variable Richtung (in der Skizze alpha) zunutze. (- 2 * Richtung)
  • Um das Spiel interessanter zu machen, soll sich die Richtung zusätzlich um eine Zufallszahl variabel verändern.

Spawnen

(Ball)

Damit der Ball immer an einem festen Punkt startet, kann man den folgenden Block vor der Endlosschleife im Ball hinzufügen:

Erweiterungen

Ab hier könnt ihr die Teilnehmenden komplett frei arbeiten lassen, und sie hauptsächlich dabei unterstützen, ihre eigenen Ideen umzusetzen.
Als Erstes können die Teilnehmenden noch einmal mit Kostümen, Hintergründen, Geschwindigkeit, Farben o.Ä. herumspielen. Das lockert die Atmosphäre auf und sorgt für schnellere Erfolgserlebnisse.
Einige weiterführende Ideen:

  • zusätzliche Bälle
  • einen Multiplayer-Modus (oben ein weiteres Line+Paddle-Paar, die Steuerung dann über Pfeil / WASD)
  • Score/Highscore einführen (dazu braucht man Variablen, das Ganze ist im offiziellen Scratch Tutorial gut umgesetzt)
  • Ton, wenn der Ball das Paddle berührt (auch im Tutorial zu finden)

Außerdem gibt es bei Scratch noch einen ganzen Haufen weiterer Tutorials unter Tutorien (über den Online Editor zu finden)

Abschluss

~5 min
  • Wenn ihr eurer Gruppe am Ende noch Feedback geben wollt, dann nehmt euch gerne jetzt Zeit dafür.
  • Fragt nach, ob jemand (in der Abschlussrunde im großen Plenum) vorstellen möchte, was ihr so gemacht habt.
~20 min
  • Die Teilnehmenden stellen ihre Projekte vor (eine*r pro Gruppe), und erzählen ein bisschen, was sie so gemacht haben.
  • Die Inspirer reden über sich, wie sie zur IT gekommen sind, was ihnen daran Spaß macht, wieso sie es weiterhin machen wollen, und was sie den Jugendlichen gerne mitgeben möchten.
  • (Wenn erwünscht, bekommt der*die Lehrer*in kurz das Wort)
  • Feedbacklink geht raus