C-Kurs/TicTacToe - Versionsgeschichte

PaulG: verschob „Ckurs/TicTacToe“ nach „C-Kurs/TicTacToe“

2013-03-05T17:37:17Z

verschob „Ckurs/TicTacToe“ nach „C-Kurs/TicTacToe“

Poxy: /* Vorbereitungen */

2012-09-14T14:02:14Z

‎Vorbereitungen

Nighoo am 13. September 2012 um 14:39 Uhr

2012-09-13T14:39:24Z

Nighoo: verschob „Ckurs2010/TicTacToe“ nach „Ckurs/TicTacToe“

2012-09-13T14:38:10Z

verschob „Ckurs2010/TicTacToe“ nach „Ckurs/TicTacToe“

Poxy: sdldemo wieder richtig verlinkt, da die von martin nicht mehr online ist

2012-09-02T07:08:22Z

sdldemo wieder richtig verlinkt, da die von martin nicht mehr online ist

78.52.130.32: /* Feinschliff / Erweiterungen */

2010-09-21T10:40:11Z

‎Feinschliff / Erweiterungen

Martin: link zu einrichtung dazu

2010-09-16T12:09:37Z

link zu einrichtung dazu

Martin: link zur sdldemo

2010-09-15T12:08:37Z

link zur sdldemo

Martin: Kommentare

2010-09-15T09:43:53Z

Kommentare

Martin: 1. Version

2010-09-14T23:52:42Z

1. Version

Neue Seite

[[Datei:TicTacToe-screenshot.png|miniatur|240px|So in etwa soll dann unser Spiel aussehen]]'''Tic Tac Toe''' (auch Drei Gewinnt genannt) ist ein Spiel, das von zwei Spielern auf einem 3x3-Felder großen Spielfeld gespielt wird. Dazu markieren beide Spieler jeweils abwechselnd ein freies Feld mit dem eigenen Symbol (Kreis oder Kreuz). Wer zuerst drei seiner Symbole horizontal, vertikal oder diagonal in einer Reihe hat, gewinnt das Spiel.

