Game Development Tutorial

Ok, you finally got to see some results, but how can you be sure that that our field is indeed made of small blocks, and that all this code didn't just produce a big blue rectangle? Easy. In this chapter, we'll add some code that'll display a grid on our field, and then we'll try to change the color values in our blocks. Just to be sure everything works. We'll add another control to our form. A check box that we'll use to show or hide the grid. To add it to the form, double click on the 'Check Box' control in your Tool Box, and then set it's Properties like shown in the next table: 

CheckBox

• (name): cbGrid
• BackColor: Web > Transparent
• Location: 490;116
• Text: Show Grid

Since we've already added a 'using' statement for Drawing2D library, we'll be able to define our custom pens in our code for displaying the grid. Again, go trough the code, type it on your own, and read the comments. (I hope you're not retyping all of my comments ;) – write your own – in a way that you'll understand.)

This is the code that you have to put inside the DrawGrid() function:

// Checking if the check box
// is checked or not. If the
// checkbox is checked – then
// we'll display the grid.
// The grid is made up from 9
// horizontal and 14 vertical lines.
if (cbGrid.Checked == true)
{
  Graphics gGrid = picGameField.CreateGraphics();
  // We'll create our custom PENS:
  // Pens hold the information about
  // color, line style and other
  // graphical properties that are
  // usefull for drawing shapes.
  // Pen that we'll use for horizontal lines:
  // Here we define our pen as 'Sky Blue',
  // and that the line drawn will be
  // 1 pixel in width:
  Pen pLineH = new Pen(Color.SkyBlue,1);
  // Here we define that the line will be
  // drawn with a series of little dashes:
  pLineH.DashStyle = DashStyle.Dash;
  // Next, the code for our Pen that we'll
  // use for our vertical lines.
  // Note, that we could use the same pen
  // for both horizontal, and vertical
  // lines, but that would mean that, they
  // would have the same color and style.
  // To spice things up, I've decided to
  // make them a little different.
  // So once again:
  Pen pLineV = new Pen(Color.DeepSkyBlue, 1);
  // This pen will draw line with a
  // series of small dots:
  pLineV.DashStyle = DashStyle.Dot;
  // Finally, let's draw our vertical lines:
  // Again, we'll draw them in a loop,
  // so we don't have to write 13 almost the
  // same lines of code.
  for (int a = iFieldSize; a < (iFieldSize * iWidth); a = a + iFieldSize)   {     gGrid.DrawLine(pLineV, a, 0, a, iHeight * iFieldSize);   }  
  // And horizontal lines:
  for (int b = iFieldSize; b < (iFieldSize * iHeight); b = b + iFieldSize)   {     gGrid.DrawLine(pLineH, 0, b, iWidth* iFieldSize, b);   }

Now, scroll to the butGame_Click method, and this code there:
(Add it before the call to the DrawField() method.)

// Defining a block: 
// Field[vertical, horizontal] = color
Field[0,0] = 1;
Field[4,8] = 2;
Field[2,12] = 3;
// You can add some of your own here…
// Just be sure that the field
// coordinates are not out of range.
// This is the block with the maximum
// range (bottom right field):
Field[9,14] = 4;

And, add this code after the DrawField() call:

//Draw the grid:
DrawGrid();

After running the program, selecting the 'Show Grid' check box and clicking on the 'New Game' button, you should see something like this:

So, this is it for this chapter. In the next chapter we'll try to create a column full of new blocks, with randomly selected colors, and then show it in the first column on our game field.