make tic tac toe in c using graphic

hello friends!!!
after attending workshop in KU, finally i have learned
how to use graphic in c....
now here is a program
how to make tic tac toe game in c using graphic.
some months ago i posted how to make tic tac toe in c,
but in this i did not use any graphic.
now here is game using graphic.....  
 
Level - Intermediate
Here you will learn how to create a game called Tic Tac Toe through C . Tic Tac Toe is a very old game, nobody knows its origin but its so simple thier is even a probability that early man had its own version of the game.All you have to do is to get your three symbol in straight line. Tic Tac Toe game using C is relatively easy to program and beginners can give it a shot if they undestand carry on otherwise read the basic tutorials first and then comeback and learn how to create there very own tic tac toe game using C.

Graphic Library Used - Turbo C/C++ Bgi
Operating System Used - Windows XP Professional
Contents -
1. Requirements
2. Getting Started
3. Coding Main
4. Intializing Graphics
5. Game Data
6. Board Intilization
7. Mapping Board
8. Game Engine
9. Taking Input
10. Computer Move using AI
11. Checking Winner
12. Final Words
13. What Next?
1. Requirements
From Programming point of view i am assuming you have some knowledge of C and we will build this program from scratch for better understanding . If you absolute beginner check this out if you dont understand go through basic tutorials first.
But before you start you need some tools. You must install Turbo C++ 3.0 IDE and install it in folder C:\TC (Please Choose same directory name and drive if you are beginner). Thats all now you are all done to start your games programming fantasies.

2. Getting Started
Go to C:\TC\Bin there you will find a executable file called TC execute it and IDE will load itself.
Now go to File Menu and choose New.
Now Press F2 to save the file. Give it name tictacto.c (only 8 character filename is allowed).
Now you are all set to rock. The screen should be something like this -
 
3. Coding Main
First Thing a program should do is to include header files and code main only header we will be needing is graphics.h and conio.h. Including unnecessary header files increase the size of the code and compile time. Next we create an parameterless int returning main with no code at present. Your Code should look like this -
#include 
#include 


int main ()
{
            
return 0;
}
4. Intializing Graphics 
Now we intialise graphics in main, stop for a key press and then close the graphics. When we stop you should se a blank page and not any error. If you face an error make sure your installation path is correct. All our game activity occurs in this opening and closing of graphics. It will generally give you a 640*480 mode with VGA graphics. These graphics are good enough to code any descent looking games. If you get different settings try to set them as above. Your code should be now -
 

#include 
#include 

int main ()
{
int gdriver = DETECT, gmode;
initgraph(&gdriver, &gmode, "c:\\tc\\bgi"); // Intializes Graphics
getch (); // Key Press
closegraph (); // Close Graphics
return 0;
} 
5. Game Data 
Now we create data your game needs . In this game we need following data -
We need a 2D 3 X 3 Matrix To Store the board. Each member of the board contains one the three values -
'O' if there is a zero at that place.
'X' if there is a cross at that place
'*' if there is no element at that place ie. placed has not yet been filled.
Now accomodating storage our code becomes -

 #include 
#include 

char board [3] [3]; // Remeber Indexing Starts at Zero.


int main ()
{
 int gdriver = DETECT, gmode;
 initgraph(&gdriver, &gmode, "c:\\tc\\bgi"); // Intializes Graphics
 getch (); // Key Press
 closegraph (); // Close Graphics
 return 0;
}
6. Board Initialization 
Now we create a function which intializes the entire board to '*'.
This indicates that no block is filled.
We use a function called initiateboard called in main to do this job for us.
#include 
#include 
char board [3] [3]; // Remeber Indexing Starts at zero
void initiateboard ()
{
 int i,j;
 for (i = 0; i <= 2 ; i++)
  {
   for (j = 0; j <= 2; j++)
     {
       board [i] [j] = '*';
     }
  }
}
int main ()
{
  int gdriver = DETECT, gmode;
  initgraph (&gdriver, &gmode, "c:\\tc\\bgi");
  initiateboard ();
  getch ();
  closegraph ();
  return 0;
}
 
7. Mapping Board
This is a very important function in our program. Its job is to create a graphical image of the game form the data array board.
It first clears all the graphics on the present screen.
Then its initate the graphics and redraw the entire screen.
First the function draws the border lines. Then it draws a cross, a circle or nothing depending upon the values in the array.
It uses function drawcircle and drawcross to draw circles and cross respectively. These function take input value 0 to 9 depending upon the array positon to decide what to draw.
This function is first called in intialisation but will be called several times
Here some screenshot of the game developed till now -
C Tic Tac Toe

We call this function mapboard and our code now becomes -
#include 
#include 
char board [2] [2]; // Remeber Indexing Starts at zero
void drawcircle (int position) // Draws a circle on basis of Input use mathematics reduce complexity
{
  int centrex;
  int centrey;
  centrex = 245 + (50*(position%3)) + 25;
  centrey = 165 + (50*(position/3)) + 25;
  fillellipse (centrex,centrey, 10,10);
}
void drawcross (int position)
{
int centrex;
 int centrey;
 centrex = 245 + (50*(position%3)) + 25;
 centrey = 165 + (50*(position/3)) + 25;
 line (centrex-5,centrey+5,centrex+5,centrey-5);
 line (centrex+5,centrey+5,centrex-5,centrey-5);

}
void mapboard ()
{
 int gdriver = DETECT, gmode;
 int i,j;
 closegraph ();
 initgraph (&gdriver, &gmode, "c:\\tc\\bgi");
 // Draw 4 Lines to Form Board
 line (295,165,295,315);
 line (345,165,345,315);
 line (245,215,395,215);
 line (245,265,395,265);
 for (i = 0; i <= 2; i++)
    {
      for (j = 0; j <= 2; j++)
            {
              if ( board [i] [j]  == 'X') drawcross (3*i + j);
              if ( board [i] [j]  == 'O') drawcircle (3*i + j);
            }
    }
outtextxy (40,472,"Remove This Line by Learn Coding It yourself at www.cencyclopedia.com");

}
void initiateboard ()
{
 int i,j;
 for (i = 0; i <= 2 ; i++)
   {
     for (j = 0; j <= 2; j++)
       {
         board [i] [j] = '*';
       }
   }
 mapboard ();
}
int main ()
{
 int gdriver = DETECT, gmode;
 initgraph (&gdriver, &gmode, "c:\\tc\\bgi");
 initiateboard ();
 getch ();
 closegraph ();
 return 0;
}
8. Game Engine -
Now we design a game engine for this game. This Game engine will contain an which end after 5 Users moves assuming user moves first. Now our game engine must do the following jobs in one sequence.
1. Take user input .
2. Place user move on board.
3. Calculate computer move.
4. Place computer move on board.
5. Refresh Screen for next round.
6. Check wether there is a winner.
we use fuction play to be name of our game engine and game exits when the function exits. This function is called once in main.
Now we have designed mapboard function in such a way that it can be used to refresh screen and can do the 5th job. We discuss the rest next.
9. Taking Input
We create a function name input which does the first two jobs of our game engine. It takes user input and if valid place that on to the data.
User is asked to input X coordinate (1 - 3) and Y coordinate (1 - 3).
If in our data board [X-1] and [Y-1] position is '*' then we place a 'X' There otherwise reprompt for input.
Here is a screenshot of the Game Developed Till Now -



Tic Tac Toe C PRogramming

                
 Code Now Becomes -

#include 
#include 

char board [3] [3]; // Remeber Indexing Starts at zero

void drawcircle (int position) // Draws a circle on basis of Input use mathematics reduce complexity

{
 int centrex;
 int centrey;
 centrex = 245 + (50*(position%3)) + 25;
 centrey = 165 + (50*(position/3)) + 25;
 fillellipse (centrex,centrey, 10,10);
}

void drawcross (int position)

{
 int centrex;
 int centrey;
 centrex = 245 + (50*(position%3)) + 25;
 centrey = 165 + (50*(position/3)) + 25;
 line (centrex-5,centrey+5,centrex+5,centrey-5);
 line (centrex+5,centrey+5,centrex-5,centrey-5);
}

void mapboard ()


{
 int gdriver = DETECT, gmode;
 int i,j;
 closegraph ();
 initgraph (&gdriver, &gmode, "c:\\tc\\bgi");

 // Draw 4 Lines to Form Board
 line (295,165,295,315);
 line (345,165,345,315);
 line (245,215,395,215);
 line (245,265,395,265);
 for (i = 0; i <= 2; i++)
  {
   for (j = 0; j <= 2; j++)
     {
      if ( board [i] [j]  == 'X') drawcross (3*i + j);
      if ( board [i] [j]  == 'O') drawcircle (3*i + j);
     }
   }
 outtextxy (40,472,"Remove This Line by Learn Coding It yourself at www.cencyclopedia.com");
}