In dieser Aufgabe sollt ihr unter Verwendung der [http://www.libsdl.org/ Simple DirectMedia Layer-Bibliothek] (SDL) eine grafische Version dieses Spiels implementieren. Als Vorgabe dient das aus der Live-Vorführung im 9. Vortrag entstandene Beispielprogramm sdldemo.c.

== Vorbereitungen ==

Voraussetzung für die Bearbeitung dieser Aufgabe ist die Installation der SDL-Bibliothek. Hinweise dazu findest du hier <wiki/v9>. Nachdem du die SDL-Bibliothek erfolgreich installiert hast, kannst du die sdldemo unter dieser Adresse herunterladen, entpacken und unter Linux mit folgendem Aufruf kompilieren:

<pre>
gcc sdldemo.c -o sdldemo -I /usr/include/SDL -l SDLmain -l SDL
</pre>

Je nach verwendetem Betriebssystem und Ort der Bibliothek können die Pfade oder notwendigen Parameter etwas abweichen - Details findest du unter <wiki/v9>.
Nun kannst du die Datei sdldemo.c umbenennen in tictactoe.c und als Vorlage für die Lösung dieser Aufgabe verwenden.

== Datenstruktur ==

Das Spielfeld soll intern durch ein zweidimensionales Array der Größe 3x3 repräsentiert werden. Leere Felder sollen den Wert -1, vom ersten Spieler belegte Felder den Wert 0 und vom zweiten Spieler belegte Felder den Wert 1 enthalten. Am besten, du definierst dir mittels <tt>#define</tt> Konstanten wie <tt>EMPTY</tt>, <tt>PLAYER_A</tt> etc. für diese Feld-Werte sowie Konstanten für die Anzahl der Zeilen und Spalten des Spielfelds. Letztere kannst du dann verwenden um anschließend das globale Array <tt>board</tt> für das Spielfeld zu deklarieren.

Schreibe nun eine Funktion <tt>reset_board()</tt>, die das Array initialisiert, also alle Felder auf <tt>EMPTY</tt> setzt. Da es sich um ein zweidimensionales Array handelt, benötigst du dazu auch zwei <tt>for</tt>-Schleifen.

== Grafikausgabe ==

[[Datei:TicTacToe-coords.png|280px|rechts]]

Zunächst muss als Symbol für den zweiten Spieler die Kreuz-Grafik (Datei ''cross.bmp'') geladen werden. Nun wird eine Funktion benötigt, die den im Array gespeicherten Spielstatus, also die Belegung des Spielfelds, grafisch ausgibt. Schreibe dazu die Funktion <tt>draw_board(...)</tt> mit allen nötigen Parametern. Die Funktion soll <tt>[http://www.libsdl.org/cgi/docwiki.cgi/SDL_BlitSurface SDL_BlitSurface()]</tt> verwenden, um zuerst den Hintergrund in das Ausgabefenster zeichnen, und dann für jedes Feld überprüfen, ob es schon von einem Spieler belegt ist, und ggf. das jeweilige Symbol an die entsprechende Stelle zeichnen. Vergiss nicht, am Ende <tt>[http://www.libsdl.org/cgi/docwiki.cgi/SDL_Flip SDL_Flip()]</tt> aufzurufen.

Durch die vorgegebene Hintergrundgrafik ist jedes Feld 100 Pixel hoch und breit. Beachte, dass der Ursprung des Koordinatensystems in der linken, oberen Ecke ist. Darüber hinaus ist das Spielfeld von einem 25 Pixel breitem Rand umgeben, so dass das Feld in der linken oberen Ecke an den Koordinaten (25,25) beginnt, das Feld in der rechten unteren Ecke an den Koordinaten (225,225). (siehe Grafik)

Teste deine Funktion abschließend mit Testaufrufen wie:

<pre>
reset_board();
board[0][0] = PLAYER_A;
draw_board(...);
SDL_Delay(2000);
board[2][2] = PLAYER_B;
draw_board(...);
SDL_Delay(2000);
</pre>

== Interaktion mit den Spielern ==

Nun soll der jeweils aktive Spieler mittels Mausklick ein Feld auf dem Spielfeld mit seinem Symbol markieren können. Dazu müssen zunächst die Koordinaten der Maus, die in einem Bereich zwischen (0,0) und (350,350) liegen, in Spielfeldkoordinaten zwischen (0,0) und (2,2) umgerechnet werden. Dazu kannst du die folgende Funktion <tt>convert_coords()</tt> verwenden.

<pre>
// Konvertiert Mauskoordinaten in Spielfeldkoordinaten
void convert_coords(int x, int y, int *row, int *column) {
*row = (y-25) / 100;
if (*row < 0) *row = 0;
if (*row >= ROWS) *row = ROWS-1;
*column = (x-25) / 100;
if (*column < 0) *column = 0;
if (*column >= COLS) *column = COLS-1;
}
</pre>

Im Event-Loop muss nun bei jedem Mausklick geprüft werden, ob das entsprechende Feld noch frei ist. Ist das der Fall, muss es vom aktuellen Spieler als belegt markiert werden. Danach muss das komplette Spielfeld via <tt>draw_board()</tt> neu gezeichnet und der aktive Spieler gewechselt werden.

Tipp: um eine Variable x zwischen den Werten 0 und 1 wechseln zu lassen reicht die Anweisung: <pre>x = 1 - x;</pre>

== Spielende ==

Das Spiel endet entweder wenn der Spieler, der den letzten Zug gemacht hat, drei seiner Symbole in einer Reihe angeordnet hat, oder wenn kein freies Feld mehr auf dem Spielfeld übrig ist.

Zum Überprüfen des ersten Falls definierst du am besten eine Hilfsfunktion int <tt>check_win(int player)</tt> die zurückgibt, ob vom übergebenen Spieler im <tt>board</tt>-Array drei Felder in einer Reihe belegt sind. Dazu musst du das Array jeweils auf horizontale und vertikale 3er-Reihen, sowie diagonale Reihen von rechts oben nach links unten sowie von links oben nach rechts unten testen. Diese Funktion kann nun nach dem Belegen eines Feldes im Event-Loop aufgerufen werden.

Zum Überprüfen auf ein Unentschieden reicht eine einfache <tt>if</tt>-Anweisung. Überlege dir darüber hinaus was jeweils nach Spielende zu tun ist, damit die Spieler danach ein neues Spiel spielen können, ohne das Programm neu starten zu müssen.

== Feinschliff / Erweiterungen ==

Nach dem Spielende sollte den Spielern mitgeteilt werden, wer gewonnen hat oder ob das Spiel unentschieden endete. Am einfachsten kann das durch Anpassung des Fenstertitel via <tt>SDL_WM_SetCaption()</tt> erfolgen. Etwas hübscher wird es, wenn eine separate BMP-Grafik angezeigt wird, welche die gewünschte Nachricht enthält. Eine solche kann z.B. via Gimp oder unter Windows mit Paint erzeugt werden.

Alternativ könnten auch die drei Symbole des Gewinners zum Blinken gebracht werden, indem <tt>draw_board()</tt> in einer Schleife mit einer kurzen Pause aufgerufen wird, und die jeweiligen Felder bei jedem 2. Aufruf nicht mitgezeichnet werden.

Wer die Installation einer weiteren Bibliothek nicht scheut, kann mit der SDL-Erweiterung [http://www.libsdl.org/projects/SDL_ttf/docs/index.html sdl_ttf] TrueType-Fonts verwenden, um beliebigen Text in das Ausgabefenster zu schreiben. Eine Anleitung zur Verwendung dieser Erweiterung findest du in dem Tutorial unter http://lazyfoo.net/SDL_tutorials/lesson07/.

Viel Spaß!

@@ Zeile 5: / Zeile 5: @@
 == Vorbereitungen ==
-Voraussetzung für die Bearbeitung dieser Aufgabe ist die Installation der SDL-Bibliothek. Hinweise dazu findest du hier [[Ckurs2010/Vortrag09]]. Nachdem du die SDL-Bibliothek erfolgreich installiert hast, kannst du die sdldemo unter [https://docs.freitagsrunde.org/Veranstaltungen/ckurs_2012/unterlagen/sdldemo.tgz dieser Adresse] herunterladen, entpacken und unter Linux mit folgendem Aufruf kompilieren:
+Voraussetzung für die Bearbeitung dieser Aufgabe ist die Installation der SDL-Bibliothek. Hinweise dazu findest du hier [[Ckurs2010/Vortrag09]]. Nachdem du die SDL-Bibliothek erfolgreich installiert hast, kannst du die sdldemo unter [https://docs.freitagsrunde.org/Veranstaltungen/ckurs_2012/unterlagen/08_TUT5_SDL_Demo.tar.gz dieser Adresse] herunterladen, entpacken und unter Linux mit folgendem Aufruf kompilieren:
 <pre>

@@ Zeile 5: / Zeile 5: @@
 == Vorbereitungen ==
-Voraussetzung für die Bearbeitung dieser Aufgabe ist die Installation der SDL-Bibliothek. Hinweise dazu findest du hier [[Ckurs2010/Vortrag09]]. Nachdem du die SDL-Bibliothek erfolgreich installiert hast, kannst du die sdldemo unter [http://user.cs.tu-berlin.de/~mkresse/sdldemo.tgz dieser Adresse] herunterladen, entpacken und unter Linux mit folgendem Aufruf kompilieren:
+Voraussetzung für die Bearbeitung dieser Aufgabe ist die Installation der SDL-Bibliothek. Hinweise dazu findest du hier [[Ckurs2010/Vortrag09]]. Nachdem du die SDL-Bibliothek erfolgreich installiert hast, kannst du die sdldemo unter [https://docs.freitagsrunde.org/Veranstaltungen/ckurs_2012/unterlagen/sdldemo.tgz dieser Adresse] herunterladen, entpacken und unter Linux mit folgendem Aufruf kompilieren:
 <pre>

@@ Zeile 5: / Zeile 5: @@
 == Vorbereitungen ==
-Voraussetzung für die Bearbeitung dieser Aufgabe ist die Installation der SDL-Bibliothek. Hinweise dazu findest du hier <wiki/v9>. Nachdem du die SDL-Bibliothek erfolgreich installiert hast, kannst du die sdldemo unter [http://user.cs.tu-berlin.de/~mkresse/sdldemo.tgz dieser Adresse] herunterladen, entpacken und unter Linux mit folgendem Aufruf kompilieren:
+Voraussetzung für die Bearbeitung dieser Aufgabe ist die Installation der SDL-Bibliothek. Hinweise dazu findest du hier [[Ckurs2010/Vortrag09]]. Nachdem du die SDL-Bibliothek erfolgreich installiert hast, kannst du die sdldemo unter [http://user.cs.tu-berlin.de/~mkresse/sdldemo.tgz dieser Adresse] herunterladen, entpacken und unter Linux mit folgendem Aufruf kompilieren:
 <pre>
@@ Zeile 11: / Zeile 11: @@
 </pre>
-Je nach verwendetem Betriebssystem und Ort der Bibliothek können die Pfade oder notwendigen Parameter etwas abweichen - Details findest du unter <wiki/v9>.
+Je nach verwendetem Betriebssystem und Ort der Bibliothek können die Pfade oder notwendigen Parameter etwas abweichen - Details findest du unter [[Ckurs2010/Vortrag09#Einrichtung_der_SDL Einrichtung der SDL]].
 Nun kannst du die Datei sdldemo.c umbenennen in tictactoe.c und als Vorlage für die Lösung dieser Aufgabe verwenden.
@@ Zeile 60: / Zeile 60: @@
 Im Event-Loop muss nun bei jedem Mausklick geprüft werden, ob das entsprechende Feld noch frei ist. Ist das der Fall, muss es vom aktuellen Spieler als belegt markiert werden. Danach muss das komplette Spielfeld via <tt>draw_board()</tt> neu gezeichnet und der aktive Spieler gewechselt werden.
-Tipp: um eine Variable x zwischen den Werten 0 und 1 wechseln zu lassen reicht die Anweisung: <pre>x = 1 - x;</pre>
+Tipp: Um eine Variable x zwischen den Werten 0 und 1 wechseln zu lassen reicht die Anweisung: <pre>x = 1 - x;</pre>
@@ Zeile 74: / Zeile 74: @@
 == Feinschliff / Erweiterungen ==
-Nach dem Spielende sollte den Spielern mitgeteilt werden, wer gewonnen hat oder ob das Spiel unentschieden endete. Am einfachsten kann das durch Anpassung des Fenstertitel via <tt>SDL_WM_SetCaption()</tt> erfolgen. Etwas hübscher wird es, wenn eine separate BMP-Grafik angezeigt wird, welche die gewünschte Nachricht enthält. Eine solche kann z.B. via Gimp oder unter Windows mit Paint erzeugt werden.
+Nach dem Spielende sollte den Spielern mitgeteilt werden, wer gewonnen hat oder ob das Spiel unentschieden endete. Am einfachsten kann das durch Anpassung des Fenstertitel via <tt>[http://www.libsdl.org/cgi/docwiki.cgi/SDL_WM_SetCaption SDL_WM_SetCaption()]</tt> erfolgen. Etwas hübscher wird es, wenn eine separate BMP-Grafik angezeigt wird, welche die gewünschte Nachricht enthält. Eine solche kann z.B. via Gimp oder unter Windows mit Paint erzeugt werden.
 Alternativ könnten auch die drei Symbole des Gewinners zum Blinken gebracht werden, indem <tt>draw_board()</tt> in einer Schleife mit einer kurzen Pause aufgerufen wird, und die jeweiligen Felder bei jedem 2. Aufruf nicht mitgezeichnet werden.

← Nächstältere Version		Version vom 15. September 2010, 09:43 Uhr
Zeile 82:		Zeile 82:

	Viel Spaß!		Viel Spaß!
		+
		+	== Kommentare ==
		+	Wenn du Anmerkungen zur Aufgabe hast oder Lob und Kritik loswerden möchtest, ist hier die richtige Stelle dafür. Klicke einfach ganz rechts auf "bearbeiten" und schreibe deinen Kommentar direkt ins Wiki. Keine Scheu, es geht nichts kaputt ;)
		+
		+	<!--
		+	Als kleine Starthilfe folgt ein Beispiel, wie so ein Kommentar formatiert sein könnte. Mit "Vorschau zeigen" kannst du dir ansehen, was deine Änderung bewirken würde, ohne wirklich etwas zu ändern.
		+	Du musst übrigens außerhalb dieses auskommentieren Bereichs schreiben ;)
		+
		+	==== Robert ====
		+	Na mal schauen, ob irgendjemand diese Funktion wirklich benutzt. Ich fände es jedenfalls toll.
		+	-->
		+
		+	[[Kategorie:CKurs]]
		+	[[Kategorie:CKurs_Aufgaben]]

← Nächstältere Version	Version vom 5. März 2013, 17:37 Uhr
(kein Unterschied)

@@ Zeile 1: / Zeile 1: @@
 [[Datei:TicTacToe-screenshot.png|miniatur|240px|So in etwa soll dann unser Spiel aussehen]]'''Tic Tac Toe''' (auch Drei Gewinnt genannt) ist ein Spiel, das von zwei Spielern auf einem 3x3-Felder großen Spielfeld gespielt wird. Dazu markieren beide Spieler jeweils abwechselnd ein freies Feld mit dem eigenen Symbol (Kreis oder Kreuz). Wer zuerst drei seiner Symbole horizontal, vertikal oder diagonal in einer Reihe hat, gewinnt das Spiel.
-In dieser Aufgabe sollt ihr unter Verwendung der [http://www.libsdl.org/ Simple DirectMedia Layer-Bibliothek] (SDL) eine grafische Version dieses Spiels implementieren. Als Vorgabe dient das aus der Live-Vorführung im 9. Vortrag entstandene Beispielprogramm sdldemo.c.
+In dieser Aufgabe sollt ihr unter Verwendung der [http://www.libsdl.org/ Simple DirectMedia Layer-Bibliothek] (SDL) eine grafische Version dieses Spiels implementieren. Als Vorgabe dient das aus der Live-Vorführung im 5. Tutorium entstandene Beispielprogramm sdldemo.c.
 == Vorbereitungen ==

← Nächstältere Version	Version vom 13. September 2012, 14:38 Uhr
(kein Unterschied)

@@ Zeile 73: / Zeile 73: @@
 == Feinschliff / Erweiterungen ==
 Nach dem Spielende sollte den Spielern mitgeteilt werden, wer gewonnen hat oder ob das Spiel unentschieden endete. Am einfachsten kann das durch Anpassung des Fenstertitel via <tt>[http://www.libsdl.org/cgi/docwiki.cgi/SDL_WM_SetCaption SDL_WM_SetCaption()]</tt> erfolgen. Etwas hübscher wird es, wenn eine separate BMP-Grafik angezeigt wird, welche die gewünschte Nachricht enthält. Eine solche kann z.B. via Gimp oder unter Windows mit Paint erzeugt werden.
@@ Zeile 79: / Zeile 81: @@
 Wer die Installation einer weiteren Bibliothek nicht scheut, kann mit der SDL-Erweiterung [http://www.libsdl.org/projects/SDL_ttf/docs/index.html sdl_ttf] TrueType-Fonts verwenden, um beliebigen Text in das Ausgabefenster zu schreiben. Eine Anleitung zur Verwendung dieser Erweiterung findest du in dem Tutorial unter http://lazyfoo.net/SDL_tutorials/lesson07/.
 Viel Spaß!