In Python

You'll build your own version of TicTacToe using Buttons, Labels, the Grid Manager, and a couple of arrays.

The GUI

When writing somewhat complex GUI Applications I like to start with the user interface itself. Once I have it up and running then I find it somewhat easy to go and make it functional.

Create your main window and name it root. Set the title to Tic-Tac-Toe and its size to 355x420

The Status Frame

To make the layout work we are going to have to use a couple of different frames. Create the first Frame and call it topFrame. You want to attach it to the root window, set the width property to 320 and the height property to 40. To locate the Frame on the window we are going to use the place function. Call the place function that is part of the topFrame and set x = 12 and y = 12.

Create a Label called lablStatus that is attached to the topFrame, set the text to "O's Turn", background color to yellow, forground color to blue and use a serif font. Pack the Label using the default side of TOP

The Main Frame

This frame will be used to hold the buttons for the tic-tac-toe game. Create the frame, call it mainFrame. Attach it to the root and set it's width to 330 and height to 330. In addition set the background color to black

Place the frame at x = 10, y = 42

Placing Buttons in the Main Frame

The main game is going to consist of nine Buttons that will display 'X' or 'O' when one of them is clicked and depending on who's turn it is. The easiest way to make these buttons is as a 2D array that is 3 rows by 3 columns. We will call this array grid. To create the Button array we should first create an empty 2D array. This can be accomplished using this code:

grid = [ [ 0 for i in range (3) ] for j in range(3) ]

The next step is to simply use a nested loop to initialize each of the buttons and place them in the mainFrame.

I will give you the code for it:

for rw in range(0, 3) : for col in range(0, 3) : grid[rw][col] = Button(mainFrame, text=" ", relief = 'solid' ) grid[rw][col].config(font = "monospace 36 bold", fg = 'red', height = 1, width = 3) grid[rw][col].place(x = rw*105 + 10, y=col*105+10) 

Create The Button

Create a Button called btnRestart and attach it to root, set the text to "Restart" , command to resetGame, and the width to 30. Place the Button at x = 45, and y = 380

Note:

At this point you have not created the function called restart that was used for the button command. You might want to add that now. Simply put a print statement that says 'Restart Code' or some other message. This will all be changed when we get to the game logic portion of the code.

At this point you should have GUI that runs and looks like the code below. One last thing though. Make sure you have the mainloop code at the bottom of this.

Needed Functionality

Before getting into the the needed functions there are a few variables that need to be created to make the game function. These should be placed just before the creation of the main window.

grid - this is a 2D array. Created this way: grid = [ [ 0 for i in range(3) ] for j in range(3) ]

numClicks set to 0 - Used to keep track of the number of moves

isDone set to False - Used to keep track of game completion

isXTurn set to True - Used to keep track whose turn it is.

We are going to do something to create this game that I am really against and that is using global variables. Probably the correct way to do this would be to create it as a class but we haven't gotten there yet. In any event we will go this route but keep in mind this is not ideal!!

The resetGame Function

The resetGame function should have been written when you created the GUI. This function is going to be used to restart the game. Here are the steps to complete the function:

define isXTurn, numClicks, isDone as global. You simply put the global keyword in front of them

global isXTurn

Create a nested for loop whose inner and outer loop run three times. Inside the loop you are going to call grid[row][col] config method setting the text to a space: ' '

Set numClicks to 0

Set isXTurn to True

Set isDone to False

The markSpace Function

This function takes two parameters rw and col and is used to mark the appropriate space with an X or an O. Here are the steps to complete it:

define isXTurn, numClicks, isDone as global. This is the same as you did int the previous function

Check to see is the isDone variable is True. If it is the game is over so simply return

Get the space to mark using this code: space = grid[rw][col].cget('text')

Check to see if space is equal to an empty space. If it is then

Check to see it it is XTurn. If it is then do the following:

grid[rw][col].config(text = 'X', fg = 'red')

lblStatus.config(text = 'O\'s Turn')

Otherwise:

grid[rw][col].config(text = 'O', fg = 'blue')

lblStatus.config(text = 'X\'s Turn')

If the space variable is not equal to an empty space then simply set the text of lblStatus to 'Invalid Move' and return

set isXTurn to the not of isXTurn

increment numClicks by 1

call the gameOver function and pass rw and col to it.

The gameOver Function

This function is used to check to see if the game has been completed and won. It is a tricky function so I am simply going to give you the code:

def gameOver(rw, col) : global numClicks global isDone winner = ' ' if(grid[0][0].cget('text') == grid[1][1].cget('text') and grid[1][1].cget('text') == grid[2][2].cget('text')) : winner = grid[0][0].cget('text') elif(grid[2][0].cget('text') == grid[1][1].cget('text') and grid[1][1].cget('text') == grid[0][2].cget('text')) : winner = grid[2][1].cget('text') else : for r in range(0, 3) : if(grid[r][0].cget('text') != ' ' and grid[r][0].cget('text') == grid[r][1].cget('text') and grid[r][1].cget('text') == grid[r][2].cget('text')): winner = grid[r][0].cget('text') elif(grid[0][r].cget('text') != ' ' and grid[0][r].cget('text') == grid[1][r].cget('text') and grid[1][r].cget('text') == grid[2][r].cget('text')): winner = grid[0][r].cget('text') isDone = True if(winner == ' ' and numClicks >= 9) : lblStatus.config(text = 'Tie Game') elif(winner != ' ') : lblStatus.config(text = winner + ' Wins!') else : lblStatus.config(text = 'X\'s Turn' if isXTurn else 'O\'s Turn') isDone = False 

At this point you should have a working game. If not then you need to go back and check the logic.

Tic-Tac-Toe O's Turn Restart