Tic Tac Toe GUI In Python using PyGame
This article will guide you and give you a basic idea of designing a game Tic Tac Toe using pygame library of Python. Pygame is a cross-platform set of Python modules designed for writing video games. It includes computer graphics and sound libraries designed to be used with the Python programming language.
Let’s break the task in five parts:
- Importing the required libraries and setting up the required global variables.
- Designing the game display function, that will set a platform for other components to be displayed on the screen.
- Main algorithm of win and draw
- Getting the user input and displaying the “X” or “O” at the proper position where the user has clicked his mouse.
- Running an infinite loop, and including the defined methods in it.
Note: The required PNG files can be downloaded below –
Importing the required libraries and setting up the required global variables
We are going to use the
time, and the
sys library of Python. time library is used to keep track of time and
sleep() method that we are going to use inside our code. Have a look at the code below.
Designing the game display
This is the trickier part, that makes the utmost importance in game development. We can use the display.set_mode() method to set up our display window. This takes three arguments, first one being a tuple having (width, height) of the display that we want it to be, the other two arguments are depth and fps respectively.display.set_caption(), sets a caption on the name tag of our display. pg.image.load() is an useful method to load the background images to customize the display. This method takes the file name as an argument along with the extension. There is a small problem with
image.load(), it loads the image as a Python object in its native size, which may not be optimized along with the display. So we use another method in pygame known as pg.transform.scale(). This method takes two arguments, one being the name of the image object and the other is a tuple having (width, height), that we want our image to scale to.
Finally we head to the first function, game_initiating_window(). On the very first line there is a screen.blit() function. The screen is the Python function and blit is the method that enables pygame to display something over another thing. Here out image object has been displayed over the screen, which was set white initially. pg.display.update() is another important function in game development. It updates the display of our window when called. Pygame also enables us to draw geometric objects like line, circle, etc. In this project we have used pg.draw.line() method that takes five arguments, namely – (display, line color, starting point, ending point, width). This involves a little bit of coordinate geometry to draw the lines properly.
This is not sufficient. At each update of the display we need to know the game status, Weather it is win or lose.draw_status() helps us in displaying another 100pc window at the bottom of the main window, that updates the status at each click of the user.
The main algorithm has a straight forward approach. A user can win row-wise, column-wise, and diagonally. So by using a multidimensional array, we can set up the conditions easily.
Getting the user input and displaying the “X” or “O”
This part deals with a visualization of the board and a little bit of coordinate geometry. drawXO() takes two arguments row and col. First of all, we have to set up the correct geometrical position to put the image of X and image of O that we have stored as two python objects “x_img” and “y_img” respectively. Have a look at the code for a proper understanding.
user_click() is a function we have designed to get the input from a user mouse click. Imagine, you have clicked on one of the nine parts (boxes divided by the lines we have drawn horizontally and vertically), this function will define the coordinate of the position where you have clicked.pg.mouse.get_pos() gets the x-coordinate and y-coordinate of the mouse click of the user and return a tuple. Depending upon the (x, y) we can define the exact row and the exact column where the user has clicked. Finally, when we have the row and col, we pass these two as arguments to the function drawXO(row, col) to draw the image of ‘X’ or the image of ‘O’ at the desired position of the user on the game screen.
Running an infinite loop
This is the final important step to run our game infinitely until the user clicks exit. Before running an infinite loop, we need to set up a function that can reset all the global values and parameters to initial values for a fresh start of the game.
reset_game() is used for this purpose. It resets the board value to 3 * 3 None value again and initializes global parameters.
In the game development, every action by the player is an event. Whether he clicks on the window or clicks on the exit/close icon. To get these events as an object, pygame has a built-in method used as pg.event.get(). If the event type is “QUIT”, we use the sys library of Python to exit the game. But if the mouse is pressed, the event.get() will return “MOUSEBUTTONDOWN” and our call to user_click() happens to know the exact coordinate of the board where the user has clicked.
In the entire code we have used the
.sleep() method to pause our game for sometimes and make that user friendly and smooth.
The complete code: