Spiele-App BUMM Teil 2: Spielelogik

Spiele-App BUMM Teil 2: Spielelogik

Wir entwickeln ein kleines Spiel. Es heißt “BUMM”. In diesem Beitrag geht es um die Spielelogik. Das ist Teil 2. Hier kommst du zu Teil 1.

Logik

Wir hatten gelernt, dass die main_activity.xml unser Layout definiert. Heute benötigen wir die MainActivity.java für die Logik. Links in Android Studio wird dir die Projektstruktur gezeigt. Ich empfehle dir auf das Zahnrad zu klicken und die folgenden Einstellungen zu wählen. Das hat sich bewährt, so hast du eine gute Übersicht über alle Ordner und Dateien.

Die Datei, die wir heute brauchen, findest du app/java/[package name]/MainActivity.

Klasse: MainActivity

Die MainActivity ist unser Hauptprogramm. Die Activity wird erzeugt, sobald die App gestartet wird. Es handelt sich hierbei um eine so genannte Klasse. Alle Codes, die wir schreiben, fassen wir inhaltlich in Klassen zusammen. Eine Klasse erkennst du am Schlüsselwort “class”. Die MainActivity erweitert dabei eine Klasse, die Android schon mitbringt, nämlich die “AppCompatActivity”. Daher schreiben wir “MainActivity extends AppCompatActivity”. Und diese Android-Klasse heißt so, weil sie schon eine Funktionen mitbringt, die die Kompatibilität zu älteren Android-Versionen sicherstellt.

Variablen deklarieren

Wie du weißt, haben wir in der App zwei Buttons und die Zahl, die wir hochzählen. Diese drei Elemente, genauer gesagt diese drei TextViews, wollen wir steuern. Das heißt wir wollen die Klicks auf die Buttons erkennen und dann entsprechend irgend etwas mit der Zahl machen, die in der Mitte steht. Also benötigen wir diese drei TextViews in unserer Spielelogik. Alles was wir brauchen, müssen wir zu Beginn unserer Klasse definieren, oder korrekt ausgedrückt: “deklarieren”.

Außerdem ist es hilfreich, wenn wir auch eine Variable deklarieren, in der wir die aktuelle Zahl speichern können. Wenn wir etwas deklarieren, geben wir den Typ an, gefolgt von einem beliebigen Namen. Der Typ einer TextView ist “TextView” und der Typ für eine Zahl ist “int”, das steht für Integer. Es gibt noch viele weitere Variablen-Typen, die lernen wir nach und nach, sobald wir sie brauchen.

Methoden

Was danach folgt sind die Funktionen unseres Programms, wir nennen das “Methoden”. Eine Klasse besteht aus mehreren “Methoden”. Alles beginnt mit “onCreate“. Diese Methode wird immer dann aufgerufen, wenn die App startet, oder genauer gesagt, wenn die MainActivity erzeugt wird.

Als erstes müssen wir dem Programm mitteilen, welche Datei für das Layout zuständig sein soll. Das machen wir so “setContentView(R.layout.activity_main);” Nach jedem Befehl muss ein Semikolon stehen. Das mag am Anfang umständlich wirken und du wirst das Semikolon sicher ein paar mal vergessen, aber man gewöhnt sich sehr schnell daran.

Views initialisieren

Als nächstes wollen wir die TextViews aus dem Layout unseren drei Variablen zuordnen, die wir ganz oben in der Klasse deklariert haben. Das machen wir in einer extra Methoden, denn jede Einzelaufgabe gehört in eine eigene Methode. So bleibt unser Code strukturiert, aufgeräumt und übersichtlich. Das ist wirklich wichtig, vor allem bei komplexeren Apps. Die Methode nennen wir “initViews”. Damit wir die Elemente im Layout überhaupt finden können, müssen wir ihnen jeweils eine ID zuordnen.

Auf Klicks warten

Nun müssen wir festlegen, dass etwas passieren soll, wenn man auf die Buttons tippt. Dazu schreiben wir wieder separate Methoden. Auf unsere TextViews setzen wir dafür so genannte “OnClickListener”. Das sorgt dafür, dass Methode in unserer Klasse aufgerufen wird, immer wenn der Nutzer auf die TextView klickt. Da wir zwei Buttons haben, nämlich den Plus-Button und den Bumm-Button, brauchen wir also auch zwei Methoden dafür. Die legen wir schon mal an.

