
Übung #3: Spielsteine setzen
Mmmmmoin und willkommen zur dritten Übung im WPF-Übungskurs für Einsteiger!
Nun haben wir zwar ein “schönes” Spielfeld (liegt sicherlich im Auge des Betrachters ;), aber von einem Spiel sind noch entfernt. Also wirst du heute die erste Logik einfügen. Die Spieler sollen abwechselnd auf ein leeres Kästchen klicken können und dadurch wird ihr Spielstein dort gesetzt.
Bevor ich nun jedoch weiter ins Detail bezüglich der neuen Aufgabe gehe, hier die Lösung der ersten Aufgabe.
Musterlösung der letzten Aufgabe
Musterlösung: Hier meine Musterlösung als zip-Datei.
Musterlösung Schritt-für-Schritt (durch Klick auf die Links siehst du die Änderungen im Quellcode von einem Schritt zum nächsten):
BONUS: Wenn du dir den Quellcode nochmals genau anschaust, wirst du sehen, dass (wenigstens bei mir) 3 Punkte unter dem kaestchen_0_0_Click
-EventHandler angezeigt werden. Was sie bedeuten, wie du sie entfernst und welches Tastaturkürzel dir dabei hilft, zeige ich dir im folgenden “Bonus-Video”. Darin erkläre ich auch wie ich Steuerelemente in XAML benenne:
Wie diese Behebung den Quellcode verändert kannst du dir in diesem Commit anschauen
Die neue Aufgabe
Die Arbeit im XAML ist nun erstmal beendet. Heute geht es darum, dass du durch klicken auf die Kästchen einen Spielstein setzen kannst:
- Durch einen Klick auf ein Kästchen (
Button
) soll darin abwechselnd der Spielstein vom ersten Spieler (X) und zweiten Spieler (O) angezeigt werden. - Erstelle die gleiche Funktionalität für alle Kästchen.
- Setze nur einen Spielstein, wenn das angeklickte Kästchen wirklich leer ist. Ansonsten soll ein Hinweis ausgegeben werden und der gleiche Spieler ist nochmals am Zug.
- Leere das Spielfeld vor dem ersten Zug.
- Starte das Spiel erneut, wenn ein weiteres Kästchen angeklickt wird nachdem alle Kästchen belegt sind.
- [optional] Wenn Spieler 2 (O) seinen Spielstein setzt, sollen die Vordergrund- und Hintergrundfarbe getauscht werden. Bei meinen Farben bedeutet das also beiges X auf türkisenem Grund und türkisenes O auf beige Grund. Bedenke auch, dass bei einem Neustart des Spiels alle Kästchen wieder die gleiche Hintergrundfarbe haben sollen.
- [optional] Sofern du es noch nicht getan hast, mache einen
Commit
für deine ganzen Änderungen und schiebe alles via Sync auf GitHub.
BONUS: Je nachdem wie du die Schritte 1-5 in dieser Aufgabe umgesetzt hast, gibt es einige Fehlerquellen. Schaue deinen Quellcode nochmals genau an und identifiziere mindestens einen problematischen Abschnitt. Teile mit den anderen Teilnehmern des Kurses und mir deine Erkenntnis an diesem GitHub Issue. Vielleicht hast du selber eine Idee für eine Verbesserung oder wir finden gemeinsam eine.
Lösungshinweise
- Obwohl dieser erste Schritt ganz einfach aussieht, könnte es im Detail doch zu einigen Problemen kommen. Hier ein paar Hinweise:
- Artikel zum Zugriff auf den passenden Button mittels
sender
- In diesem Artikel erkläre ich dir was ein Cast und wie du ihn einsetzt um im EventHandler auf die Eigenschaften des aufrufenden
Button
zu zugreifen. - In XAML wird der “Inhalt” eines
Button
über die EigenschaftContent
gesetzt. Dieses kannst du auch im C# Quellcode machen. - Mithilfe eines privaten Attributs in der
MainWindow
Klasse kannst du dir merken ob der erste oder zweite Spieler zuletzt am Zug war. - Du nutzt am besten den EventHandler den du aus der letzten Übung schon haben solltest. Mehr Hinweise gebe ich nicht ;-)!
- Artikel zum Zugriff auf den passenden Button mittels
- Geht es für einen
Button
, dann geht es in diesem Fall auch für alleButtons
. Der Trick ist den EventHandler für jedenButton
im Spielfeld anzumelden. Mehr über Events erkläre ich dir im 2. Teil des BallSpiel Projekts. - Hier noch ein paar Hinweise zur Frage ob ein Spielstein gesetzt ist und wie du einen Hinweis anzeigen kannst:
- Theoretisch ist die Aufgabe einfach, weil du eigentlich nur überprüfen musst ob der
Content
gesetzt ist. Die Herausforderung könnte sein, dass derContent = null
ist, weil den meistenButton
noch kein Text zugewiesen wurde. Du musst also nicht nur schauen ob einstring
mit einem Zeichen imContent
steht sondern auch ob derContent
vielleichtnull
ist. - Wie du Hinweise anzeigen kannst, erkläre ich dir in diesem Artikel
- Theoretisch ist die Aufgabe einfach, weil du eigentlich nur überprüfen musst ob der
- Aus dem C# Quellcode kannst du auf jeden einzelnen Button zugreifen und den
Content
entsprechend setzen. - Dieser Schritt könnte für dich schon etwas kniffeliger sein. Für die Lösung kannst du die Eigenschaft
Children
desGrid
verwenden. Über diese Eigenschaft bekommst du Zugriff auf alle Steuerelemente die im Spielfeld (also demGrid
) enthalten sind. Momentan sind das erstmal nur die Kästchen (alsoButtons
). Damit kannst du also jedes Kästchen anschauen und überprüfen ob imContent
etwas enthalten ist. - Das eigentliche Tauschen der Vorder- und Hintergrundfarbe sofern Spieler 2 klickt schaffst du bestimmt. Hast du jedoch auch berücksichtigt, dass die Farben der Kästchen beim Neustart des Spiels wieder zurück gesetzt werden müssen? Tipp: Es ist einfacher allen Kästchen ihre ursprüngliche Farbe zu zuweisen.
Weiterführende Artikel / Videos
Diese Aufgabe beinhaltet bereits sehr viel Futter für dich. Daher gibt es heute keine weiteren Ressourcen!
In wenigen Tagen bekommst du eine weitere Mail von mir mit meiner Musterlösung und der nächtsen Teilaufgabe.
Bis dahin wünsche ich dir viel Spaß beim Üben
Jan von LernMoment.de