void initiateboard ()


{
   int i,j;
   for (i = 0; i < 3 ; i++)
     {
       for (j = 0; j < 3; j++)
           {
              board [i] [j] = '*';
              putchar (board [i] [j]);
            }
        }
    mapboard ();
}

void input ()

{
  int x,y;
  printf ("\nEnter X Coordinate - ");
  scanf ("%d",&x);
  printf ("\nEnter Y Coordinate - ");
  scanf ("%d", &y);
  if (board [x-1] [y-1] == '*')
     {
       board [x-1] [y-1] = 'X';
     }
  else
     {
       mapboard ();
       printf ("\nWrong Coordinates");
       input ();
     }
}

void play () // Ladies and Gentleman I give you our game engine.
         
{
  int i;
  for (i = 0; i<5;i++)
    {
      input ();
      mapboard ();
    }
}

int main ()

{
  int gdriver = DETECT, gmode;
  initgraph (&gdriver, &gmode, "c:\\tc\\bgi");
  initiateboard ();
  play ();
  getch ();
  closegraph ();
  return 0;
}
10. Computer Move Using AI 
Now after user move we need to make the computer move. Since this first version of the Article we will be using simple AI which maybe stupid but is AI nevertheless.
Our AI starts from the first box and where ever it finds first empty space it puts a zero. Is that complicated, well its not because its AI at its badest. May be we can improve this in next version.
We call this function computer.
Now Code Becomes -
#include 
#include 
          
char board [3] [3]; // Remeber Indexing Starts at zero
void drawcircle (int position) // Draws a circle on basis of Input use mathematics reduce complexity
{
 int centrex;
 int centrey;
 centrex = 245 + (50*(position%3)) + 25;
 centrey = 165 + (50*(position/3)) + 25;
 fillellipse (centrex,centrey, 10,10);
}
void drawcross (int position)
{
  int centrex;
  int centrey;
  centrex = 245 + (50*(position%3)) + 25;
  centrey = 165 + (50*(position/3)) + 25;
  line (centrex-5,centrey+5,centrex+5,centrey-5);
  line (centrex+5,centrey+5,centrex-5,centrey-5);

}
void mapboard ()
{
  int gdriver = DETECT, gmode;
  int i,j;
  closegraph ();
  initgraph (&gdriver, &gmode, "c:\\tc\\bgi");

  // Draw 4 Lines to Form Board
  line (295,165,295,315);
  line (345,165,345,315);
  line (245,215,395,215);
  line (245,265,395,265);
  for (i = 0; i <= 2; i++)
     {
       for (j = 0; j <= 2; j++)
         {
           if ( board [i] [j]  == 'X') drawcross (3*i + j);
           if ( board [i] [j]  == 'O') drawcircle (3*i + j);
         }
     }
outtextxy (40,472,"Remove This Line by Learn Coding It yourself at www.cencyclopedia.com");
}
void initiateboard ()


{

  int i,j;
  for (i = 0; i < 3 ; i++)
    {
      for (j = 0; j < 3; j++)
        {
          board [i] [j] = '*';
           putchar (board [i] [j]);
        }
    }
mapboard ();
}
void input ()
{
  int x,y;
  printf ("\nEnter X Coordinate - ");
  scanf ("%d",&x);
  printf ("\nEnter Y Coordinate - ");
  scanf ("%d", &y);
  if (board [x-1] [y-1] == '*')
    {
      board [x-1] [y-1] = 'X';
    }
  else
    {
      mapboard ();
      printf ("\nWrong Coordinates");
      input ();
    }
}
void computer ()


{
  int i,j;
  for (i = 0; i < 3; i++)
  for (j = 0; j < 3; j++)
    {
      if (board [i] [j] == '*')
         {
            board [i] [j] = 'O';
            return;
         }
    }
}
void play () // Ladies and Gentleman I give you our game engine.


