Das schaffst du heute
Du programmierst ein Space-Invaders-Spiel: Ein Raumschiff bewegt sich mit Links- und Rechts-Taste horizontal und weicht herabstürzenden Meteoren aus. Bei einer Kollision erscheint „Game Over".
1
Canvas & Spielidee
ca. 10 min
Um Spiele zu entwickeln, benötigt man auf dem Screen eine Fläche, auf der man Grafiken positionieren und bewegen kann. Die Funktion Canvas in Thunkable ist ein solches Werkzeug.
1
Neues Projekt anlegen und Canvas einfügen
Erstelle ein neues Projekt (Name: Name-Vorname-Datum-von-heute) und ziehe die Komponente Canvas auf den Screen. Du findest sie in der linken Spalte unter User Interface.
Die Canvas-Komponente in der linken Spalte – eingekreist
Canvas und Sprites: Der Canvas ist die Spielfläche. Auf ihr bewegen sich sogenannte Sprites – das sind Grafiken, die programmiert werden können (z. B. ein Raumschiff oder ein Meteor). Um die Komponente zu bearbeiten, klicke auf Stage. Wie in Thunkable üblich, wird zunächst das Design erstellt (Sprites positionieren), anschließend wird ihre Funktion im Blocks-Editor programmiert.
Spielidee: Mit einer Links- und Rechtstaste soll ein Raumschiff horizontal bewegt werden und so vor herabstürzenden Meteoren geschützt werden.
2
Sprites herunterladen & einrichten
ca. 20 min
Folgende Sprites enthält das Spiel – lade sie alle herunter und halte sie bereit:
⚙️ Sprites in Stage1 einrichten
Im Element Stage1 können die Sprites hochgeladen und eingefügt werden:
So sieht der Komponentenbaum aus – unter Stage1 sind alle Sprite-Typen eingetragen
1
Sprite Types anlegen
Klicke auf Add Sprite Type und lade die Sprites auf der rechten Seite hoch. Benenne jeden Sprite-Typ entsprechend seiner Funktion um:
Den voreingestellten Biber-Sprite kannst du löschen.
Sprite-Schiff, Sprite-Links, Sprite-Rechts, Sprite-Start, Sprite-Stopp, Sprite-Game-Over, Sprite_MeteorDen voreingestellten Biber-Sprite kannst du löschen.
2
Bilder hochladen
Klicke auf jeden Sprite-Typ, wechsle rechts zur Registerkarte Simple und lade unter Picture List das passende Bild per Upload Files hoch.
✅ Checkliste
- Alle 7 Sprites heruntergeladen
- Canvas auf den Screen gezogen
- Alle 7 Sprite-Typen in Stage1 angelegt und benannt
- Alle Bilder hochgeladen und den richtigen Sprites zugewiesen
3
Design – Elemente anordnen
ca. 15 min
Ordne die Elemente auf dem Canvas wie folgt an:
So sollen die Elemente auf dem Spielfeld angeordnet sein
Aufbau des Spielfelds:
- Game-Over – großer roter Button oben in der Mitte (zunächst versteckt)
- Start – kleiner Button oben (sichtbar beim Start)
- Raumschiff – Sprite in der Mitte des Screens
- Links-Taste – unten links
- Stop – unten in der Mitte
- Rechts-Taste – unten rechts
✅ Checkliste
- Game-Over-Sprite ist oben platziert
- Raumschiff ist in der Mitte des Screens
- Links-, Stop- und Rechts-Taste sind unten angeordnet
4
Blocks programmieren
ca. 30 min
Jetzt können die Elemente programmiert werden. Wechsle dazu in den Block-Editor (oben rechts auf Blocks klicken). Die Programmbausteine für das Spiel findest du unter Canvas Blocks in der linken Leiste.
Setze den folgenden Code um:
Der vollständige Block-Code – klicke zum Vergrößern
Erklärung der Blöcke:
when Canvas1 loads→ hide Sprite-Game-Over (Game-Over am Anfang unsichtbar)when Sprite-Links is clicked→ Sprite-Schiff x-speed = −150 (Schiff fliegt links)when Sprite-Rechts is clicked→ Sprite-Schiff x-speed = 150 (Schiff fliegt rechts)when Sprite-Stopp is clicked→ stop all sprites on Canvas1when Sprite-Schiff collides with Sprite_Meteor→ Kollision entfernen, alle anhalten, Game-Over zeigen, 3 Sek. warten, Start zeigen, Game-Over versteckenwhen Sprite-Start is clicked→ Schiff zeigen, Start verstecken, Meteor an zufälliger x-Position (40–320), y=40 erstellen, y-Speed = 200when Sprite_Meteor collides with bottom edge→ Meteor entfernen, neuen Meteor an zufälliger Position spawnen
✅ Checkliste
- Canvas1 loads → Game-Over wird versteckt
- Links- und Rechts-Taste bewegen das Schiff
- Start-Button startet das Spiel und lässt Meteore fallen
- Stopp-Button hält alle Sprites an
- Kollision Schiff–Meteor löst Game-Over aus
- Meteor am unteren Rand wird durch neuen Meteor ersetzt
5
Testen & Abgabe
ca. 10 min
Aufgabe: Erstelle das Space-Invaders-Spiel
Baue das vollständige Spiel nach. Teste es in Thunkable Live auf dem Handy und prüfe:
- Bewegt sich das Schiff mit Links/Rechts korrekt?
- Fallen Meteore von oben herab und erscheinen nach dem Verschwinden neu?
- Erscheint „Game Over" bei einer Kollision?
- Startet das Spiel nach dem Game-Over neu?
Bonus: Kannst du die Meteor-Geschwindigkeit erhöhen, je länger das Spiel läuft?
📤 Abgabe
1
Projektdetails öffnen
Gehe zur Startseite von Thunkable → drei Punkte neben der App → Project Detail Page.
2
Link kopieren und abgeben
Kopiere den Link oben auf der Seite und sende ihn an die Lehrkraft. Apps nur in Absprache löschen.
✅ Tages-Checkliste
- Canvas mit allen Sprites ist eingerichtet
- Alle Blöcke sind programmiert
- Spiel in Thunkable Live getestet – alles funktioniert
- Projekt-Link abgegeben