1. Tech

Your suggestion is on its way!

An email with a link to:


was emailed to:

Thanks for sharing About.com with others!

Programming The Tic Tac Toe Game
Part 1: Building the Game GUI
 More of this Feature
• Part 2: Initialization
• Part 3: Making A Move
• Part 4: Finding a Winner
 Related Resources
• Upgrading the Tic Tac Toe program to VB.NET
• A GDI+ Introduction for Visual Basic 6 Programmers
• A Complete Rewrite of the program for VB.NET/GDI+
• Download the source code for this program

Programming computer games may be the most technically challenging (and possibly the best paying) job that a programmer can have. Top level games require the best from both programmers and computers.

Visual Basic 6 has now been thoroughly bypassed as a platform for game programming. (It never really was one. Even in the "good ol' days", serious game programmers would never use a high level language like VB 6 because you just couldn't get the cutting edge performance that most games require.) But the simple "Tic Tac Toe" game is a great introduction to programming that is a little more advanced than "Hello World".

In addition, this article has now become the inspiration for a whole series that explores the issues of converting a program to .NET and the use of GDI+, the .NET way to do graphics programming. See the related resources box for links to all of the articles.

This first article is a great introduction to many of the fundamental concepts of programming since it combines techniques including:

  • The use of arrays.

The X and O markers are kept in separate arrays and the entire arrays are passed between functions to keep track of the progress of the game.

  • Using VB 6 level graphics.

VB 6 doesn't offer great graphical capability, but the game is a good introduction to what is available. Much of the rest of this series is an exploration of how GDI+, the next generation of Microsoft graphics, replaces the VB 6 level graphics.

  • Using math calculations for program control.

The program uses clever modulo (Mod) and integer division calculations using the two game marker arrays to determine when a three-element "win" has occurred.

The class of programming in this article is perhaps just a little past the beginning level but it should be good for "intermediate" programmers. But let's start at an elementary level to illustrate some of the concepts and get you started with your Visual Basic game programming career. Even students more advanced than that may find that it's slightly challenging to get the objects in the form just right.

To download the source code for the program Click Here!

Theory of the Game

If you've never played Tic Tac Toe, here are the rules. Two players alternate at placing X's and O's into 3 x 3 playing field like this:

The Tic Tac Toe Game

Before the game starts, both players have to agree about who will go first and who will mark his moves with which symbol. After the first move, the players alternately place their marks in any empty cell. The goal of the game is to be the first player with three marks in a horizontal, diagonal or vertical line. If there are no empty cells and neither player has a winning combination, the game is a draw.

Starting the Program

Before starting any actual coding, it's always a good idea to change the names of any components you use. Once you start coding, the name will be used automatically by Visual Basic so you want it to be the right name. We'll use the form name frmTicTacToe and we'll also change the caption to About Tic Tac Toe.

Playing Grid

With the form established, use the line toolbox control to draw a 3 x 3 grid. Click the line tool, then draw a line where you want it. You'll have to create four lines this way and adjust their length and position to make them look right. Visual Basic also has some convenient tools under the Format menu that will help. This is a great chance to practice with them.

Line Control

In addition to the playing grid, we'll need some objects for the X and O symbols that will be placed on the grid. Since there are nine spaces in the grid, we'll create an object array with nine spaces, called elements in Visual Basic.

There are several ways to do just about everything in the Visual Basic development environment, and creating control arrays is is no exception. Probably the easiest way is to create the first label (click and draw just like the line tool), name it, set all of the attributes (such as Font and ForeColor), and then make copies of it. VB 6 will ask if you want to create a control array. Use the name lblPlayGround for the first label.

To create the other eight elements of the grid, select the first label object, set the Index property to zero, and press CTRL+C (copy). Now you can press CTRL+V (paste) to create another label object. When you copy objects like this, each copy will inherit all properties except Index from the first one. Index will increase by one for each copy. This is a control array because they all have the same name, but different index values.

Adding Objects

If you create the array this way, all of the copies will be stacked on top of each other in the upper left corner of the form. Drag each label to one of the playing grid positions. Be sure that index values are sequential in the grid. The logic of the program depends on it. The label object with index value 0 should be in the top left corner, and the bottom right label should have index 8. If the labels cover the playing grid, select each label, right click, and select Send to Back.

Since there are eight possible ways to win the game, we'll need eight different lines to show the win on the playing grid. We will use the same technique to create another control array. First, draw the line, name it linWin, and set the Index property to zero. Then use copy-paste technique to produce seven more lines. The following illustration shows how to set the index numbers correctly.

Completed Grid

In addition to the label and line objects, we need some command buttons to play the game and more labels to keep score. We won't go through the steps to create these in detail, but here are all the objects you need.

  • two button objects
    • cmdNewGame
    • cmdResetScore
  • frame object fraPlayFirst containing two option buttons
    • optXPlayer
    • optOPlayer
  • frame object fraScoreBoard containing six labels
    Only lblXScore and lblOScore are changed in the program code.
    • lblX
    • lblXScore
    • lblO
    • lblOScore
    • lblMinus
    • lblColon
  • Finally, we also need the label object lblStartMsg to 'mask' the cmdNewGame button when it shouldn't be clicked. This isn't visible in the illustration below because it occupies the same space in the form as the command button. You may have to move the command button temporarily to draw this label on the form.

Here's the way everything looks once it's done!

Completed Form

So far, no VB coding has been done, but we're finally ready to do that on the next page!

Download the code for the About Tic Tac Toe Game!

Next page > Initialization > Page 1, 2, 3, 4

©2016 About.com. All rights reserved.