Tutorial - Project - Tic-Tac-Toe

It is time to use what we have learnt to develop a program. This will be a simple example and we will continue developing in future tutorials.

Tic Tac Toe Board

The aim is to draw the state of a tic-tac-toe ( or Noughts and Cross ) board after a set of moves.

There will be three graphical elements to this: the grid itself and the two 'pieces'. We will also write a position generating function to convert a row and column into a Point structure. Create these four routines and call them for a set of moves. Assumes a fixed size display area and create a set of global constants to hold the overall layout information. Your output should look something like :-

Sample Tic-tac-toe Output

Once you have done that have a look at my version here.

Comments on my version.

I have create a constant to hold the number of cells per row/column, this is unnecessary as this will always be 3. But in general it is best to write code to be as general as possible - go back to you version and see how easy it is to convert it to handle a five by five board.

When I did the divisions I used the integer ( '//' ) division operator. This avoid any rounding errors that could cause problems drawing lines ( change it to '/' and see ).

Generalising the Program

At the moment this program has one specific instance of a game. We have not yet covered the data handling features required to allow the user to generate an arbitrary game but we can make a start on the code.

The first step will be to write a more general shape the will take as parameters a code for the piece and the row and column numbers. The definition of the shape should be :-

Shape Token(Number token, Number row, Number col)

You will need a Select statement. Define global constants to act as codes for the two tokens.

Once you have done that have a look at my version here.

As another modification remove the 'Point centre' declaration and use the 'With' construct instead.

My version is here.

All the versions so far have used absolute coordinates. Later we will modify the program to be able to draw the board at any location.