Thursday, February 16, 2012

[Csharp] Draw board game using GDI+


Beginning with .NET programming, you can develop some litle games. It will make you interest in study. In this post, I will show you how to use The Graphics Device Interface plus (GDI+) to draw some basic game boards.

1. O an Quan: 
It is an Vietnamese game, it's quite simple to draw. Here is code:

   1:          private void DrawMandarinSquareCapturingBoard(Graphics graphics, int width)
   2:          {
   3:              //Draw Ellipse
   4:              graphics.DrawPie(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X, _startPoint.Y, width * 2, width * 2, 90, 180);
   5:              graphics.DrawPie(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + width * 5, _startPoint.Y, width * 2, width * 2, 270, 180);
   6:   
   7:              //Draw rows
   8:              for (var i = 0; i <= 2; i++)
   9:              {
  10:                  graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + width, _startPoint.Y + i * width, _startPoint.X + 6 * width, _startPoint.Y + i * width);
  11:              }
  12:   
  13:              //Draw columns
  14:              for (var j = 1; j <= 6; j++)
  15:              {
  16:                  graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + j * width, _startPoint.Y, _startPoint.X + j * width, _startPoint.Y + 2 * width);
  17:              }
  18:          }

For the first, we are draw two Pies in two sides.For each, it's a half of cycle. Next we are draw lines for columns and rows.

2. King Chess Board
This is a popular game. Its board is include black and white square. Here is code:
   1:          private void DrawChessBoard(Graphics graphics, int width)
   2:          {
   3:              //Draw bolder
   4:              graphics.DrawRectangle(new Pen(Brushes.DodgerBlue, 4), _startPoint.X, _startPoint.Y, 8 * width, 8 * width);
   5:   
   6:              bool isBlack = false;
   7:              //Draw elements
   8:              for (var i = 0; i < 8; i++)
   9:              {
  10:                  for (var j = 0; j < 8; j++)
  11:                  {
  12:                      graphics.FillRectangle(isBlack ? Brushes.White : Brushes.Black, _startPoint.X + i * width, _startPoint.Y + j * width, width, width);
  13:                      isBlack = !isBlack;
  14:                  }
  15:                  isBlack = !isBlack;
  16:              }
  17:          }

Firstly, we draw a bolder around the board. Then, draw all element in board. Color of element will follow _isBlack variable. It's changing everytime, when we fill rectangle.

