Assignment 1                              CS130

TicTacToe                                  

Purposes: 

· Practice responding to the mouse

· Practice using Rectangle and graphics

The program will enable two people to play tic-tac-toe  (using one computer and sharing the mouse).  Here's a screen shot after five moves:

Requirements:

1.   When the program opens, an empty grid is visible, and TicTacToe2345 is in the title bar, where 2345 stands for the last 4 digits of your student ID.

2.  Players take turns with the mouse, clicking in the squares.   The first legal click produces an X, the next an O, and so on.  No flicker occurs. Legal clicks are in empty squares of the grid.  Illegal clicks are outside the grid or in squares that already contain an X or O.   Illegal clicks are ignored. 

3.   The game is over when one player gets three in a row, vertically, horizontally, or diagonally.   When that happens, all further clicks are ignored.

4. The three winning X’s or O’s turn red when the game is over.

Grading Criteria:   Requirement 1 only:  a C.  Requirements 1 and 2:  a B.

Requirements 1,2, and 3:  an A.   For an A+:  also requirement 4.    If flicker occurs it will cost one-third letter grade, e.g. from B to B-.   

Programming hints up to B level  (For an A, you’re on your own):

1.  Create a new Visual C#  Windows Application project called TicTacToe.  Set the Text property of your form to TicTacToe2345, using your 4-digit student ID number instead of 2345.  Set the BackColor property to Window so it will be white. 

2.   Add a 3 by 3 array of characters called m_Board  to the form class  and initialize it in the constructor to contain all blanks.    The syntax for doing this in C# is as follows:

private char[,] m_Board;

public Form1()

{ InitializeComponent();

  m_Board = new char[3,3];

When you later want to assign or access the members of these arrays, the syntax is m_board[i,j].

3.   Also add m_Next  of type char,  and initialize it to 'X'.    This variable keeps track of whose move it is.

3.  Add a 3 by 3 array of Rectangle  called m_DisplayBoard, and initialize these rectangles in the view class constructor.   They should form a tic-tac-toe board as shown in the screen shot.   Of course, you can't see them yet.    Use two nested for-loops to initialize these rectangles.  Do NOT write 9 separate pieces of code.  

4.  Right-click your form in design view, bring up its property sheet,  click the lightning bolt to get events.  Double click  the MouseDown  and  Paint events to add handlers.

5.  Put code in Form1_Paint  to display the rectangles.   Use two nested for-loops.  Do NOT write 9 separate pieces of code.    Use DrawRectangle to do the drawing.    Do not use any numbers in Form1_Paint.  You should be able to change the size of your tic-tac-toe board by adjusting the numbers in the constructor of the form class only.

6. Add code in Form1_Paint  to display the 'X' and 'O' characters that are stored in m_Board.   The character stored in m_Board[k][j]  should be displayed in the rectangle m_DisplayBoard[k][j].   Since DrawString needs a String, you will have to construct a String from the character stored in m_Board[k][j].    Get the coordinates to pass to DrawString  from the coordinates of m_DisplayBoard[k][j].   Do not hard-code them—you can, as discussed before, change the size of the board display by adjusting some numbers in the form class constructor only.  If you hard-code the coordinates passed to DrawString, then the X’s and O’s won’t be placed right if the size of the board changes.   At first, your X’s and O’s will come out in the upper left corner of the correct square.  Later, you can fix that by adding another member variable or variables to offset the X’s and O’s by.  

7. Put code in your MouseDown  handler to find out if the mouse was clicked in one of the nine rectangles, and if so, in which one.  (Use another double for-loop.) If it was clicked in the rectangle m_DisplayBoard[k][j], then check if that square has already been played in--if it has, you can't move there, so do nothing.   If not, enter an 'X'  or 'O'  into  m_Board[k][j].   You use the value of m_Next  for this 'X' or 'O',  and once you've used it,  change it to the other one of 'X' or 'O'  so it correctly keeps track of whose move it is.   Don't do any drawing--just change data and call Invalidate.   Be sure you invalidate only the rectangle whose display needs to change, not the whole window.