Tic-Tac-Toe 1

Für unser Tic-Tac-Toe-Projekt verwenden wir die GUI-Bibliothek tkinter. Die erste Zeile in unserer Python-Datei ist deshalb:

from tkinter import *

Die Klasse von unserem Tic-Tac-Toe-Spiel erbt von Tk, dies ist die Fenster-Klasse von tkinter. Hiermit ist unsere Klasse auch ein Fenster und kann angezeigt werden. Unsere Klasse beginnt somit mit:

class TTT(Tk):

Der Konstruktor der Klasse ruft den Konstruktor der Oberklasse auf und setzt den Titel des Fensters auf TTT.
Den Ablauf kann man dem Struktogramm entnehmen.

Unser Hauptprogramm legt ein Object von dieser Klasse an und ruft von diesem die Methode mainloop() auf.

Das Fenster sollte wie folgt aussehen:

Der Canvas

Um das Tic-Tac-Toe-Feld zu zeichnen verwenden wir ein Canvas-Objekt von tkinter.
Ein Canvas ist eine GUI-Komponente auf die man mit Befehlen zeichnen kann. Hier werden wir später unser Spielfeld, die Kreise und Kreuze zeichnen.

Im Konstruktor initialisieren wir das Canvas-Objekt, welches wir private machen.
Wir geben ihm die Höhe und Breite von 300 Pixeln und die Hintergrundfarbe weiß (white).
Mit der pack-Methode bringen wir das Canvas-Objekt auf das Fenster. Mit den padx und pady Optionen geben wir dem Canvas einen kleinen Abstand vom Fensterrand.

Das Fenster sollte wie folgt aussehen:

Das Spielfeld

Wir erweitern unsere Klasse um eine Methode paint, welche das Spielfeld zeichnet.
Diese Methode rufen wir im Konstruktor als aktuell letzte Anweisung auf.

TTT

+TTT() +paint()

In der Methode paint() zeichnen wir zuerst ein weißes Rechteck um alles zu löschen.
Danach zeichnen wir zwei senkrechte Linien von (100,0) nach (100,300) und von (200,0) nach (200,300)
und wir zeichnen zwei waagerechte Linien von (0,100) nach (300,100) und von (0,200) nach (300,200).

Ein Rechteck zeichnet man mit:

create_rectangle(x0, y0, x1, y1, fill=Hintergrundfarbe, outline=Rahmenfarbe)

Als Farbe nehmen wir "white".

Ein Linie zeichnet man mit:

create_line(x0, y0, x1, y1, width=Dicke)

Die Methode paint()

def paint(self):
  self.__canvas.create_rectangle(0,0,300,300,fill="white", outline="white")
  self.__canvas.create_line(100, 0, 100, 300, width=3)
  self.__canvas.create_line(200, 0, 200, 300, width=3)
  self.__canvas.create_line(0, 100, 300, 100, width=3)
  self.__canvas.create_line(0, 200, 300, 200, width=3)

Tic-Tac-Toe Stufe 1 - das Fenster

Der Canvas

Das Spielfeld