3. China Chess Board
This game is popular in Vietnam, I know it come from China. I think this board quite to complex. Here is code:
   1:          private void DrawChinaChessoBoard(Graphics graphics, int width)
   2:          {
   3:              //Draw background
   4:              var linearBrush = new LinearGradientBrush(new Rectangle(_startPoint.X, _startPoint.Y, 8 * width, 9 * width), Color.Turquoise,
   5:                  Color.White, LinearGradientMode.BackwardDiagonal);
   6:              graphics.FillRectangle(linearBrush, _startPoint.X, _startPoint.Y, 8 * width, 9 * width);
   7:   
   8:              //Draw bolder
   9:              graphics.DrawRectangle(new Pen(Brushes.DarkTurquoise, 4), _startPoint.X, _startPoint.Y, 8 * width, 9 * width);
  10:   
  11:              //Draw rows
  12:              for (var i = 0; i <= 9; i++)
  13:              {
  14:                  graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X, _startPoint.Y + i * width, _startPoint.X + 8 * width, _startPoint.Y + i * width);
  15:              }
  16:   
  17:              //Draw columns
  18:              for (var j = 0; j <= 8; j++)
  19:              {
  20:                  graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + j * width, _startPoint.Y, _startPoint.X + j * width, _startPoint.Y + 4 * width);
  21:                  graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + j * width, _startPoint.Y + 5 * width, _startPoint.X + j * width, _startPoint.Y + 9 * width);
  22:              }
  23:   
  24:              //Draw king local
  25:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + 3 * width, _startPoint.Y, _startPoint.X + 5 * width, _startPoint.Y + 2 * width);
  26:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + 5 * width, _startPoint.Y, _startPoint.X + 3 * width, _startPoint.Y + 2 * width);
  27:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + 3 * width, _startPoint.Y + 7 * width, _startPoint.X + 5 * width, _startPoint.Y + 9 * width);
  28:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + 5 * width, _startPoint.Y + 7 * width, _startPoint.X + 3 * width, _startPoint.Y + 9 * width);
  29:   
  30:              //Draw plus
  31:              DrawPlus(graphics, _startPoint.X + width, _startPoint.Y + 2 * width, width);
  32:              DrawPlus(graphics, _startPoint.X + 7 * width, _startPoint.Y + 2 * width, width);
  33:              DrawPlus(graphics, _startPoint.X, _startPoint.Y + 3 * width, width);
  34:              DrawPlus(graphics, _startPoint.X + 2 * width, _startPoint.Y + 3 * width, width);
  35:              DrawPlus(graphics, _startPoint.X + 4 * width, _startPoint.Y + 3 * width, width);
  36:              DrawPlus(graphics, _startPoint.X + 6 * width, _startPoint.Y + 3 * width, width);
  37:              DrawPlus(graphics, _startPoint.X + 8 * width, _startPoint.Y + 3 * width, width);
  38:   
  39:              DrawPlus(graphics, _startPoint.X + width, _startPoint.Y + 7 * width, width);
  40:              DrawPlus(graphics, _startPoint.X + 7 * width, _startPoint.Y + 7 * width, width);
  41:              DrawPlus(graphics, _startPoint.X, _startPoint.Y + 6 * width, width);
  42:              DrawPlus(graphics, _startPoint.X + 2 * width, _startPoint.Y + 6 * width, width);
  43:              DrawPlus(graphics, _startPoint.X + 4 * width, _startPoint.Y + 6 * width, width);
  44:              DrawPlus(graphics, _startPoint.X + 6 * width, _startPoint.Y + 6 * width, width);
  45:              DrawPlus(graphics, _startPoint.X + 8 * width, _startPoint.Y + 6 * width, width);
  46:          }
  47:   
  48:          private static void DrawPlus(Graphics graphics, int x, int y, int width)
  49:          {
  50:              var w = width / 4;
  51:              var h = width / 10;
  52:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), x - h, y - w, x - h, y - h);
  53:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), x - w, y - h, x - h, y - h);
  54:   
  55:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), x + h, y + w, x + h, y + h);
  56:              graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), x + w, y + h, x + h, y + h);
  57:          }

It's about many lines with many point, you see it hard to know where is start and where is end of line. But this code is easy to understand. Read it carefully, you can get experience.

4. Caro Board
Yes, I know you know it. I am interest this game, I think this board not complex to you. Here is code:
   1:          private void DrawCaroBoard(Graphics graphics, int row, int col, int width)
   2:          {
   3:              //Draw background
   4:              var linearBrush = new LinearGradientBrush(new Rectangle(_startPoint.X, _startPoint.Y, col * width, row * width), Color.Turquoise,
   5:                  Color.White, LinearGradientMode.BackwardDiagonal);
   6:              graphics.FillRectangle(linearBrush, _startPoint.X, _startPoint.Y, col * width, row * width);
   7:   
   8:              //Draw rows
   9:              for (var i = 0; i <= row; i++)
  10:              {
  11:                  graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X, _startPoint.Y + i * width, _startPoint.X + col * width, _startPoint.Y + i * width);
  12:              }
  13:   
  14:              //Draw columns
  15:              for (var j = 0; j <= col; j++)
  16:              {
  17:                  graphics.DrawLine(new Pen(Brushes.DarkTurquoise, 2), _startPoint.X + j * width, _startPoint.Y, _startPoint.X + j * width, _startPoint.Y + row * width);
  18:              }
  19:          }

It have many parameters help you easy cho change size of board.

All game board show on screen when you implement them on Form Paint event and call invalidate() function wherever on form.
   1:      private void FormView_Paint(object sender, PaintEventArgs e)
   2:          {
   3:              switch (_choiceDraw)
   4:              {
   5:                  case 2: DrawChessBoard(e.Graphics, 50); break;
   6:                  case 3: DrawChinaChessoBoard(e.Graphics, 48); break;
   7:                  case 4: DrawLudoCirclesBoard(e.Graphics, 400); break;
   8:                  case 5: DrawCaroBoard(e.Graphics, 10, 10, 40); break;
   9:                  default: DrawMandarinSquareCapturingBoard(e.Graphics, 60); break;
  10:              }
  11:          }

It's all simple drawing game board, it hard to make a big or beautiful game. But If you choose right color, right size, you will make it better.
This is source code: http://www.mediafire.com/?ghad2nn1545ndhd
Hope you enjoy it :)

1 comment: