3
← Zurück zur Übersicht

Spielmechanik bauen

Projekt 2 startet · 5 Schulstunden à 45 min
🎮
Tagesziel
Das Reaktionsspiel läuft: Ein Ziel erscheint auf dem Canvas an einer zufälligen Stelle, die Reaktionszeit wird mit der Clock-Komponente gemessen, 5 Runden werden gespielt und ein Game-Over-Screen zeigt das Ergebnis.
🎨
Canvas & ImageSprite sind App Inventors Werkzeuge für Spiele. Der Canvas ist die Spielfläche (wie ein Zeichenbrett). Ein ImageSprite ist ein bewegliches Objekt auf diesem Canvas – perfekt als Ziel zum Antippen. Die Clock-Komponente kann die aktuelle Zeit in Millisekunden messen und Ereignisse nach einer bestimmten Zeit auslösen.
1
Std.
Einstieg
Spielidee & neues Projekt anlegen
Was macht ein Spiel spaßig? Kurze Diskussion. Das Reaktionsspiel: Ein farbiger Kreis erscheint irgendwo auf dem Screen – wer am schnellsten tippt, gewinnt.
1
Neues Projekt anlegen
Projects → Start new project → Name: Reaktionsspiel. Dann wieder Connect → AI Companion.
2
Screen vorbereiten
Screen1: BackgroundColor = Dunkelgrau oder Schwarz. Zwei Labels oben: LabelRunde (Text: „Runde 1/5") und LabelZeit (Text: „– ms").
2
Std.
Bauen
Canvas & ImageSprite: Ziel zufällig positionieren
Wir bauen die Spielfläche mit einem beweglichen Zielobjekt auf.
Neue Komponenten: Canvas ImageSprite Clock
1
Canvas hinzufügen
Palette: Drawing and Animation → Canvas. Width = Fill parent, Height = 400px. Name: Canvas1.
2
ImageSprite als Ziel
Drawing and Animation → ImageSprite in den Canvas ziehen. Width = Height = 60. Name: SpritZiel.
3
Clock-Komponente hinzufügen
Palette: Sensors → Clock. TimerEnabled = false, TimerInterval = 100. Name: Clock1.
4
Prozedur „NeueRunde" in Blocks
Prozedur NeueRunde: SpritZiel.X = random integer from 0 to Canvas1.Width - 60, SpritZiel.Y = random integer from 0 to Canvas1.Height - 60. Variable startzeit auf Clock1.Now setzen.
💡
KI-Tipp: Frage Claude: „Was ist ein ImageSprite in MIT App Inventor und wie bewege ich es?"
3
Std.
Bauen
Reaktionszeit messen
Wenn das Ziel angetippt wird, berechnen wir die vergangene Zeit seit Beginn der Runde.
1
Variable „startzeit" anlegen
initialize global startzeit to 0. In NeueRunde: set global startzeit to Clock1.Now.
2
„When SpritZiel.Touched"-Block
when SpritZiel.Touched do: set global reaktionszeit to Clock1.Now - startzeit.
3
Zeit anzeigen
set LabelZeit.Text to join reaktionszeit " ms". Auf dem Handy testen – wie schnell bist du?
💡
KI-Tipp: Frage Claude: „Wie funktioniert Zeitmessung in MIT App Inventor mit der Clock-Komponente?"
4
Std.
Bauen
Runden zählen, Durchschnitt & Game Over
Das Spiel läuft 5 Runden, berechnet die Durchschnittszeit und wechselt dann zum Ergebnis-Screen.
1
Variablen für Runden
initialize global runde to 1, initialize global gesamtzeit to 0. Nach jedem Treffer: gesamtzeit += reaktionszeit, runde += 1.
2
Rundenanzeige aktualisieren
set LabelRunde.Text to join "Runde " runde "/5". Bei runde <= 5: call NeueRunde. Bei runde > 5: weiter zu Schritt 3.
3
Game-Over-Screen anlegen
Im Designer: Add Screen → Name: GameOver. Dort: Label für Durchschnittszeit, Label für Highscore, Button „Nochmal spielen".
4
Navigation & Highscore
Wenn runde > 5: open another screen: GameOver. TinyDB für Highscore (kleinere Zeit = besser). Button „Nochmal": zurück zu Screen1.
5
Std.
Reflexion
Gegenseitig testen & Bugs finden
Tausche dein Handy mit der Nachbarin oder dem Nachbar. Spiele das Spiel und notiere 1–2 Dinge die noch nicht funktionieren. Gemeinsam die häufigsten Fehler besprechen. Ausblick Tag 4: Sound, Animationen, eigene Erweiterungen und Abschlusspräsentation.
← Tag 2 Tag 4: Finishing & Präsentation →