Now find the button component in the tool box. [if toolbox isn't present click VIEW on the top and click toolbox]

Transcription

1 C# Tutorial - Create a Tic Tac Toe game with Working AI This project will be created in Visual Studio 2010 however you can use any version of Visual Studio to follow along this tutorial. To start open Visual Studio - Under the Visual C# - Create a new Windows Form Application in visual studio. Call this project tictactoegame and press ok. In the properties window change the following - Size: 650,500 Text: Tic Tac Toe - Moo Now find the button component in the tool box. [if toolbox isn't present click VIEW on the top and click toolbox]

2 Add 10 buttons to the form. Find the label in the tool box. Drag and drop the label in the windows form. Select all 9 of the buttons, look at the properties window.

3 find the font option and click on the 3 dotted button on the right. Change the font style to BOLD and Size to 14. CLICK OK Back in the properties window, insert play into the tag option and show a question mark for the Text option. This is what they look like now. Change the button 10 text to Reset. Click on the label 1 Once again click on the 3 dotted button in the properties window.

4 Change the font style to BOLD and size to 12. Click OK. Find the timer object from the tool box and drag and drop it to the form. Change the following to the timer. Name it AITIMER and change the interval from 100 to Basically we want to run this timer for 1 second only. Adding events to the game Select all 9 buttons, click on the small lightning bolt icon on the properties window, find the CLICK event, type buttonclick and press enter. This will take you to the code view, you can come back to the design view from there and do the following. Click on the Timer object

5 Click on the small lightning icon on the properties window, you see only one option for the timer which is TICK. Type playai and press enter. This will take you back to the code view, come back to the design view to do the following Click on the reset button Click on the lightning bolt icon on the properties window and find the click option, type resetgame and press enter. Let's take a look at the code window. using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace tictactoegame public partial class Form1 : Form public Form1() InitializeComponent(); private void buttonclick(object sender, EventArgs e) private void playai(object sender, EventArgs e) private void resetgame(object sender, EventArgs e) Add the following code.

6 Right under the Form1() function add the public enum Player public enum Player X, O This sort of class will hold X and O value for us. Knots and Crosses if you will. This line below will create a new instance of the player class we created earlier. We will decide who is the currently player with this line. Player currentplayer; Below is the button click function we linked with all 9 buttons earlier. private void buttonclick(object sender, EventArgs e) var button = (Button)sender; currentplayer = Player.X; button.text = currentplayer.tostring(); button.enabled = false; button.backcolor = System.Drawing.Color.LightGreen; Check(); AITIMER.Start(); var button = (Button)sender; In this line we are creating a variable called button and giving it a value (Button)sender. Since this event is linked to each button we need to find out which button was clicked. currentplayer = Player.X; Since the player can only click on the buttons, we are setting the player to have X symbol. button.text = currentplayer.tostring(); We will change the text on the button with the player X symbol by converting the content to string. button.enabled = false; disable the button once clicked. button.backcolor = System.Drawing.Color.LightGreen; change the back colour to light green. Check(); run the check function AITIMER.Start(); this is the AI timer we created earlier and we are going to start the timer when player made their move.

7 Below is the reset game event. Let's take a closer look at the code inside. private void resetgame(object sender, EventArgs e) label1.text = "??"; if (x is Button && x.tag == "play") ((Button)x).Enabled = true; ((Button)x).Text = "?"; ((Button)x).BackColor = default(color); label1.text = "??"; -- change the label text to double question mark. -- starting a for each loop, inside the brackets we set the condition for the loop as in what to check, we are creating a Control variable called X in this controls meaning in this form. This will loop through each component active in form for example buttons, labels, text boxes, picture boxes etc. if (x is Button && x.tag == "play") -- this line is checking if X is a button AND it has the tag of play. The reason we are doing this is because we have 10 buttons on the screen, 1 for reset and 9 for the game. So we don't want to effect the reset button only the play buttons, this is why we added the tag play to these buttons earlier in the tutorial. ((Button)x).Enabled = true; -- We are enabling the button. ((Button)x).Text = "?"; -- we are changing the text of the button to question mark? ((Button)x).BackColor = default(color); -- finally we are changing the back colour of the button to the default colour. private void playai(object sender, EventArgs e) if (x is Button && x.text == "?" && x.enabled) x.enabled = false; currentplayer = Player.O; x.text = currentplayer.tostring(); x.backcolor = System.Drawing.Color.LightGoldenrodYellow; AITIMER.Stop(); Check(); break; else AITIMER.Stop(); -- this line is starting the for each loop, we are starting to loop through all of the components or controls in this windows form. Loops are usually started with a condition and curly brackets and ending with a curly brackets.

8 if (x is Button && x.text == "?" && x.enabled) -- this line is checking if that x control variable we created earlier in the loop condition. In this if statement we are checking if x is a button AND it has the text? question mark and x is enabled to be clicked on then we will execute the following actions. x.enabled = false; -- first we disabling the x button currentplayer = Player.O; -- currently player is changed to O x.text = currentplayer.tostring(); -- Set the button text O by converting the current player to string. x.backcolor = System.Drawing.Color.LightGoldenrodYellow; -- change the background of the button to light golden colour. AITIMER.Stop(); -- stop the AI timer Check(); -- run the check function break; -- break the loop else -- else meaning if none of the conditions in the if statement are met we simply run the following line AITIMER.Stop(); -- stop the timer private void Check() if ( button1.text == "X" && button2.text == "X" && button3.text == "X" button4.text == "X" && button5.text == "X" && button6.text == "X" button7.text == "X" && button8.text == "X" && button9.text == "X" button1.text == "X" && button4.text == "X" && button7.text == "X" button2.text == "X" && button5.text == "X" && button8.text == "X" button3.text == "X" && button6.text == "X" && button9.text == "X" button1.text == "X" && button5.text == "X" && button9.text == "X" button3.text == "X" && button5.text == "X" && button7.text == "X" ) WON(); label1.text = "X Wins"; else if ( button1.text == "O" && button2.text == "O" && button3.text == "O" button4.text == "O" && button5.text == "O" && button6.text == "O" button7.text == "O" && button8.text == "O" && button9.text == "O" button1.text == "O" && button4.text == "O" && button7.text == "O" button2.text == "O" && button5.text == "O" && button8.text == "O" button3.text == "O" && button6.text == "O" && button9.text == "O" button1.text == "O" && button5.text == "O" && button9.text == "O" button3.text == "O" && button5.text == "O" && button7.text == "O" ) WON(); label1.text = "O Wins"; Check function is created to check whether the player or opponent won the game. We are going to use the if statement to check these conditions. We didn't change the names of the buttons so they are called button1, button2, button3, button4, button5, button6, button7, button8 and button9

9 Once any of these conditions are met in the if statement we run the won function to stop the whole game and disable all buttons. The same theory is being used for the O player. If any of these statements are true then we run the WON function and change the Label text to show who won the game. private void WON() if (x is Button && x.tag == "play") ((Button)x).Enabled = false; ((Button)x).BackColor = default(color);

10 -- we run a for each loop in this function if (x is Button && x.tag == "play") -- we check if x is a button and has the tag of PLAY ((Button)x).Enabled = false; -- then we run the loop and disable all the buttons ((Button)x).BackColor = default(color); -- we restore the buttons to the default system colour. Final Project - Future Improvements on AI - This project currently doesn't use an intelligent AI or an AI that can predict a win or lose scenario, however in the future we might create an algorithm and share it on mooict.com for you to implement into this game. Till then keep learning. Full Code For the game. using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace tictactoegame public partial class Form1 : Form Player currentplayer; public Form1() InitializeComponent(); public enum Player X, O private void buttonclick(object sender, EventArgs e) var button = (Button)sender; currentplayer = Player.X; button.text = currentplayer.tostring(); button.enabled = false; button.backcolor = System.Drawing.Color.LightGreen; Check(); AITIMER.Start(); private void playai(object sender, EventArgs e) if (x is Button && x.text == "?" && x.enabled)

11 x.enabled = false; currentplayer = Player.O; x.text = currentplayer.tostring(); x.backcolor = System.Drawing.Color.LightGoldenrodYellow; AITIMER.Stop(); Check(); break; else AITIMER.Stop(); private void resetgame(object sender, EventArgs e) label1.text = "??"; if (x is Button && x.tag == "play") ((Button)x).Enabled = true; ((Button)x).Text = "?"; ((Button)x).BackColor = default(color); private void Check() if ( button1.text == "X" && button2.text == "X" && button3.text == "X" button4.text == "X" && button5.text == "X" && button6.text == "X" button7.text == "X" && button8.text == "X" && button9.text == "X" button1.text == "X" && button4.text == "X" && button7.text == "X" button2.text == "X" && button5.text == "X" && button8.text == "X" button3.text == "X" && button6.text == "X" && button9.text == "X" button1.text == "X" && button5.text == "X" && button9.text == "X" button3.text == "X" && button5.text == "X" && button7.text == "X" ) WON(); label1.text = "X Wins"; else if ( button1.text == "O" && button2.text == "O" && button3.text == "O" button4.text == "O" && button5.text == "O" && button6.text == "O" button7.text == "O" && button8.text == "O" && button9.text == "O" button1.text == "O" && button4.text == "O" && button7.text == "O" button2.text == "O" && button5.text == "O" && button8.text == "O" button3.text == "O" && button6.text == "O" && button9.text == "O" button1.text == "O" && button5.text == "O" && button9.text == "O" button3.text == "O" && button5.text == "O" && button7.text == "O" ) WON(); label1.text = "O Wins"; private void WON() if (x is Button && x.tag == "play") ((Button)x).Enabled = false; ((Button)x).BackColor = default(color);