Baroody's Game Development Site
A Website to help you program computer games
Step 2: Setting Up
OK, here's where the fun starts! Let's walk through what you need to do in order to bring your Tic Tac Toe game to life. We'll start with some "set up" - in other words, in this part of the tutorial, we'll define variables, write the routines that will help us to get the game ready to play.
You should start by looking at your code, which should be blank at this point. Put in your header and the Option Explicit line to start.
Once we've got these preliminaries out of the way, let's think about what should happen when the "Start New Game" button is pressed. This could happen in two situations:
- No games have been played yet, so none of the images in the grid are filled, or
- A game has just finished, so that some (or all) of the images are filled.
In programming, we need to account for all potential situations. If the images are filled with X's and O's, we don't want to start a game that way, do we? No, we don't, so let's start by placing a blank picture in each entry of the image array.
In order to do this, we're going to need an array of integers that will parallel the control image array we created on the form and will keep track of what is in each image array position. We'll define this array at the module level (meaning that it will "stay alive" for the whole time the form is up and running). To do this, we'll declare it in the General Declarations section of the code. So, under Option Explicit, put this code:
The first variable declared here sets up the array of 9 integers to parallel the control image array on the form (imgGrid(0-8)). The second variable declared will keep track of which player has the current turn. The third variable is a boolean (true or false) that we will use to determine if a particular play has resulted in a win for one of the players.
Now, double click on the Start New Game command button and put in the following code:
Let's see if we can understand this code...We start by declaring a local variable called intTemp in which we can store integers. We use that in the next part of the code...something called a For/Next loop. Essentially, we will run through this loop nine times and execute the code in it each time. All it does is place a 0 in each of the variables mintGrid(0), mintGrid(1), mintGrid(2), ..., mintGrid(8). The 0 will indicated to the UpdateDisplay routine to place a blank picture in each of the image control array positions. If one of these variables holds a 1, then the UpdateDisplay routine will place an X in the associated image control array. If one of these variables holds a 2, then the UpdateDisplay routine will place an O in the associated image control array. Make sense? Make sure that you understand the syntax of the For/Next loop. They are really important in programming and are used all over the place.
Now, we set mblnIsAWin to false (indicating that the game has not been "won" yet), mintCurrentPlayer to 1 (Player 1's turn) and indicate the appropriate message ("Current turn: Player 1") in lblPlayer.Caption.
Finally, we call the UpdateDisplay sub routine, which is shown below:
You should be able to understand what happens here based on what we've already talked about. The only new thing here is the statement LoadPicture(""), which simply makes the picture property be blank.
At this point, we could run the program, click on the "Start New Game" button, and all we'll see is "Current turn: Player 1". However, a lot more has been set up for the way we'll go about making the game work.
If you're ready to see this game come to life, click here or select Step 3: Code to Play on the navigation bar.