{
  int i;
  for (i = 0; i<5;i++)
    {
       input ();
       computer ();
       mapboard ();
    }
printf ("\n\nGAME DRAW");
}
int main ()
{

 int gdriver = DETECT, gmode;
 initgraph (&gdriver, &gmode, "c:\\tc\\bgi");
 initiateboard ();
 play ();
 getch ();
 closegraph ();
 return 0;
}
11. Checking Winner 
Now last thing our gameengine must do is to see wether we have a winner or not.
This function use a flag variable key (arbitary name) which is initialise to '*'
Then our function checks all possible combination of winning and if it finds a character other than '*' in series of 3 it sets key value to it.
Then we calculate wether player wins, computer wins or nobody wins and game is still on.
Here is a final screenshot -
Tic Tac Toe In C

Now here is the final code of this version -

#include
#include
          

char board [3] [3]; // Remeber Indexing Starts at zero

void drawcircle (int position) // Draws a circle on basis of Input use mathematics reduce complexity
{
  int centrex;
  int centrey;
  centrex = 245 + (50*(position%3)) + 25;
  centrey = 165 + (50*(position/3)) + 25;
  fillellipse (centrex,centrey, 10,10);
}

void drawcross (int position)


{  
  int centrex;
  int centrey;
  centrex = 245 + (50*(position%3)) + 25;
  centrey = 165 + (50*(position/3)) + 25;
  line (centrex-5,centrey+5,centrex+5,centrey-5);
  line (centrex+5,centrey+5,centrex-5,centrey-5);
}

void mapboard ()


{
 int gdriver = DETECT, gmode;
 int i,j;
 closegraph ();
 initgraph (&gdriver, &gmode, "c:\\tc\\bgi");
 
 // Draw 4 Lines to Form Board
 line (295,165,295,315);
 line (345,165,345,315);
 line (245,215,395,215);
 line (245,265,395,265);
 for (i = 0; i <= 2; i++)
    {
      for (j = 0; j <= 2; j++)
         {
           if ( board [i] [j]  == 'X') drawcross (3*i + j);
           if ( board [i] [j]  == 'O') drawcircle (3*i + j);
         }
    }
outtextxy (40,472,"Remove This Line by Learn Coding It yourself at www.cencyclopedia.com");
}

void initiateboard ()


{
  int i,j;
  for (i = 0; i < 3 ; i++)
    {
      for (j = 0; j < 3; j++)
        {
           board [i] [j] = '*';
           putchar (board [i] [j]);
        }
    }
mapboard ();
}

void input ()

{
  int x,y;
  printf ("\nEnter X Coordinate - ");
  scanf ("%d",&x);
  printf ("\nEnter Y Coordinate - ");
  scanf ("%d", &y);
  if (board [x-1] [y-1] == '*')
   {
     board [x-1] [y-1] = 'X';
   }
  else
   {
     mapboard ();
     printf ("\nWrong Coordinates");
     input ();
   }
}

void computer ()


{
  int i,j;
  for (i = 0; i < 3; i++)
    for (j = 0; j < 3; j++)
      {
        if (board [i] [j] == '*')
          {
            board [i] [j] = 'O';
            return;
          }
      }
}

void check ()

{
  int i;
  char key = '*';
   
  // Check Rows
  for (i=0; i<3;i++)
         if (board [i][0] == board [i] [1] && board [i][0] == board [i] [2] && board [i] [0] != '*') key = board [i] [0];
  
 // Check Columns
 for (i=0; i<3;i++)
        if (board [0][i] == board [1] [i] && board [0][i] == board [2] [i] && board [0] [i] != '*') key = board [0] [i];
        
 // Check Diagonals
 if (board [0][0] == board [1] [1] && board [1][1] == board [2] [2] && board [1] [1] != '*') key = board [1] [1];
 if (board [0][2] == board [1] [1] && board [1][1] == board [2] [0] && board [1] [1] != '*') key = board [1] [1];

//Declare Winner if any

if (key == 'X')
       {
         printf ("You Win");
         getch ();
         exit ();
       }

if (key == 'O')
       {
         printf ("Computer Win");
         getch ();
         exit ();
      }
}

void play () // Ladies and Gentleman I give you our game engine.


{
  int i;
  for (i = 0; i<5;i++)
    {
      input ();
      computer ();
      mapboard ();
      check ();
    }
printf ("\n\nGAME DRAW");
}

int main ()

{
  int gdriver = DETECT, gmode;
  initgraph (&gdriver, &gmode, "c:\\tc\\bgi");
  initiateboard ();
  play ();
  getch ();
  closegraph ();
  return 0;
}

 

No comments:

Post a Comment

Any Query, Suggestion Please Comment Here