Maulwürfe fangen – ein Spiel programmieren

Im Spiel MoleMash taucht ein Maulwurf an zufälligen Positionen auf einem Spielfeld auf, und der Spieler erhält Punkte, wenn er den Maulwurf trifft, bevor er wegspringt. Dieses Tutorial zeigt, wie man MoleMash als Beispiel für ein einfaches Spiel mit Animation erstellt.

Autor	Mikko Muilu
Fach	Informatik, Mathematik
Länge	120 Minuten
Ansatz	Problem-Basiertes Lernen
Kompetenzen	Verstehen, wie die Computerspiele funktionieren und welche Art von Mathematik ihnen zugrunde liegt
Klasse	5-6. Klasse
Technologien	Computer und Android -Geräte MIT App Inventor

Beschreibung

Verbinden Sie sich mit der App Inventor Website und starten Sie ein neues Projekt. Nennen Sie es “MoleMash” und setzen Sie auch den Titel des Bildschirms auf “MoleMash”. Öffnen Sie den Blocks Editor und verbinden Sie sich mit dem Telefon.

Laden Sie auch dieses Bild eines Maulwurfs herunter und speichern Sie es auf Ihrem Computer.

Einführung

Sie werden das Spiel so gestalten, dass sich der Maulwurf jede halbe Sekunde einmal bewegt. Wenn er berührt wird, erhöht sich der Punktestand um eins und das Telefon vibriert. Durch Drücken von “Neustart” wird der Punktestand auf Null zurückgesetzt.

Wie das Spiel nach der Fertigstellung aussieht

Dieser Lehrgang führt in die Thematik ein:

• Bild-Sprites
• Zeitgeber und die Komponente Uhr
• Verfahren
• Auswahl von Zufallszahlen zwischen 0 und 1
• Textbausteine
• Schriftblocks

Die ersten Komponenten

Mehrere Komponenten sollten aus früheren Tutorials bekannt sein:

• Ein Canvas mit dem Namen “MyCanvas”. Dies ist der Bereich, in dem sich der Maulwurf bewegt.
• Ein Label namens “ScoreLabel”, das den Punktestand anzeigt, d.h. wie oft der Spieler den Maulwurf getroffen hat.
• Eine Schaltfläche mit dem Namen “ResetButton”.

Ziehen Sie diese Komponenten aus der Palette auf den Viewer und weisen Sie ihnen Namen zu. Legen Sie MyCanvas obenauf und setzen Sie seine Abmessungen auf 300 Pixel Breite und 300 Pixel Höhe. Setzen Sie den Text von ScoreLabel auf “Score: -“. Setzen Sie den Text von ResetButton auf “Reset”. Fügen Sie außerdem eine Soundkomponente hinzu und nennen Sie sie “Noise”. Sie werden Noise verwenden, um das Telefon vibrieren zu lassen, wenn der Maulwurf getroffen wird, ähnlich wie Sie das Kätzchen in HelloPurr schnurren ließen.

Zeitgeber und die Komponente Uhr

Sie müssen dafür sorgen, dass der Maulwurf in regelmäßigen Abständen springt, und das tun Sie mit Hilfe der Komponente Uhr. Die Komponente Clock bietet verschiedene Operationen, die mit der Zeit zu tun haben, wie z. B. die Anzeige des Datums. Hier verwenden Sie die Komponente als Zeitgeber, der in regelmäßigen Abständen ausgelöst wird. Das Auslöseintervall wird durch die Eigenschaft TimerInterval der Uhr bestimmt. Ziehen Sie eine Uhr-Komponente in den Bereich der nicht sichtbaren Komponenten. Nennen Sie sie “MoleTimer”. Setzen Sie ihr TimeInterval auf 500 Millisekunden, damit sich der Maulwurf jede halbe Sekunde bewegt. Stellen Sie sicher, dass TimerEnabled markiert ist.

Hinzufügen eines Bild-Sprites

Um den sich bewegenden Maulwurf hinzuzufügen, werden wir ein Sprite verwenden.

