Tik Tak Toe with Python and library Tkinter.
Published: 2022-07-28 08:45:15

Today I would like to create a little game tik tak toe with Tkinter to improve my new competencies in Python. 

The tik tak toe is rather easy so before building a program that will revolutionize all internet I want to start with something simple. 

I create a file tikTakToe.py

```
touch tikTakToe.py
```

I open it and I import Tkinter into it:

```
from tkinter import *
from tkinter import ttk
```
I create a window with a label and the first button:

```
window = Tk()
frm = ttk.Frame(window, padding=10)
frm.grid()

ttk.Label(frm, text="TIK TAK TOE").grid(column=1, row=0)
btn1 = Button(window, text = "1").grid(column=1, row=1)
```
and this is a result: 

![first etape of tik tak toe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24g1nahf02oa0a8r9uri.png)

I finish my grid and I add some style: 
```
btn1 = Button(window, text = "1",font="Arial 50 bold", fg= "blue").grid(column=1, row=1)
btn2 = Button(window, text = "2",font="Arial 50 bold", fg= "blue").grid(column=2, row=1)
btn3 = Button(window, text = "3",font="Arial 50 bold", fg= "blue").grid(column=3, row=1)

btn4 = Button(window, text = "4",font="Arial 50 bold", fg= "blue").grid(column=1, row=2)
btn5 = Button(window, text = "5",font="Arial 50 bold", fg= "blue").grid(column=2, row=2)
btn6 = Button(window, text = "6",font="Arial 50 bold", fg= "blue").grid(column=3, row=2)

btn7 = Button(window, text = "7",font="Arial 50 bold", fg= "blue").grid(column=1, row=3)
btn8 = Button(window, text = "8",font="Arial 50 bold", fg= "blue").grid(column=2, row=3)
btn9 = Button(window, text = "9",font="Arial 50 bold", fg= "blue").grid(column=3, row=3)
```
and this is a result:

![grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awbvfatu9dz02fh4iivz.png)

Now I need a function that will write "X" or "O" in the grid, for this, I start with the variable playerX equals True:

```
playerX = True

def xOro(btn):
    global playerX
    if btn["text"] == "?" and playerX == True:
        btn["text"] = "X"
        playerX = False
    elif btn["text"] == "?" and playerX == False:
        btn["text"] = "O"
        playerX = True  
```
Then I call this function on command in a button like this:

```
btn1 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn1)).grid(column=1, row=1)
```
I have this error:

![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yatee9is952ar24uawje.png)

To fix this bug I do like this:
```
btn1 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn1))
btn1.grid(column=1, row=1)
btn2 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn2))
btn2.grid(column=2, row=1)
btn3 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn3))
btn3.grid(column=3, row=1)

btn4 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn4))
btn4.grid(column=1, row=2)
btn5 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn5))
btn5.grid(column=2, row=2)
btn6 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn6))
btn6.grid(column=3, row=2)

btn7 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn7))
btn7.grid(column=1, row=3)
btn8 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn8))
btn8.grid(column=2, row=3)
btn9 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn9))
btn9.grid(column=3, row=3)
```
And this is a result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bou14vo22bbiybk175qo.png)

Now I need to show who is the winner, so when 3 symbols in the same line are the same I change the color:

```
def winnerIs():
    if btn1["text"] != "?" and btn1["text"] == btn2["text"] and btn1["text"] == btn3["text"]:
        btn1.config(fg = "green")
        btn2.config(fg = "green")
        btn3.config(fg = "green")
```

![O wins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl1elqxv4p539ll0p6lf.png)

I import also messagebox to inform who is the winner: 
```
from tkinter import messagebox
```
```
def winnerInfo():
    if playerX == True:
            messagebox.showinfo('The winner is...', 'The winner is... Player O')
    elif playerX == False:
            messagebox.showinfo('The winner is...', 'The winner is... Player X')
```

![the winner is O](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt9lwuhnw4yxi2uer9oa.png)

All file tikTakToe.py is like this:
```
tkinter import *
from tkinter import ttk
from tkinter import messagebox

window = Tk()
window.title('Tik Tak Toe')
frm = ttk.Frame(window, padding=10)
frm.grid()

playerX = True


def winnerInfo():
    if playerX == True:
            messagebox.showinfo('The winner is...', 'The winner is... Player O')
    elif playerX == False:
            messagebox.showinfo('The winner is...', 'The winner is... Player X')
    
    

def winnerIs():
    if btn1["text"] != "?" and btn1["text"] == btn2["text"] and btn1["text"] == btn3["text"]:
        btn1.config(fg = "green")
        btn2.config(fg = "green")
        btn3.config(fg = "green")
        btn4.config(state = DISABLED)
        btn5.config(state = DISABLED)
        btn6.config(state = DISABLED)
        btn7.config(state = DISABLED)
        btn8.config(state = DISABLED)
        btn9.config(state = DISABLED)
        winnerInfo()

    if btn4["text"] != "?" and btn4["text"] == btn5["text"] and btn4["text"] == btn6["text"]:
        btn4.config(fg = "green")
        btn5.config(fg = "green")
        btn6.config(fg = "green")
        btn1.config(state = DISABLED)
        btn2.config(state = DISABLED)
        btn3.config(state = DISABLED)
        btn7.config(state = DISABLED)
        btn8.config(state = DISABLED)
        btn9.config(state = DISABLED)
        winnerInfo()

    if btn7["text"] != "?" and btn7["text"] == btn8["text"] and btn7["text"] == btn9["text"]:
        btn7.config(fg = "green")
        btn8.config(fg = "green")
        btn9.config(fg = "green")
        btn1.config(state = DISABLED)
        btn2.config(state = DISABLED)
        btn3.config(state = DISABLED)
        btn4.config(state = DISABLED)
        btn5.config(state = DISABLED)
        btn6.config(state = DISABLED)
        winnerInfo()

    if btn1["text"] != "?" and btn1["text"] == btn4["text"] and btn1["text"] == btn7["text"]:
        btn1.config(fg = "green")
        btn4.config(fg = "green")
        btn7.config(fg = "green")
        btn5.config(state = DISABLED)
        btn2.config(state = DISABLED)
        btn3.config(state = DISABLED)
        btn6.config(state = DISABLED)
        btn8.config(state = DISABLED)
        btn9.config(state = DISABLED)
        winnerInfo()

    if btn2["text"] != "?" and btn2["text"] == btn5["text"] and btn2["text"] == btn8["text"]:
        btn2.config(fg = "green")
        btn5.config(fg = "green")
        btn8.config(fg = "green")
        btn1.config(state = DISABLED)
        btn4.config(state = DISABLED)
        btn3.config(state = DISABLED)
        btn7.config(state = DISABLED)
        btn6.config(state = DISABLED)
        btn9.config(state = DISABLED)
        winnerInfo()

    if btn3["text"] != "?" and btn3["text"] == btn6["text"] and btn3["text"] == btn9["text"]:
        btn3.config(fg = "green")
        btn9.config(fg = "green")
        btn6.config(fg = "green")
        btn1.config(state = DISABLED)
        btn2.config(state = DISABLED)
        btn4.config(state = DISABLED)
        btn7.config(state = DISABLED)
        btn8.config(state = DISABLED)
        btn5.config(state = DISABLED)
        winnerInfo()

    if btn1["text"] != "?" and btn1["text"] == btn5["text"] and btn1["text"] == btn9["text"]:
        btn1.config(fg = "green")
        btn5.config(fg = "green")
        btn9.config(fg = "green")
        btn6.config(state = DISABLED)
        btn2.config(state = DISABLED)
        btn3.config(state = DISABLED)
        btn7.config(state = DISABLED)
        btn8.config(state = DISABLED)
        btn4.config(state = DISABLED)
        winnerInfo()

    if btn3["text"] != "?" and btn3["text"] == btn5["text"] and btn3["text"] == btn7["text"]:
        btn3.config(fg = "green")
        btn5.config(fg = "green")
        btn7.config(fg = "green")
        btn1.config(state = DISABLED)
        btn2.config(state = DISABLED)
        btn4.config(state = DISABLED)
        btn6.config(state = DISABLED)
        btn8.config(state = DISABLED)
        btn9.config(state = DISABLED)
        winnerInfo()
        

def xOro(btn):
    global playerX
    if btn["text"] == "?" and playerX == True:
        btn["text"] = "X"
        playerX = False
        winnerIs()
    elif btn["text"] == "?" and playerX == False:
        btn["text"] = "O"
        playerX = True
        winnerIs()


btn1 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn1))
btn1.grid(column=1, row=1)
btn2 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn2))
btn2.grid(column=2, row=1)
btn3 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn3))
btn3.grid(column=3, row=1)

btn4 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn4))
btn4.grid(column=1, row=2)
btn5 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn5))
btn5.grid(column=2, row=2)
btn6 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn6))
btn6.grid(column=3, row=2)

btn7 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn7))
btn7.grid(column=1, row=3)
btn8 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn8))
btn8.grid(column=2, row=3)
btn9 = Button(window, text = "?",font="Arial 50 bold", fg= "blue", command = lambda:xOro(btn9))
btn9.grid(column=3, row=3)
```
I know that there is lots of thinks to do better but this is for a next time.