Tik Tak Toe with Python and library Tkinter.

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:

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:

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:

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:

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")

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')

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.

DEV Community

Tik Tak Toe with Python and library Tkinter.

Top comments (0)

Read next

How to design and code an Email newsletter Template

ChatGPT for IT Workers (short Udemy course review)

OCI - Restore DB System Backups across OCI Cloud regions is now available.

[Java] Singleton and Static