Plus-Button

Klickt der Nutzer auf den Plus-Button soll unsere Zahl um 1 hochgezählt und auch angezeigt werden. Das Hochzählen erreichen wir mit currentNumber++. Anzeigen können wir die Zahl, indem wir sie als Text in die numberView setzen, also numberView.setText(…). Dabei ist wichtig, die Zahl in einen Text umzuwandeln, da unser Programm ansonsten davon ausgeht, dass wir mit der Zahl eine ID meinen. Das würde unweigerlich zum Absturz der App führen. Also nicht vergessen: String.valueOf(currentNumber).

Bumm-Button

Klickt der Nutzer auf den Bumm-Button soll unsere Zahl intern auch um 1 hochgezählt werden, also wieder currentNumber++. Die Zahl soll aber nicht angezeigt werden. Es soll einfach „BUMM“ in der Mitte der App stehen. Also setzen wir „BUMM“ als Text in unsere numberView.

Wenn wir an dieser Stelle sind, sollten wir die App zwischendurch testen. Was erwarten wir? Zu Beginn sollte die Zahl 0 sein. Tippen wir auf den Plus-Button, sollte die Zahl hochzählen, beim jeden Klick genau um 1. Tippen wir auf den Bumm-Button, sollte „BUMM“ in der Mitte stehen. Funktioniert? Super!

Richtig oder falsch

Damit unsere App ein richtiges Spiel wird, muss das Programm in der Lage sein zu prüfen, ob der Nutzer auf den richtigen Button getippt hat. So soll es sein: Ist die nächste Zahl durch 3 teilbar oder enthält sie eine 3, dann muss der Nutzer auf „BUMM“ tippen. Ansonsten kann der Nutzer immer mit dem Plus-Button eins hochzählen. Ist die Entscheidung des Nutzers richtig, wird die Zahl oder das Wort „BUMM“ grün dargestellt, ansonsten rot. Außerdem beginnt das Spiel beim Fehler von vorne.

Durch 3 teilbar

Um zu prüfen, ob eine Zahl durch eine andere Zahl teilbar ist, müssen wir sie einfach teilen und schauen wieviel Rest übrig bleibt. Bleibt nichts übrig, war die Zahl teilbar. Haben wir am Ende einen Rest, dann war sie nicht teilbar. Der Code dazu sieht so aus:

Enthält eine 3

Um zu prüfen, ob eine Zahl eine 3 enthält, müssen wir sie zunächst als Text umwandeln. Das gelingt uns wieder mit String.valueOf(currentNumber). Anschließend nutzen wir die Methode „contains“, um zu schauen, ob eine 3 in dem Text steckt. Das sieht also so aus:

Wir können beide Prüfungen kombinieren, also mit „oder“ verknüpfen. Ein „oder“ schreiben wir als zwei senkrechte Striche im Code. Das sieht dann so aus:

Wenn sich der Nutzer korrekt entschieden hat, wollen wir eine Methode aufrufen, die wir „onCorrect“ nennen. Andernfalls rufen wir „onError“ auf.

Korrekt – alles grün

Wir zeigen die Zahl bzw. das Wort „BUMM“ in der Mitte der App grün an. Weißt du noch, wie Farben definiert werden? Schau dir den 1. Teil der App an, dort erkläre ich es am Ende des Videos.

Falsch – alles rot

Wir zeigen die Zahl bzw. das Wort „BUMM“ in der Mitte der App rot an. Außerdem wollen wir, dass das Spiel von vorne beginnt. Dazu genügt es, die interne Zahl auf 0 zurückzusetzen.

Viel Spaß beim Ausprobieren!

Wie weit kommst du im Spiel, was ist dein Rekord? Schreib es unten in die Kommentare!

Quellcode herunterladen

Wenn du möchtest, kannst du dir den kompletten Quellcode der App herunterladen. Das kann dir helfen, falls du beim Nachbauen nicht weiterkommst. Klicke dazu hier.