DEV Community

Cover image for Tik Tak Toe with Python and library Tkinter.
Deotyma
Deotyma

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode

I open it and I import Tkinter into it:

from tkinter import *
from tkinter import ttk
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

and this is a result:

first etape of tik tak toe

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)
Enter fullscreen mode Exit fullscreen mode

and this is a result:

grid

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

I have this error:

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)
Enter fullscreen mode Exit fullscreen mode

And this is a result:

Image description

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")
Enter fullscreen mode Exit fullscreen mode

O wins

I import also messagebox to inform who is the winner:

from tkinter import messagebox
Enter fullscreen mode Exit fullscreen mode 
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')
Enter fullscreen mode Exit fullscreen mode

the winner is O

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)
Enter fullscreen mode Exit fullscreen mode

I know that there is lots of thinks to do better but this is for a next time.

profile
Sentry
 Promoted

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

profile
Coherence
 Promoted

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Read next

vitalisorenko profile image

Blockchain and Decentralized Finance: Revolutionizing the Financial Landscape

Vitali Sorenko -

rachellovestowrite profile image

Beeple Genesis on Arbitrum: A New Chapter in the NFT Revolution

Rachel Duncan -

zhangwei42 profile image

Blockchain and Cybersecurity: Unlocking the Future of Secure Digital Interactions

Zhang Wei -

bobcars profile image

Blockchain and Carbon Credits: A Technological Revolution in Environmental Conservation

Bob Cars(on) -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay