loading

Hi. This tutorial will show you how to make a Tic Tac Toe game in Visual Basic. This a very simple and fun game to make and can be done in a short period of time.

You will need the following materials:
- Computer
- Microsoft Visual Basic
- Basic knowledge of forms, items in toolbox and true/false + If statment coding.


Legend:
- Bold Text - Code
- Italic Text - Explanation


 

Step 1: Basic Setup

1. Create New Form. Name it “StartForm.”

2. Insert “Label” (Near the top). This is for the title.

3. Name the Label “TicTacToeLabel” under (name) for easy coding.

4. Also call it “Tic Tac Toe” under (text) for the actual title.

5. Insert 1 Button, and re-write the text as “New Game”

6. Make Name “NewGameButton”

7. Now double click the “New Game” button to bring up the code:

Private Sub NewGameButton_Click(sender As System.Object, e As System.EventArgs) Handles NewGameButton.Click

End Sub


‘This is the code for NewGameButton that shows up when you double click it in Form.’

8. Write following Code In the middle of Private Sub and End Sub:

NewGameForm.Show()
Me.Hide()


‘Opens New Form and Hides Old one’

9. Create a New Form called “NewGameForm”

10. Insert “Label” (Near the top). This is for the title.

11. Name the Label “TicTacToeLabel” under (name) for easy coding.

12. Also call it “Tic Tac Toe” under (text) for the actual title.

13. Insert Button and name it “TwoPlayerButton”. (Make text “2 Player”)

14. Now double click the “New Game” button to bring up the code:

Private Sub TwoPlayerButton_Click(sender As System.Object, e As System.EventArgs) Handles TwoPlayerButton.Click

End Sub


‘This is the code for TwoPlayerButton that shows up when you double click it in Form.’

15. Write code in the middle of Private Sub and End Sub:

TwoPlayerForm.Show()
Me.Hide()


‘Opens New Form and Hides Old one’

Step 2: Setting Up the Game Board

16. Create New Form called “TwoPlayerForm”

17. Create one rectangular box (RectangleShape)

18. Make the size of the squares even.( E.g. 100, 100)

19. Copy and paste the square 8 times, so there are 9 boxes.

[Arrange in order for easy coding]

20. Arrange them into a 3x3 Grid.

21. Make 1 label on both sides of the grid (left & right). Make the text “Red” and “Blue.

22. Make 1 Text box on each side an name it “BlueWinCounter” and “RedWinCounter”. Keep the text blank.

23. Make 1 Label at the top of the Form. Name it “PlayerTurnLabel” and keep Text blank.

24. Insert an OvalShape. Make the Border Colour “DodgerBlue” or any blue that you want (Circle is blue)

25. Make the size 75, 75 and the border size 9.

26. Insert 1 Straight line shape, and colour it red.

27. Make the border size 9.

28. Copy and paste it, so you have another line the same size.

29. Arrange them to make an X shape.

30. Copy and paste the circle until there are 9 of them (One for each Box)

31. Arrange in order. (Each shape has a name: OvalShape1, OvalShape2.)

[Arrange in order for easy coding]

32. Repeat step 27 & 28 for the X shape.
[Remember to select both lines, as there are separate shapes.]

Step 3: When the Game Starts

33. Now the coding for deciding the turn:

Private Sub Open_TwoPlayerForm(sender As System.Object, e As System.EventArgs) Handles Me.Activated

End Sub


‘This is the code for what happens when the TwoPlayerForm is opened.’


34. Insert following code in between Private Sub and End Sub:

Dim Turn As New Random
Dim TurnResult As Integer = Turn.Next(1, 3)

If TurnResult = 1 Then
PlayerTurnLabel.Text = “Red Turn”
End If

If TurnResult = 2 Then
PlayerTurnLabel.Text = “Blue Turn”
End If

‘Randomly chooses the player who goes first.’

OvalShape1.Visible = False
OvalShape2.Visible = False
OvalShape3.Visible = False
OvalShape4.Visible = False
OvalShape5.Visible = False
OvalShape6.Visible = False
OvalShape7.Visible = False
OvalShape8.Visible = False
OvalShape9.Visible = False
LineShape1.Visible = False
LineShape2.Visible = False
LineShape3.Visible = False
LineShape4.Visible = False
LineShape5.Visible = False
LineShape6.Visible = False
LineShape7.Visible = False
LineShape8.Visible = False
LineShape9.Visible = False
LineShape10.Visible = False
LineShape11.Visible = False
LineShape12.Visible = False
LineShape13.Visible = False
LineShape14.Visible = False
LineShape15.Visible = False
LineShape16.Visible = False
LineShape17.Visible = False
LineShape18.Visible = False

‘Makes ALL circles and crosses Invisible.’

Step 4: The Boxes

35. Double click all boxes to create a Private Sub for each.

36. Insert following code in-between Private Sub and End Sub for each box:

‘NOTE- Make sure the Shape numbers Correspond with the box it is in.’

If PlayerTurnLabel.Text = “Red Turn” Then
LineShape1.Visible = True
LineShape2.Visible = True
ElseIf PlayerTurnLabel1.Text = “Blue Turn” Then
OvalShape1.Visible = True
End If


‘If it is Red Turn, it will make a cross appear when you click on a box. If it is Blue Turn, a circle.’

If PlayerTurnLabel.Text = “Red Turn” Then
PlayerTurnLabel.Text = “Blue Turn”
ElseIf PlayerTurnLabel.Text = “Blue Turn”
PlayerTurnLabel.Text = “Red Turn”
End If

‘This will make the turns change over when clicking a box. If Red, it will become Blue and Vice-Versa’

If LineShape1.Visible = True Then
RectangleShape1.Enabled = False
ElseIf OvalShpe1.Visible = True Then
RectangleShape1.Enabled = False
End If


‘This disables the box after it has been clicked.’


37. Copy and paste the above code into the coding for each of the boxes, just MAKE SURE TO CHANGE THE SHAPE NUMBERS TO MATCH!

Step 5: The Win Counter

38. Now we want to program the wins, so we will name the Strings “BlueWin” and “RedWin” under a new Private Sub.

Private Sub RoundWin_Show(sender As System.Object, e As System.EventArgs) Handles Me.MouseMove

End Sub


‘This is the code that will happen when the mouse is moved.’



39. Insert the following code in between the Private Sub and End Sub

Dim BlueWin As String = Str$(Val(BlueWinCounter.Text) + 1)
Dim RedWin As String = Str$(Val(RedWinCounter.Text) + 1)


‘This is the code that makes BlueWin and RedWin a String. If the Event happens it will add +1 score to the Player.’


40. The Following code is the wins.

If OvalShape1.Visible = True And OvalShape2.Visible = True And OvalShape3.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If OvalShape4.Visible = True And OvalShape5.Visible = True And OvalShape6.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If OvalShape7.Visible = True And OvalShape8.Visible = True And OvalShape9.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If OvalShape1.Visible = True And OvalShape4.Visible = True And OvalShape7.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If OvalShape2.Visible = True And OvalShape5.Visible = True And OvalShape8.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If OvalShape3.Visible = True And OvalShape6.Visible = True And OvalShape9.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If OvalShape1.Visible = True And OvalShape5.Visible = True And OvalShape9.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If OvalShape3.Visible = True And OvalShape5.Visible = True And OvalShape7.Visible = True Then
            BlueWinCounter.Text = BlueWin
        End If

        If LineShape1.Visible And LineShape3.Visible And LineShape5.Visible = True Then
            RedWinCounter.Text = RedWin
        End If

        If LineShape7.Visible And LineShape9.Visible And LineShape11.Visible = True Then
            RedWinCounter.Text = RedWin
        End If

        If LineShape13.Visible And LineShape15.Visible And LineShape17.Visible = True Then
            RedWinCounter.Text = RedWin
        End If

        If LineShape1.Visible And LineShape7.Visible And LineShape13.Visible = True Then
            RedWinCounter.Text = RedWin
        End If

        If LineShape3.Visible And LineShape9.Visible And LineShape15.Visible = True Then
            RedWinCounter.Text = RedWin
        End If

        If LineShape5.Visible And LineShape11.Visible And LineShape17.Visible = True Then
            RedWinCounter.Text = RedWin
        End If

        If LineShape1.Visible And LineShape9.Visible And LineShape17.Visible = True Then
            RedWinCounter.Text = RedWin
        End If

        If LineShape5.Visible And LineShape9.Visible And LineShape13.Visible = True Then
            RedWinCounter.Text = RedWin
        End If


        'Adds 1 to the Win counter if there is a 3 in a row'


41. Insert the following code underneath the previous code entered:

If OvalShape1.Visible = True And OvalShape2.Visible = True And OvalShape3.Visible = True Or
            OvalShape4.Visible = True And OvalShape5.Visible = True And OvalShape6.Visible = True Or
            OvalShape7.Visible = True And OvalShape8.Visible = True And OvalShape9.Visible = True Or
            OvalShape1.Visible = True And OvalShape4.Visible = True And OvalShape7.Visible = True Or
            OvalShape2.Visible = True And OvalShape5.Visible = True And OvalShape8.Visible = True Or
            OvalShape3.Visible = True And OvalShape6.Visible = True And OvalShape9.Visible = True Or
            OvalShape1.Visible = True And OvalShape5.Visible = True And OvalShape9.Visible = True Or
            OvalShape3.Visible = True And OvalShape5.Visible = True And OvalShape7.Visible = True Or
            LineShape1.Visible = True And LineShape3.Visible = True And OvalShape5.Visible = True Or
            LineShape7.Visible = True And LineShape9.Visible = True And LineShape11.Visible = True Or
            LineShape13.Visible = True And LineShape15.Visible = True And LineShape17.Visible = True Or
            LineShape1.Visible = True And LineShape7.Visible = True And LineShape13.Visible = True Or
            LineShape3.Visible = True And LineShape9.Visible = True And LineShape15.Visible = True Or
            LineShape5.Visible = True And LineShape11.Visible = True And LineShape17.Visible = True Or
            LineShape1.Visible = True And LineShape9.Visible = True And LineShape17.Visible = True Or
            LineShape5.Visible = True And LineShape9.Visible = True And LineShape13.Visible = True Or
            RectangleShape1.Enabled = False And RectangleShape2.Enabled = False And RectangleShape3.Enabled = False And RectangleShape4.Enabled = False And RectangleShape5.Enabled = False And RectangleShape6.Enabled = False And RectangleShape7.Enabled = False And RectangleShape8.Enabled = False And RectangleShape9.Enabled = False Then
'These are all the possibilities of a win'
            OvalShape1.Visible = False
            OvalShape2.Visible = False
            OvalShape3.Visible = False
            OvalShape4.Visible = False
            OvalShape5.Visible = False
            OvalShape6.Visible = False
            OvalShape7.Visible = False
            OvalShape8.Visible = False
            OvalShape9.Visible = False
            LineShape1.Visible = False
            LineShape2.Visible = False
            LineShape3.Visible = False
            LineShape4.Visible = False
            LineShape5.Visible = False
            LineShape6.Visible = False
            LineShape7.Visible = False
            LineShape8.Visible = False
            LineShape9.Visible = False
            LineShape10.Visible = False
            LineShape11.Visible = False
            LineShape12.Visible = False
            LineShape13.Visible = False
            LineShape14.Visible = False
            LineShape15.Visible = False
            LineShape16.Visible = False
            LineShape17.Visible = False
            LineShape18.Visible = False

                              'Makes all Circles and Crosses Invisible'
            RectangleShape1.Enabled = True
            RectangleShape2.Enabled = True
            RectangleShape3.Enabled = True
            RectangleShape4.Enabled = True
            RectangleShape5.Enabled = True
            RectangleShape6.Enabled = True
            RectangleShape7.Enabled = True
            RectangleShape8.Enabled = True
            RectangleShape9.Enabled = True

                             'This Enables the Boxes again'
        End If

        'If there is a win then the game board is reset'

42. Debug the game and fix any errors found.
<p>Is this also for a one player game as well?</p>
<p>Really good and informative tutorial but I seem to have a problem, every time I launch the game it chooses a player randomly and sticks to it, so for example if it chooses Red player and the Read player clicks on a box it doesn't switch for Blue Player, it keeps with Red player, so he plays alone.</p>
Same did u find the solution for it though
<p>Hey, I think that this game works fine. I like It.</p><p>Bernie</p>
<p>What is the RoundWin_Show? The board is empty when I play it</p>
nice
Thanks
nice, but isnt it common practice to put code commenting before the block of code it's about? instead of after it?
Yea I guess. I put it after the code. If I make another code tutorial I will put the code commenting before. Thanks

About This Instructable

54,996views

14favorites

License:

More by Ashcraft11:How to Make a Calendar in Photoshop Basics of Photoshop Length Converter 
Add instructable to: