Develop Tic Tac Toe game using basic Windows Form and C# Dotnet codes

Hello friends, Let’s see how we can create a Tic Tac Toe puzzle game (3X3) step by step using Windows Form and C# DotNet in Visual Studio without using any complex/advance codes neither external libraries.

Download the source code of the Tic Tac Toe puzzle (3X3)

Prerequisites

• Basic c# programming knowledge
• Basic windows form application development knowledge
• Visual studio 2010+  

Step 1.

Start a new Windows Form Project in Visual Studio which will provide you the default form template.

Step 2.

Add a panel into the form (drag and drop panel into the form from the toolbox in the left side) and modify the size property as shown in the below screenshot.

Same way add a label and a button as shown in the below screenshot which can be used for showing which players turn during the play (Text of the button is character ‘X’).

Here the font’s style and size properties are modified from the default ones in order to improve the look and feel of the label and button.

Step 3.

Now let’s write code to generate blocks for Tic Tac Toe puzzle using buttons. (Do a right click on anywhere on the form and select ‘View Code’ option which will open the code behind cs class)

We will create a two dimensional array (3X3) of button, and using for loops we can create and add the buttons dynamically in to the panel created in the form.

We can see the code will adjust the locations of each buttons based on the ‘I’ and ‘j’ values inside the loops. Also the button style, font, size properties are also mentioned for better looks and feel.

Now let’s run the application and see how the form looks in the run time. (You can find the Debug button in the top menu or simply click on ‘F5’ which will run the application in Debug Mode)

 

Step 4.

Now we have the puzzle blocks ready but as we didn’t write codes to handle the button click actions nothing happens on the buttons clicks. So let’s add button click event for the buttons before adding them into the panel in our existing button generation piece of code.

Inside the button click event method, we can see there is code to take the clicked button and update its text with the text of the button we created in the form earlier to show the player turn. It makes the button looks marked on the click.

Let’s run the application

We can see all the clicked buttons are marked with ‘X’ as the Turn Button’s text is ‘X’ always.

Step 5.

Now Let’s toggle the text of the Turn button between ‘X’ and ‘O’ after marking it on each clicks. Also we’ll add code to skip this toggling if the clicked button is already marked.

Let’s run the application and see if the toggling really works

 

Step 6.

Now let’s add code to check if the user wins the game before doing the toggle. The following code shows how we can check if there are 3 continuous blocks marked with current players text (‘X’ or ‘O’) in any vertical direction. Also it shows message which player wins the game.

Let’s run the application and see the message shows when a player wins the game with vertical blocks

Step 7.

Now let’s add code to color the winner blocks.

The following code takes all the blocks/buttons (which made the player win) into a list variable from the game end check method and instead of just showing the message it calls another method which will color all the buttons in the variable and show the win message.

Let’s run the application and see if the coloring really works

 

Step 8.

With current code the game end check only works in vertical direction. We have to add additional codes to work with horizontal and diagonal directions.

Code to check in horizontal direction

Code to check in diagonal direction (from top-left to bottom-right)

Code to check in diagonal direction (from bottom-left to top-right)

 

Step 9.

Now let’s add code to check if all the blocks are marked so that we can show message that the game end as draw.

Run the application and see if the draw check works

 

Step 10.

We are completed with the Tic Tac Toe puzzle. The following screenshot shows a sample of player winning in a diagonal direction.

Download the source code of the Tic Tac Toe puzzle (3X3)

We can use the same code base with some modifications to create a 9X9 puzzle as shown below.

Visit the blog Develop Tic Tac Toe game bigger version (9x9) using C# Dotnet to see how this 3x3 puzzle can be converted into 9x9 with minor modifications in the same code base.

Blog Link :-
https://playwithcsharpdotnet.blogspot.com/2020/03/develop-tic-tac-toe-bigger-version-using-csharp-dotnet.html

Enjoy Coding..!!!