Tic Tac Toe

<< Back to the SDG Toolkit page

Below is the full code required to make a minimal Tic Tac Toe game built out of SDG Widgets.

In this tutorial you will learn how to create and SDG user control (a widget), and how to use it within an application.

Introduction

The Tic Tac Toe game will be assembled by creating an SDG User Control similar to that created in the last tutorial, and using these within a window.

Tutorial

1) Create the empty project. As in the other tutorials, create a C# project. Call it TicTacToe

2) Make the form SDG-aware. These steps repeat those taught in the previous tutorial.

• Add a reference to the SDGToolkit. In the Solution Explorer on the left of the screen, right click in the references folder and choose Add Reference from the context menu. Click on the "Browse" button and find the location where you saved the SDG Toolkit. Select the dll, and click "Ok" to add the Sdg Toolkit Reference.
• Drop an sdgManager onto the form. Set its properties
  • RelativeTo = Form1
  • EmulateSystmeMouseMode = Park

3) Create a Standard User Control.

• First, create a standard User Control by raising the context menu on your project and then selecting the Add User Control... option as shown in the figure below.

• From the dialog box that appears, select the User Control icon and call it TicTacToeCtl.cs (as in the figure). Select Ok, and you will now see an empty user control in Visual Studio

4) Change the User Control into an SDG User Control. To do this, we change the class to inherit from Sdgt.SdgUserControl instead of System.Windows.Forms.UserControl. This will add Sdg functionality to it.

• Right click on the empty user control and select View Code.
• Replace the line

with

• Finally, close the user control designer, compile your code and reopen the user control designer. This is necessary if you want to see the SDG properties in Visual Studio.s

5. Add a label to this control. This will display the X or O. This is standard C#.

• Go back to the design view of the control
• Click on the toolbox, select the label tool and click and drag a label on the form.
• Change the following properties of the label, after which it should look like what is shown below
  • TextAlign = MiddleCenter.
  • Dock = Fill
  • Font Size = 36
  • Text = - (or make it empty, but the - makes it easier to see for now).
  • BorderStyle = FixedSingle
  • BackColor = Web -> Transparent.

6. Make the control respond to different user's actions.

• Go to the properties -> Events section of your TicTacToeCtl.
• You should see the new SDGevents diagramed below.
• Double Click on the SdgMouseDown selection to add an SdgMouseDown event handler. This will open up that handler in the code view.

• Add the following code to that event handler

7. Use this control to create the Tic Tac Toe game

• Compile. This will make your user control accessible to your main Forms window.
• Click the Design view of Form1.
• As in the previous tutorial, add an SdgManager and set it's RelativeTo property to "Form1"
• In the Toolbox, you will see a section titled 'My User Controls'. Open it, and you should see the TicTacToeCtl within it.
• Drag nine of these controls onto Form1 so it looks like what you see below.
• Change the cursors of the mice to indicate if it is an 'X' (mouse 0), an '0' (mouse 1) or a 'viewer' (other mice) by putting this code in the Form1 () method after InitializeComponent ()

8. Compile, and play!

9. Of course, there is no game logic in this version. You can add that through conventional programming. For example, it would be useful to be able to reset each tic tac control back to its original state (i.e. Transparent color, with a '-'). You can do this simply by adding a public method called, say, Reset, to the control. When you decide that its time to restart the game, you can call the reset method for each of the controls. The challenge will be figuring out when to invoke this method. For example, if you drop a non-SDG widget onto your form, it won't work properly as it won't recognize the SDG Mice. What you can try to do is:

• change the behaviour of the control so that it resets itself if clicked a second time (i.e., it acts as a toggle), or
• create another SDG User Control that acts as an SDG button (similar to the user control you just created.)

10. You can now use this control in any other project simply by including the TicTacToCtl.cs file within it.