Tutorial 8 - Planning for Tic Tac Toe
Released 4/28/07
By Chris Feilbach aka GhostRider
Contact Info:
E-mail: assembler7@gmail.com
AIM: emptybinder78
Yahoo: drunkonmarshmellows
Website: http://www.ghostrider.trap17.com
The first step in the development process of any script or program is to properly plan it. We will not write any code in this tutorial at all. We are simply going to plan out what we are going to write.
The first thing that I always think of is, "how would I do this same job as a human?". Ignore the fact that we are even programming. Just concentrate on how to play tic tac toe. Think about it for a while, and create a list. Below is my list.
1. Draw the board.
2. Someone has to x, and another person has to be o.
3. Take turns, placing x's and o's
4. Check to see if anyone has won.
Hopefully you've come up with something similar to that. Next we need to know details about tic tac toe. Things like how it is played, what you need to have to play it, and other things you need. A very detailed summary would also work here.
+ Tic Tac Toe is played on a 3 by 3 grid
+ You need two players to play it.
+ Players place x's and o's on the board, with the intent to get 3 in a row.
+ Players win once they get 3 in a row, either horizontally, vertically, or diagonally.
+ Players take turns. The player who chose X gets to make the first move.
Take a look at the two lists we have made. We can now start to look at tic tac toe from a programming perspective. Remember back to the first tutorial. Programming is about taking in data, processing it, and outputing it. What data do we need to store, and how do we need to store it? Think about that now. Think arrays.
Tic Tac Toe has a 3 by 3 grid. Each square also has 3 possible values, the square can be empty, the square can have an o on it, or it can have an x on it. The only data we need to collect is the data sent from the user.
We can store the data from the board in three seperate ways. We could store them in each in a seperate variable, but that means that we can't easily use loops. We could store it in one array, or we could store it in a multidimensional array, which is easiest. The array will have two dimensions, the first one referring to the row (0 will be the top, 1 will be middle, 2 will be bottom). The next dimension will tell us which column it is (0 will be left, 1 will be middle, 2 will be right).
We also need to keep track of all of this data. But how? We could use form data, but that would mean our user would have to click a submit button everytime. Let's use sessions. Its more practical, and we don't need to have a user click a button every time.
We also need to keep track of whose turn it is. We can do that with a variable and simply switch it each time.
We need three images, one of a blank space, the other of an x, and the other of an o. I will provide these for us next tutorial.
The way our program will work is that it will start off by displaying a blank screen, with no x's or o's. We can use a 3 by 3 table in html, and make it so that when the user clicks an image it will either mark it as an x spot or an o spot.
After the user clicks the spot, it will check to see if anyone has one yet. We can take the three data values in each row and column and combine them together to see if someone has one. For example, if in one row we have an o, another o, and then an x our script will take them and combine their values to form oox. We can then check to see whether or not it is equal to ooo or xxx.
This is enough to grasp for one tutorial. We will do another form of planning, which I call flowcharting, that makes seeing how to program very easy. After that we will start to code it. That will probably take two tutorials to complete. Try planning out how to create another simple game, or something else. It will really help you grasp this.
