Baroody's Game Development Site

A Website to help you program computer games

Step 2:  Setting Up

Let's walk through what you need to do in order to bring your Slider game to life.  As with Tic Tac Toe, we'll start with some "set up" - defining variables and writing 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.  Also, add an integer variable called gintSpacePos, which will hold the current position of the "space" on the form.

General Declarations Code

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.  Basically, we want to randomly rearrange all the tiles, right?  Check out the code below...an explanation follows:

New Game sub routine

We start out by defining a number of variables with a local scope.  The first two of these ("i" and "j") are integers that we'll use to navigate the command button array and an associated integer array that we call "intIndexArray."  "intRandNum will hold a random number between 1 and 8, which will be used to randomly assign numbers to game spaces.  "blnNotFound" and "blnIsInArray" are flags that we'll use to determine processing as we walk through the following code.

The first thing we do is to order the numbers 1 - 8 left to right, up to down (in other words, we put the 8 numbers back into the positions that they were at when we originally set up the form).  We also make the first 8 command buttons be visible.  For the 9th command button, we make its caption be "" and make it be invisible.  This is where the "space" will be located (which we indicate by setting gintSpacePos = 9).

Now for the fun stuff.  In the next section of code, we have a nested IF inside a FOR loop, a nested WHILE loop within the nested IF, and a nested FOR loop within the nested WHILE.  Whew!  The only way I can ever figure this stuff out is to really work through it.  So, I set up a table that will track the values of various variables.  Here's the one I'm going to use for this example:

Variable

 Value

i

 1
j 1
blnNotFound True
blnIsInArray False
intRandNum 0

OK, let's see what happens here...

  • First, we set i = 1. 
  • Then, we check to see if the Caption of the cmdDisplayArray(1) is "".  If it is not "", then we add 1 to i.  If it is "", then we move on in our processing.  The first time through, cmdDisplayArray(1) will be "1" (we set it previously, remember?), so we'll move on to the next code.
  • We start by setting blnNotFound to "True."  This flag will be used as the exit condition for the WHILE loop...in other words, we'll keep executing the WHILE loop until blnNotFound = "False."
  • Next, we move into the WHILE loop.  We start by generating a random number between 1 and 8 and placing it in the variable intRandNum.  For our purposes, let's assume that the number we generated is 5. 
  • Next, we set the flag blnIsInArray to "False."  This flag will be used to indicate whether or not we have already assigned 5 to any of the eight positions in the game (the 9th being the empty space). 
  • Next, we go through our integer array to see if the number 5 has been previously assigned.  We use the variable j and FOR loop for this purpose.  If we find the number 5, then we will set blnIsInArray to "True."
  • Once we have checked all 8 entries of the integer array, we move on.  If the random number (5 in our case) was not found (it was not the first time through since all the values of the integer array were 0 to start), we assign it to the first position of the integer array (intIndexArray(i) = intRandNum - remember that i = 1 at this point).  We also set the cmdDisplayArray(i).Caption to "1" and make blnNotFound be "False."
  • Since blnNotFound is "False," we exit the WHILE loop and increase i by 1.  Our variables now look like this:

Variable

 Value

i

 2
j 8
blnNotFound False
blnIsInArray True
intRandNum 5

We now run through the logic again. 

  • cmdDisplayArray(2) = "2" right now, so we move on. 
  • We set blnNotFound to "True" and enter the WHILE loop. 
  • Next, we generate a random number...let's say we get 3..., set blnIsInArray to "False" and enter the inner FOR loop. 
  • We check all 8 positions of the integer array and find that 3 has not yet been assigned. 
  • Since this is the case, we set intIndexArray(2) and cmdDisplayArray(2).Caption to have the value 3.  We also set blnNotFound to "False" allowing us to exit the WHILE loop and up i by 1 (it is now 3).

Let's go through one more time, OK?  Hopefully, by then end of that, you'll really understand...

  • cmdDisplayArray(3) = "3" right now, so we move on. 
  • We set blnNotFound to "True" and enter the WHILE loop. 
  • Next, we generate a random number...let's say we get 5..., set blnIsInArray to "False" and enter the inner FOR loop. 
  • We check all 8 positions of the integer array and find that 5 has already been assigned to intIndexArray(1).  Therefore, we set blnIsInArray = "True."  Since this is true, we don't assign this number to any position and we enter the WHILE loop at the top again (blnNotFound is still "True").
  • We generate a random number...let's say we get 7..., set blnIsInArray to "False" and enter the inner FOR loop.
  •  We check all 8 positions of the integer array and find that 7 has not yet been assigned. 
  • Since this is the case, we set intIndexArray(3) and cmdDisplayArray(3).Caption to have the value 7.  We also set blnNotFound to "False" allowing us to exit the WHILE loop and up i by 1 (it is now 4).

Get it?  We'd continue on in this process eight times (i = 1 to 8).  At the end of this processing, we have our eight numbers randomly assigned to the first 8 positions in our game and have a blank space in the ninth position.

If you run the program now, the form will come up with the numbers in displayed in order from 1 - 8 and a blank (although not empty) space in the 9th position.  Does that seem right?  Notice that if you select Options-->New Game, nothing happens.  In fact nothing happens if you hit Options-->Exit or Help-->About either!  Why is that?  It's simple...we haven't written any sub routines to run when we click on those options...Try this for Options-->New Game and Options-->Exit.  You should be able to do Help-->About on your own.

Options-->New Game sub routine

Now run the program again and see what happens when you click on Options-->New Game.  You should be able to select it over and over again and get a different random arrangement of the pieces each time.

One last thing before we learn how to move the pieces around...when the game starts up the first time, shouldn't it have a blank space and have the numbers be randomly positioned already?  Yes it should.  Doing this isn't difficult, since we already have the NewGame routine....the only hard thing is knowing where to put the code.  We really want to run our NewGame routine when the program starts up, right?

The good news is that VB provides this opportunity.  There is a special sub routine reserved for just this purpose.  It is called "Form_Load()."  This routine is run whenever the form is loaded...makes sense, right?  Now, to get the Form_Load() routine to show up in your code, select "Form" on the drop down menu at the top left of the code window and then select "Load" from the drop down menu at the top left (it should be the default).

Putting Form Load in your code - Step 1

Putting Form Load in your code - Step 2

Now that the routine is there, take a look at the code below...I've added a couple of extra things in there that are important.

Form_Load sub routine

At the bottom, you see that we run the NewGame routine, which is what we started out to do in the first place.  Just before that, we run the command called "Randomize."  That basically initializes the rnd function so that it doesn't start it's random number generation at the same place all the time...don't sweat this too much, just make sure to always have a "Randomize" statement in your code if you're using the rnd function.  Putting it in the Form_Load() routine is also a good idea.

Now, on to the code that centers the form.  This code is pretty cool and very useful.  I'm not going to take too much time to explain it, but basically, it centers the form in the window on every computer, regardless of the size of the monitor or the resolution.  Neat, huh?

OK, I think we're set to move on.  Assuming everything is working well in your program so far, you can move on by clicking here or selecting Step 3: Moving Pieces on the navigation bar.