Scratch-Einstiegskurs – Bewegung mit der Maus
In diesem Blog-Beitrag stelle ich euch das dritte Tutorial meines Einstiegskurses in der Programmierung mit Scratch vor. In diesem Tutorial lernt ihr, wie ihr eine Figur innerhalb eines bestimmten Bereiches mit der Maus bewegen könnt.
In dieser Blog-Serie sind bereits andere Tutorials erschienen. Ich empfehle dir, diese zu erst durchzuarbeiten, bevor du mit diesem dritten Tutorial beginnst.
- Tutorial 1: Automatische Bewegungen
- Tutorial 2: Bewegung mit der Tastatur
Ausprobieren
Bevor du mit der Programmierung deiner eigenen Figur beginnst, kannst du hier erst einmal ausprobieren, wie das Programm funktioniert. Starte das Programm dafür, indem du das Symbol mit der kleinen grünen Flagge anklickst. Anschließend kannst du die Katze mit der Maus bewegen. Probiere auch aus, was passiert, wenn du mit der Katze nach oben in den blauen Himmel läufst.
Kurzanleitung
Zur vollständigen Anleitung wechseln
In dieser Kurzanleitung bekommst du nun einen schnellen Einstieg in dieses neue Tutorial. Falls du eine ausführliche Schritt-für-Schritt-Anleitung benötigst, kannst du dir diese weiter unten auf dieser Seite ansehen.
Öffne nun den Programmcode des Beispiel-Programms, das du gerade ausprobiert hast, in dem du auf diesen Link klickst: https://scratch.mit.edu/projects/636272417/editor/. Auf der Seite, die sich durch diesen Link öffnet, findest du alle benötigten Programmbausteine, um eine Figur zu programmieren, die sich mit der Maus bewegen lässt. Lies dir auch genau, die Kommentare durch, die du an jedem Programmabschnitt findest. Sie erklären dir genau, wie der jeweilige Programmcode funktioniert.
Nun bist du dran. Erstelle ein eigenes Programm mit einer eigenen Figur und einem eigenen Bühnenbild. Du kannst dabei deiner Phantasie freien Lauf lassen. Wähle jedoch dein Bühnenbild so aus, dass sich deine Figur nur innerhalb eines bestimmten Bereiches bewegen darf. In unserem Beispielprogramm darf die Katze sich beispielsweise nur auf dem braunen Fußboden bewegen.
Wenn du alle Code-Blöcke in dein eigenes Programm übernommen hast, dann kannst du dieses über das kleine grüne Flaggen-Symbol starten.
Überprüfe nun, dass dein Programm genauso funktioniert, wie du es erwartest und das sich deine Figur nur innerhalb des gewünschten Bereiches bewegt. Falls dein Programm noch nicht so funktioniert, wie du es eigentlich sollte, kannst du die vollständige Anleitung weiter unten nutzen, um deinen Programmcode noch einmal Schritt für Schritt zu überprüfen.
Wenn du möchtest kannst du es anschließend noch weiter individualisieren und anpassen. Versuche doch mal noch eine der folgenden Aufgaben zu lösen:
- Ändere die Geschwindigkeit mit der sich deine Figur bewegt
- Schwierig: Baue mit Hilfe verschiedener Kostüme eine zusätzliche visuelle Bewegung deiner Figur ein, sodass es aussieht, als ob deine Figur beim Laufen ihre Beine bewegt
Gut gemacht! Du hast nun gelernt, wie du beliebige Figuren mit Hilfe der Maus bewegen kannst. Wenn du möchtest, kannst du dir nun die weiteren Tutorials dieser Blog-Serie ansehen.
Vollständige Anleitung
Schritt 1: Eigene Figur und eigenes Bühnenbild einfügen
Erstelle dir zunächst ein neues Scratch-Projekt. Du kannst dafür den folgenden Link verwenden:
Nach dem du dein neues Scratch-Projekt geöffnet hast, suche dir zunächst eine eigene Figur und ein eigenes Bühnenbild aus. Achte dabei darauf, dass du das Bühnenbild so wählst, das sich deine Figur später nur in einem bestimmten Bereich der Bildes bewegen darf. Darüber hinaus ist deiner Phantasie jedoch freier Lauf gelassen und du darfst wählen, was auch immer du gern möchtest.
Falls du nicht mehr genau weißt, wie man eine eigene Figur oder ein eigens Bühnenbild in Scratch einfügt, dann schau dir das doch einfach noch einmal im ersten Tutorial dieser Serie an: Scratch-Einstiegskurs – Automatische Bewegungen.
Schritt 2: Die Figur vorbereiten
Nun beginnst du mit der Programmierung deiner Figur. Stelle dafür zunächst sicher, dass deine Figur ausgewählt ist, indem du die Figur rechts unten in der Figuren-Übersicht kurz anklickst. Deine ausgewählte Figur wird in der Übersicht immer mit einen farbigen, leuchtenden Rand dargestellt. Die Unterscheidung ist besonders wichtig, wenn du mit mehreren Figuren arbeitest, da jede Figur ihren eigenen Programmcode erhält.
Ergänze nun den folgenden Code für deine Figur. Du kennst das bereits an aus den beiden ersten Tutorials dieser Blog-Serie. Der Code sorgt dafür, dass sich deine Figur zu Beginn des Programmes an der richtigen Stelle auf der Bühne befindet und in die richtige Richtung schaut.
Schritt 3: Die Bewegung mit der Maus programmieren
Nun folgt ein sehr umfangreicher Programmierblock, den du erstmal für Figur übernehmen kannst. Du benötigst dafür Blöcke aus den Bereichen „Ereignisse“, „Bewegung“, „Steuerung“, „Fühlen“ und „Operatoren“.
Damit dein Programm auf das Klicken deiner Maus reagiert, nutzt du die Blöcke „falls…dann“ (Steuerung) und „Maustaste gedrückt“ (Fühlen). Alles, was du innerhalb dieses Blockes platzierst, wird immer genau dann ausgeführt, wenn die (linke) Maustaste gedrückt wird. Damit diese Prüfung während der gesamten Ausführung deines Programmes erfolgt, ist es wichtig, dass du als äußersten Block deines Programmes die Schleife „wiederhole fortlaufend“ ergänzt. Häufig vergessen Nachwuchs-Programmierer:innen diesen Programmcode und wundern sich dann, dass ihr Programm nicht funktioniert.
Die inneren Programmierblöcke unterteilen sich nun in zwei Abschnitte. Der erste Abschnitt sorgt dafür, dass sich die Figur beim Laufen immer in Richtung des Mauszeigers dreht. Dafür werden die aktuelle X-Position deiner Figur und die X-Position deiner Maus verglichen. Befindet sich die Figur rechts von der Maus („falls x-Position > Maus x-Position, dann“), so dreht sich die Figur nach links („setze Richtung auf -90 Grad“). Im anderen Fall („sonst“) dreht sich die Figur nach rechts („setze Richtung auf 90 Grad“).
Der zweite Codeabschnitt sorgt für die Bewegung der Figur. Dafür wird einfach der Bewegungsblock „gleite in … Sek. zu x:… y: …“ genutzt. Im Beispielprogramm werden dafür zwei Fälle unterschieden. Wenn die Y-Position der Maus größer als 0 ist, sich also in der oberen Hälfte des Bühnenbildes befindet, dann wird lediglich die X-Position der Figur verändert. Das bedeutet, dass sich die Figur niemals weiter nach oben als bis zur Bildhälfte bewegen kann. Im Beispielprogramm kann sich die Katze also nur auf dem braunen Boden bewegen. Wenn die Y-Position der Maus kleiner als 0 ist, dann wird für die Bewegung hingegen sowohl die „Maus x-Position“ als auch die „Maus y-Position“ berücksichtigt. Das hat zur Folge, dass sich die Katze im Beispiel frei innerhalb der braunen Fläche bewegen kann.
Schritt 4: Figur am Rand abprallen lassen
Im letzten Schritt dieses Programmes sorgst du dafür, dass deine Figur nicht über den Rand hinausläuft. Das kennst du bereits aus dem Tutorial 2 – Bewegung mit der Tastatur. Wenn du den Programmcode ergänzt hast, wird deine Figur immer automatisch ein kleines Stück zurückspringen, sobald diese den Rand des Bühnenbildes erreicht hat.
Geschafft!
Du hast nun alle nötigen Programmierblöcke für dein Programm eingefügt. Nun kannst du dein Programm testen und ausprobieren, indem du es über das kleine grüne Flaggensymbol startest.
