How to finish this tic tac toe program?



  • Step 1: Properly Size Images
    Use the Pillow module to resize the images appropriately:

    Instructions to install (Links to an external site.)
    See the load_images method here (Links to an external site.) to see an example of how to use the Pillow module to properly resize the tic tac toe game images. Note: take a look at the import statement too! Don't forget the import...
    Step 2: Choose First Player Dialog
    Use the code from choose_user.py (Links to an external site.) for your file. This code creates a dialog that will open from the choose_player method. The tic_tac_toe.py (Links to an external site.) file has the example code in the choose_player method showing how to open the dialog and return the result.

    Step 3: Show a victory animation
    We will use the v.png image, saved to the class variable self.v_img, as our victory animation. In game programming, animations can be created by manipulating the way images are displayed either by making them appear, resizing them, etc. To do this we are going to refactor our tic_tac_toe.py file.

    Start by adding a new method build_actions_frame. This method will have the code to create the frame that contains the new_game and end_game buttons. We will also add an area to the frame where our victory image animation will appear when a player has won the game.
    In build_actions_frame move the code from our init method to create the action buttons frame to this method, and add a call to self.build_actions_frame() in init.
    Inside build_actions_frame, add additional statements to create a canvas below the game buttons, and save a reference:
    self.victory = Canvas(cmd_btn_frame, width=200)
    self.victory.pack()
    Next create a method animate_victory. The animate_victory method will move the victory image on the canvas
    For now, to test this method is working, add a call to animate_victory at the end of the new_game method. Eventually we will remove this call and only call it when:
    A player has won and "New Game" or "End Game" has not been clicked
    Inside animate_victory you need to:
    Create the image using the Canvas create_image method
    self.victory_container.create_image(0, 0, anchor=NW, image=self.v_img, tags="img")
    Note: you need to include the "tags" property, as this will be how you later reference the Canvas' image
    Create a while loop that will continue the animation as long as some condition is true.
    Because animation will be triggered from outside the method, I suggest you use a class variable "animate" as a Boolean value tracking whether or not the image should be animating
    Inside the while loop you use for loops to move the animation around the screen (see example from lecture(Links to an external site.))
    I would wrap any calls to move inside a try/except block to handle any graphics exceptions
    Now we need to trigger / stop the animation. The animation should only be shown once a player has won the game. The check for this belongs in mark_cell
    If a player has won, we need to consider a few things:
    We want any TTTButton clicks while the game is in a winning state to be ignored. To do this you want to set player = 0 to disable clicks until a new game has started
    We also need to make a call to start our animation (self.animate_victory)
    We will end the animation when a new game begins, or a player selects "End Game"
    Because both of these actions trigger a call to clear_game, we can add logic to stop the animation at the top of clear_game by:
    setting self.animate = False
    deleting the image from the canvas (self.victory.delete("img"))

    Step 4: Testing our program
    We know our program is complete when the game runs as follows:

    Game window opens to Welcome state
    message shown is welcome message
    End Game button is disabled
    New Game button is enabled
    TTTButton grid is disabled
    New Game button click starts a new game:
    Choose player dialog is shown and returns the selected player
    If the choose player dialog is closed without a selection a new game does not begin
    Once a player is chosen the game status message updates to show whose player turn it it
    TTTButton clicks update to the appropriate image
    End game button is enabled
    End game button clicks end current game, if any
    Should only be enabled while the game is in play, or a player has won
    End game clicks reset the window to the Welcome state
    When a player has won:
    The status message indicates which player has won (i.e. Player 1 Wins!)
    The victory animation is shown on the screen
    Both the New Game and End Game buttons are enabled
    New Game starts the choose player cycle
    End Game resets the window to the welcome state



  • The question is too broad. Asking questions on specific parts of the assignment/problem is much better and yields better results.


Log in to reply