Sprites sind Bilder, die sich auf dem Bildschirm innerhalb eines Canvas bewegen können. Jedes Sprite hat eine Geschwindigkeit und eine Richtung sowie ein Intervall, das bestimmt, wie oft sich das Sprite mit der angegebenen Geschwindigkeit bewegt. Sprites können auch erkennen, wenn sie berührt werden. In MoleMash hat der Maulwurf eine Geschwindigkeit von Null, er bewegt sich also nicht von selbst. Stattdessen legen Sie die Position des Maulwurfs jedes Mal fest, wenn der Timer ausgelöst wird. Ziehen Sie eine ImageSprite-Komponente auf den Viewer. Sie finden diese Komponente in der Kategorie Zeichnung und Animation der Palette. Platzieren Sie sie im Bereich MyCanvas. Legen Sie diese Eigenschaften für das Maulwurf-Sprite fest:

• Bild: Verwenden Sie die Datei mole.png, die Sie zu Beginn dieses Lehrgangs auf Ihren Computer heruntergeladen haben.
• Aktiviert: markiert
• Intervall: 500 (Das Intervall spielt hier keine Rolle, da die Geschwindigkeit des Maulwurfs gleich Null ist: Er bewegt sich nicht von selbst).
• Überschrift: 0 Auch hier spielt der Kurs keine Rolle, da die Geschwindigkeit 0 ist.
• Geschwindigkeit: 0,0
• Sichtbar: markiert
• Breite: Automatisch
• Höhe: Automatisch

Sie sollten sehen, dass die x- und y-Eigenschaften bereits ausgefüllt sind. Sie wurden durch die Position des Maulwurfs bestimmt, als Sie ihn auf MyCanvas gezogen haben. Ziehen Sie den Maulwurf noch ein wenig weiter. Sie sollten sehen, dass sich x und y ändern. Sie sollten auch sehen, dass sich der Maulwurf auf dem angeschlossenen Telefon befindet und dass er sich auf dem Telefon bewegt, wenn Sie ihn im Designer verschieben. Sie haben nun alle Komponenten festgelegt. Der Designer sollte wie folgt aussehen. Beachten Sie, dass Maulwurf in der Komponentenstrukturliste unter MyCanvas eingerückt ist, was bedeutet, dass das Sprite eine Unterkomponente der Leinwand ist.

• Bild: Verwenden Sie die Datei mole.png, die Sie zu Beginn dieses Lehrgangs auf Ihren Computer heruntergeladen haben.
• Aktiviert: markiert
• Intervall: 500 (Das Intervall spielt hier keine Rolle, da die Geschwindigkeit des Maulwurfs gleich Null ist: er bewegt sich nicht von selbst).
• Überschrift: 0 Auch hier spielt der Kurs keine Rolle, da die Geschwindigkeit 0 ist.
• Geschwindigkeit: 0,0
• Sichtbar: markiert
• Breite: Automatisch
• Höhe: Automatisch

Sie sollten sehen, dass die x- und y-Eigenschaften bereits ausgefüllt sind. Sie wurden durch die Position des Maulwurfs bestimmt, als Sie ihn auf MyCanvas gezogen haben. Ziehen Sie den Maulwurf noch ein wenig weiter. Sie sollten sehen, dass sich x und y ändern. Sie sollten auch sehen, dass sich der Maulwurf auf dem angeschlossenen Telefon befindet und dass er sich auf dem Telefon bewegt, wenn Sie ihn im Designer verschieben. Sie haben nun alle Komponenten festgelegt. Der Designer sollte wie folgt aussehen. Beachten Sie, dass Maulwurf in der Komponentenstrukturliste unter MyCanvas eingerückt ist, was bedeutet, dass das Sprite eine Unterkomponente der Leinwand ist.

Verhalten von Komponenten und Event Handler

Jetzt werden Sie das Verhalten der Komponente festlegen. Dies führt einige neue App Inventor Ideen ein. Die erste ist die Idee einer Prozedur. Eine Übersicht und Erklärung von Prozeduren finden Sie auf der Seite Prozeduren.

Eine Prozedur ist eine Folge von Anweisungen, auf die Sie sich gleichzeitig als einzelnen Befehl beziehen können. Wenn Sie eine Sequenz haben, die Sie mehr als einmal in einem Programm verwenden müssen, können Sie diese als Prozedur definieren, so dass Sie die Sequenz nicht jedes Mal wiederholen müssen, wenn Sie sie verwenden. Prozeduren in App Inventor können Argumente und Rückgabewerte annehmen. Dieses Tutorial behandelt nur den einfachsten Fall: Prozeduren, die keine Argumente annehmen und keine Werte zurückgeben.

