TicTacToe Exercise

TicTacToe is usually played on a 3-by-3 square board. To make things more interesting (and to help you learn how to write flexible code) our version will allow any square board size. To see what the finished product might look like, run this file: TicTacToe6.pyc. After you enter the board size, (e.g. 3, 4, or 5 for a 3-by-3, 4-by-4, or 5-by-5 squared board respectively) and press the <ENTER> key, click the mouse on the board. Note that it is possible that the board will pop up behind other windows. If you don't see the board after entering the board size, try moving or hiding some other windows.

Check It Out

Before beginning, check out the TicTacToe project from your Subversion repository by following these steps:

1. Switch to the SVN Repository Exploring perspective in Eclipse.
2. Find the TicTacToe folder in your Subversion repository. (If your Subversion repository doesn't appear, see the Subversion slides for connection directions.)
3. Right-click on the TicTacToe folder and choose Checkout... Accept the default options in the dialog that appears.
4. Switch back to the PyDev perspective.

One step at a time!

0. All good programmers start with 0: Edit the TicTacToe.py module in your project so that it creates a graphics window and draws a 3-by-3 TicTacToe grid. Your finished program may look something like TicTacToe0.pyc . Try it out before writing your code.

   This task is fairly simple, but you should do it in a way that will help you plan ahead for future versions. Here are a few lines of code that you may want to use. Defining named constants and using them in your code instead of numbers can avoid the use of "magic numbers" that can make code difficult to enhance and maintain. In this case, it helps because the board size will not always be 3 in later versions of the program,

        BOARDSIZE  = 3                   # number of rows and columns
        BOARDRANGE = range(BOARDSIZE)    # range of rows and columns
        PPS        = 150                 # pixels per square
        WINDOWSIZE = PPS * BOARDSIZE     # width and height of window
        INSET      = 15                  # num of white pixels around X's and O's in squares
        
     
   

   If you want to make the board linger on the screen for a few seconds and then disappear like the sample program does, import the time module, and include the line time.sleep(3) before your window.close() statement. Don't forget that you also need to import the graphics module.

   If you want the user to click on the window to make it disappear instead of making it lingering for a few seconds, include the line  window.getMouse() before your window.close() statement instead of the line time.sleep(3).
   

   Before going on to the next step, commit your project to your Subversion repository by right-clicking it and choosing Team → Commit... Please make sure your commit comment indicates Phase 0.

1. Enhance your program so it asks the user for the board size, then draws the grid, as in this program: TicTacToe1.pyc . The number the user enters should become the new value of BOARDSIZE; then after calculating WINDOWSIZE so that it will hold the different-sized board, the rest of the program may not have to be changed.
   

   Before going on to the next step, commit your project to your Subversion repository. Please make sure your commit comment indicates Phase 1.

2. Define two functions, drawX(row, col) and drawO(row, col). Each should take two parameters, a row number and a column number. For example, the call drawX(1, 2) should cause an X to be drawn in the second row and third column (don't forget that row and column numbers start with 0), while the call drawO(0, 0) should cause an O to be drawn in the upper left square. See this example: TicTacToe2.pyc. You may find it helpful to write some helper functions that map row and column positions to window pixel locations. For, example, this function calculates the coordinates of the upper-right point of an X drawn in the square of a given row and column:

       def rectUpperRight(row, col):
       'coordinates of top right of inset X or O'
       return Point(PPS*(col+1) - INSET, PPS*row + INSET)
   

   Call each function, drawX() and drawO(), with some different values for the parameters and verify that they work correctly. Can you put an X and an O in the same square? (In a later step you will solve this).

   Before going on to the next step, commit your project to your Subversion repository. Please make sure your commit comment indicates which phase you just completed.

3. Enhance your program (using loops) by writing a fillBoard( ) function that fills the entire board with alternating Xs and Os, as in this example: TicTacToe3.pyc. Your code should work similarly to the example whether the board size is even or odd. Don't forget to actually call fillBoard!

   Before going on to the next step, commit your project to your Subversion repository. Please make sure your commit comment indicates which phase you just completed.

4. Use the window's getMouse() method to determine where the user clicks, and draw an X in that square. The next click should cause an O to be placed, etc. When there are enough clicks to fill the board, the program should terminate. At this point, we have no mechanism for keeping track of previously-clicked squares, so there is no way to prevent having an X and an O drawn in the same square. Here is an example: TicTacToe4.pyc. [Hint: You should remove the call to fillBoard.  Also, you might find integer division helpful for this part.]

   Before going on to the next step, commit your project to your Subversion repository. Please make sure your commit comment indicates which phase you just completed.

5. Keep track of which squares on the board are already filled. It is suggested that you use a two-dimensional list of numbers, one number for each square on the board. In the example -1 represents that the corresponding square is unfilled , 0 for an X, and 1 for an O .
   For example, if the board is , then the corresponding nested list is
   [[-1, 1, 0, -1], [-1, -1, 0, -1], [0, 1, -1, -1], [-1, -1, -1, -1]].
   Now, when the user clicks a square, see if the corresponding list position contains -1. If so, draw the appropriate X or O, and mark the list position to indicate which symbol is in that square. If not, ignore the click altogether (make sure that you only count the number of successful clicks, so that the program will not quit until the board is actually full). Here is an example: TicTacToe5.pyc

   Before going on to the next step, commit your project to your Subversion repository. Please make sure your commit comment indicates which phase you just completed.

6. After each successful user click, check to see if this move caused a win by making an entire row, column or diagonal containing the same symbol (X or O). It might be easiest to do this by breaking the task up into several small tasks and writing a short function for each task. If there is a winner, draw a line through the winning squares, and stop the loop by using a break statement. The example is the one that you ran at the beginning of this document.

   Congratulations on completing this interesting project. This was a challenge but you did well by completing it.

   Commit your project to your Subversion repository. Please make sure your commit comment indicates that you have completed the project.