Create Tic Tac Toe Game

Anoop Kr Sharma

Rate me:

2.65/5 (6 votes)

3 Sep 2013CPOL3 min read

80.6K

4.9K

Create Tic Tac Toe Game - Step by Step

Hello Guys, I am going to show you How to Create Tic Tac Toe for 2-Players.

Before Going to start, a short description on What is Tic Tac Toe?

Tic-tac-toe (or Noughts and crosses, Xs and Os) is a paper and pencil for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three respective marks in a horizontal, vertical, or diagonal row wins the game.

Let's Start:

Create a New project and select windows application.Give it name and then press enter.(All of us know this step).
After that you see a blank form like that:

Now add 9 buttons on your form using tools.

Select button then delete the text from properties(i.e. button1,button2).Actually we want no text on buttons.

Now, Put a label on your form set backcolor according to your wish(here i choose skyblue color from properties), set textalign to middlecenter and set text to "Turn".Actually We are creating a box for showing the player's Turn.

Add Another Label below above label.Remove text from it,leave it blank.Give it name="displayturn".Now our Application looks something like that.

Now doing the same above method,I have created a Scorecard for player1 and player2.I give name playerscore1 and playerscore2 for the labels as shown in figure.

I am creating this game for 2 person so, I supposed here Player1 symbol="X" and Player2 Symbol="O".Now I want when player1 click it gives "X" symbol on button.After his turn when Player2 click on button then it show "O" on another button. Double click on button1 and add the code given below.

void Button1Click(object sender, EventArgs e)
		{
			if(click1==0) 
			{
				if(turn%2!=0)
				{
					button1.Text="X";
				}
				else
				{
					button1.Text="O";
				}
				turn++;
				click1++;
			}
			else
			{
				button1.Text=button1.Text;
			}
			display();
			checkit();
			
		}

I have created int turn=1(help us in finding turn),int click1=0(for checking if button is pressed more than one times).

When Player click on button, it checks if condition i.e. click1=0 is true then it checks another condition for finding player turn.Starting value of turn is equal to1, so it checks (1%2!=0) that is True.So, It display "X" on the Button and increase 1 in int turn(turn++) and click1(click++).If condition become False it display "O" on button.If Player again presses the key then condition become false(because click1 become equal to 1) and text on button remain same.

After that I am Calling display() and checkit() method.

display() use for displaying the Player's turn and checkit() checks for winner of game.

Same coding is done for the other buttons instead of button1 write button2 and for click1 write click2;

display() method:

public void display()
		{
			if(turn%2!=0)
			{
				displayturn.Text="Player 1";
			}
			else
			{
				displayturn.Text="Player 2";
			}
		}

It is use for showing the Turn of Player.For example:If turn=2 it shows "Player2" turn in our application.

checkit() method:

 public void checkit()
{
		if(button1.Text!="" && button2.Text!="" && button3.Text!="")
		{
			if(button1.Text==button2.Text && button1.Text==button3.Text)
			{
				button1.BackColor=Color.Green;
				button1.ForeColor=Color.White;
				button2.BackColor=Color.Green;
				button2.ForeColor=Color.White;
				button3.BackColor=Color.Green;
				button3.ForeColor=Color.White;
				if(button1.Text=="X")
				{
					MessageBox.Show("Player 1 Wins!");
					player1++;
					player1score.Text=player1.ToString();
				}
				else
				{
					MessageBox.Show("Player 2 Wins!");
					player2++;
					player2score.Text=player2.ToString();
				}
`				cleargame();
			
			}
		}
}

Firstly checkit() ckecks that button must contain text.After that if It found that Three Buttons have same text than changes the Back and ForeColor. After That it checks the Button Text.If text =="X" then give message that "Player1 Wins!" or If text=="O" then it gives message that ""player 2 Wins!.add +1 to player1 or player2(these are int variables) and display them in labels(player1score,player2score).

cleargame() method clears the data(i.e. BackColor,ForeColor,Buttons text,displayturn,variables value back to starting value)but does not clear the player1score and player2score.

Create two buttons one for reset and other is Play Again(Used in case of Tie Up).In Play Again Button(use if Tie Up Occurs) I pass the cleargame() method.