Prozeduren definieren

Definieren Sie zwei Verfahren:

MoveMole bewegt das Mole-Sprite an eine neue, zufällige Position auf der Leinwand.

UpdateScore zeigt den Punktestand an, indem es den Text des ScoreLabel ändert

Beginnen Sie mit MoveMole:

• Öffnen Sie im Blocks-Editor unter Built-In die Schublade Prozeduren. Ziehen Sie einen to-Prozedur-Block heraus und ändern Sie die Bezeichnung “Prozedur” in “MoveMole”.Hinweis: Es gibt zwei ähnliche Blöcke: to-Prozedur do und to-Prozedur result. Der to MoveMole-Block hat einen Slot, der mit “do” beschriftet ist. Darin werden die Anweisungen für die Prozedur untergebracht. In diesem Fall gibt es zwei Anweisungen: eine zum Festlegen der x-Position des Maulwurfs und eine zum Festlegen seiner y-Position. In jedem Fall setzen Sie die Position auf einen zufälligen Bruchteil zwischen 0 und 1 der Differenz zwischen der Größe der Leinwand und der Größe des Maulwurfs. Sie erstellen diesen Wert mit Hilfe von Blöcken für Zufallsbrüche und Multiplikation und Subtraktion. Sie finden diese Blöcke in der Schublade “Mathematik”.
• Erstellen Sie die MoveMole-Prozedur. Die fertige Definition sollte wie folgt aussehen:

MoveMole nimmt keine Argumente entgegen, so dass Sie die Mutator-Funktion des Prozedurblocks nicht verwenden müssen. Beachten Sie, wie die Blöcke miteinander verbunden sind: Die erste Anweisung verwendet den Block Mole.X set, um die horizontale Position des Maulwurfs zu bestimmen. Der Wert, der in den Sockel des Blocks gesteckt wird, ist das Ergebnis der Multiplikation:

1. Das Ergebnis des Aufrufs des Zufallsblocks, das einen Wert zwischen 0 und 1 hat
2. Das Ergebnis der Subtraktion der Breite des Maulwurfs von der Breite der Leinwand

Die vertikale Position wird in ähnlicher Weise behandelt.

Nachdem MoveMole fertig ist, wird als nächster Schritt eine Variable mit dem Namen score definiert, die den Wert (Anzahl der Treffer) enthält und mit dem Wert 0 beginnt.

Definieren Sie auch eine Prozedur UpdateScore, die den Punktestand in ScoreLabel anzeigt. Der tatsächliche Inhalt, der in ScoreLabel angezeigt wird, ist der Text “Score: “, der mit dem Wert von score verbunden wird.

• Um den Teil “Score: ” der Beschriftung zu erstellen, ziehen Sie einen Textblock heraus. Ändern Sie den Block so, dass er “Score: ” und nicht ” ” lautet.
• Verwenden Sie einen Verknüpfungsblock, um diesen mit einem Block zu verbinden, der den Wert der Score-Variable angibt. Sie finden den Verknüpfungsblock in der Schublade “Text”.

So sollten Score und UpdateScore aussehen:

Einen Timer hinzufügen

Der nächste Schritt besteht darin, den Maulwurf in Bewegung zu halten. Hier werden Sie MoleTimer verwenden. Uhr-Komponenten haben einen Event-Handler, der when … Timer genannt wird, der wiederholt mit einer durch TimerInterval bestimmten Rate ausgelöst wird.

Richten Sie MoleTimer so ein, dass MoveMole jedes Mal aufgerufen wird, wenn der Timer ausgelöst wird, indem Sie den Event-Handler wie folgt erstellen:

Beachten Sie, wie der Maulwurf auf dem Telefon herumzuspringen beginnt, sobald Sie den Event-Handler definieren. Dies ist ein Beispiel dafür, wie Dinge in App Inventor sofort beginnen zu passieren, sobald Sie sie definieren.

Hinzufügen eines Mole Touch Handlers

