Tic Tac Toe Using Gui In Python

‘Tic Tac Toe’ is a very simple, fun, and popular game. We all have played this in our childhood. Today, we will learn how to code this game.

This game is played between two players. Both the players choose either X or O, one after another. The game starts with one of the players and ends when one of the players has one complete row/column/diagonal filled with his/her respective X’s or O’s. If no one wins, then the game is said to be a draw or a tie.

In this article, we will learn to create a ‘Tic Tac Toe Game’ in Python using GUI. This game can be played on the system by any two players/users.

Via this article, you will get a clear understanding of the logic behind the code and the working of the game.

Creating a GUI ‘TIC TAC TOE’ Using Python Language

Importing Tkinter Library and Starter Code

Import the Tkinter and message box library as shown below (The message box library is for the popup message showing if you have won or lost or when you make an error in clicking a box that is already filled).

Create an instance of Tkinter’s window, Tk(). Set the title of the window as ‘Tic-Tac-Toe’. Also define two variables, ‘clicked’ and ‘count’ as ‘True’ and ‘0’ respectively.

The Code Block

Building Our Buttons On-Screen and the Reset Function
Create a RESET function (this will be called every time the game starts again). Create 9 global variables b1, b2, b3, b4, b5, b6, b7, b8, and b9 for all the nine buttons. Create ‘clicked’ and ‘count’ as global variables and set them to ‘True’ and ‘0’ respectively.

Now, initialize the 9 buttons using the Button Function. Pass root and set text to empty, font style to Helvetica and size to 20, height to 3, width to 6, and background colour to ‘SystemButtonFace’ (System colour). Also pass the button itself using Lambda, to the function b_click. Do the same for all the 9 buttons.

Grid all nine buttons to the screen using the grid function and set the row and column values accordingly. (Refer to the code below)

This gives us our 3X3 board.

The Code Block

Create a Button Click Function Named b_click()
First, define two variables, ‘clicked’ as True (the first click is X; we start with X always) and count as 0. Each time we click, the count will keep increasing, indicating the number of moves.

Please note that X and O are being entered alternatively and we always start with X here.

Create the b_click function. It will receive the buttons as arguments.  Declare the above two variables as global inside.

Next, check if the button is empty and clicked == true (X is being entered), then we set text in the button to “X”. Also set, clicked = false (as its O‘s turn now) and count += 1 (increase count).

Now in itself again, check if the button is empty and clicked == false (O is being entered), then we set text in the button to “O”. Also set clicked = True (as its X‘s turn now) and count += 1(increase count). You also have to check at each click, if anyone has won. For this, we call the ‘checkifwon()’ function which will be defined in the next step(step 3).

Finally, the final condition is for the case where someone clicks on an already filled button. In this case, we display an error using the message box, as shown below. Set the title of the box as ‘Tic-tac-toe’ and the message to be displayed as “Hey! That box has already been selected.”

The Code Block

Check to See If Someone Has Won
Create a function named ‘checkifwon’.

Create a global variable ‘winner’ and set it as false (means no one has won so far). Someone will win if we have 3 Xs or Os, horizontally, vertically, or diagonally. For this, at every click, we need to check the values of all possible alignments.

We check the text contained in b1, b2, and b3 and see if they all are X or not. If yes, then we change the background colour of all three buttons to ‘Red’. Then, we set ‘winner’= true, as we have got a winner. We display a message too via the message box that says “Congratulations! X wins.” using the ‘show info’ button.

We also need to disable all buttons once anyone wins. So, we call the function disable_all_buttons(). We will define it later in this step.

Do the same for b4, b5, b6 and b7, b8, b9. (horizontal)

Then, b1, b4, b7; b2, b5, b8; b3, b6, b9 (vertical)

Finally, b1, b5, b9 and b3, b5, b7 (diagonal).

So, a total of 8 conditions for X need to be checked. Similarly, check for O’s win the same way. Just replace X with O in the above code. (Refer to the code below)

After all this, we also need to check the condition where the count has reached 9 (all 9 moves are over) and Winner= false i.e., there is no winner.

In this case, we declare a TIE using the message box.

Let’s tackle the ‘disable_all_buttons’ function. Create a function named the same and configure the state of each button as ‘DISABLED’. (Refer to the code below)

The Code Block

Create a Menu to Reset Our Game

Create a menu named my_menu and put it in the root. Configure the menu to my_menu using config().

Next, create options_menu as shown below. Cascade this to the my_menu using add_cascade. For the options_menu, add a command/function named ‘reset’ (defined in step 2) and set the label as ‘Reset Game ‘.

Call the reset function defined in step 2. So, every time someone clicks on ‘Reset Game’, the game will restart from the beginning.

End the code with root. mainloop().

The Code Block

Finally, our program is ready for execution.

The Conclusion

In this manner, you can create a tic tac toe game on your own. It gets easier to create this game using Python because of the efficiency of the programming language.

Please note that this post is divided into parts for the maintainability, neatness of the code, and for your easy understanding. I hope you enjoyed reading this article and found it useful.

About the author

Shalini Salotra