Tic Tac Toe Game
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
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’
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’
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.]
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.]
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.’
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.’
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!
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!
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.
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.