Das Programm sollte die Punktzahl jedes Mal erhöhen, wenn der Maulwurf berührt wird. Sprites, wie Leinwände, reagieren auf Berührungsereignisse. Erstellen Sie also einen Berührungs-Event-Handler für Maulwurf, der:

1. Erhöht die Punktzahl.
2. Ruft UpdateScore auf, um den neuen Spielstand anzuzeigen.
3. Lässt das Telefon für 1/10 Sekunde (100 Millisekunden) vibrieren.
4. Ruft MoveMole auf, damit sich der Maulwurf sofort bewegt, anstatt auf den Timer zu warten.

Hier sehen Sie, wie das in Blöcken aussieht. Setzen Sie die When Mole.Touched-Blöcke wie gezeigt zusammen.

Hier ein Tipp: Mit typeblocking: typing können Sie schnell Blöcke erstellen.

• Um einen Werteblock mit 100 zu erstellen, geben Sie einfach 100 ein und drücken die Eingabetaste.
• Um einen MoveMole Block zu erstellen, geben Sie einfach MoveMole ein und wählen den gewünschten Block aus der Liste aus

Den Spielstand zurücksetzen

Ein letztes Detail ist das Zurücksetzen der Punktzahl. Dazu muss lediglich der ResetButton den Punktestand auf 0 setzen und UpdateScore aufrufen.

Vollständiges Programm

Hier ist das vollständige MoleMash-Programm:

Variationen

Sobald Sie das Spiel zum Laufen gebracht haben, können Sie einige Varianten ausprobieren. Zum Beispiel:

• Lassen Sie das Spiel die Geschwindigkeit des Maulwurfs variieren, je nachdem, wie gut der Spieler abschneidet. Um zu variieren, wie schnell sich der Maulwurf bewegt, müssen Sie die Intervall-Eigenschaft des MoleTimers ändern.
• Verfolgen Sie, wann der Spieler den Maulwurf trifft und wann er ihn verfehlt, und zeigen Sie eine Punktzahl für Treffer und Verfehlungen an. Dazu müssen Sie Berührungs-Handler sowohl für den Maulwurf, wie jetzt, als auch für MyCanvas definieren. Ein kleines Problem: Wenn der Spieler den Maulwurf berührt, zählt das dann auch als Berührung für MyCanvas? Die Antwort ist ja. Beide Berührungsereignisse werden registriert.
• Du kannst die Idee des Spiels leicht verändern, indem du das Bild des Maulwurfs durch dein eigenes Gesicht oder etwas anderes ersetzt.
• Entwerfen Sie Ihre eigenen Designs!

Überprüfung

Hier sind einige der Ideen, die in diesem Projekt behandelt werden:

• Sprites sind berührungsempfindliche Formen, die Sie so programmieren können, dass sie sich auf einem Canvas bewegen.
• Die Komponente Clock kann als Timer verwendet werden, um Ereignisse zu erzeugen, die in regelmäßigen Abständen stattfinden.
• Prozeduren werden mit Hilfe von Prozedurblöcken definiert.
• Für jede Prozedur, die Sie definieren, erstellt App Inventor automatisch einen zugehörigen Aufrufblock und legt ihn in der Schublade Prozeduren ab.
• Die Herstellung eines Zufallsfraktionsblocks ergibt eine Zahl zwischen 0 und 1.
• Textblöcke geben Text an, ähnlich wie Zahlenblöcke Zahlen angeben.
• Typeblocking ist eine Möglichkeit, Blöcke schnell zu erstellen, indem man den Namen eines Blocks eingibt.

Das Original-Tutorial ist auf der Website von App inventor veröffentlicht. Dort können Sie auch weitere ähnliche Projekte finden. Die Programmierung wird ebenfalls auf der App Inventor-Website vorgenommen. Sie benötigen ein Google-Konto, um die Website zu betreten. Wenn Sie ein Android-Telefon haben, können Sie Ihr Telefon als Vorschau verwenden und das Spiel schließlich darauf installieren.

This document is distributed in 2021 by the COTA Project Consortium under an Attribution–ShareAlike Creative Commons license (CC BY-SA 4.0). This license allows you to remix, tweak, and build upon this work, as long as you credit the COTA Project Consortium and license your new creations under the identical terms