Click here to Skip to main content
Click here to Skip to main content

Create Tic Tac Toe Game

By , 3 Sep 2013
Rate this:
Please Sign up or sign in to vote.

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 crossesXs 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: 

image1

Now add 9 buttons on your form using tools.

image2

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.

image3

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. 

Game Preview:

imagegif 

I am attaching the Source Files for Downloading. Hope You Like it. That's All

Thanks 

My Other Tips and Tricks: 

HTML5 Download Attribute  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Anoop Kr Sharma
Student
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 1 PinmemberJoe Sonderegger10-Sep-13 2:33 
GeneralMy vote of 2 PinmemberAbion479-Sep-13 7:58 
GeneralRe: My vote of 2 PinmemberKevin Bewley9-Oct-13 2:15 
GeneralMy vote of 1 PinmemberAamer Alduais3-Sep-13 23:08 
GeneralRe: My vote of 1 Pinmemberjhog9-Sep-13 6:45 
QuestionAn alternative suggestion to avoid code duplication PinmemberGeorge Swan3-Sep-13 22:21 
GeneralRe: An alternative suggestion to avoid code duplication PinprofessionalAnoop Kr Sharma4-Sep-13 7:18 
GeneralMy vote of 5 [modified] PinmemberNitij Kumar3-Sep-13 21:38 
GeneralRe: My vote of 5 [modified] PinprofessionalAnoop Kr Sharma4-Sep-13 7:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140421.2 | Last Updated 4 Sep 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid