Pemrograman
Now Reading
Cara Membuat Tic Tac Toe di Visual Studio 2017
0

Senang sekali masih bisa berjumpa dengan teman-teman sekalian. Pada pertemuan ini. Aku akan membahas bagaimana cara membuat Tic Tac Toe di Visual Studio 2017 dengan mudah. Mengapa mudah ? Karena aku akan share semua kodingan yang dibutuhkan dalam membuat sebuah game Tic Tac Toe.

Sedikit informasi buat teman-teman yang belum tahu permainan Tic Tac Toe. Tic Tac Toe adalah sebuah game yang dimainkan diatas papan kotak 3 x 3 yang dimainkan oleh dua pemain, X dan O. Game ini disebut catur jawa bagi orang Indonesia. Menurut penilitian lain game ini dikenal sebagai noughts and cross atau Xs and Os. Untuk memenangkan permainan ini, pemain harus berhasil menempatkan tiga tanda ( X atau O) kedalam kotak dan harus sejajar tiap-tiap tanda.

Bahan Membuat Tic Tac Toe di Visual Studio 2017

Sebelum kamu menjalankan tutorial ini, kamu perlu perhatikan Gambar 1.1 sebagai contoh objek dalam membuat sebuah game Tic Tac Toe.

Cara Membuat Tic Tac Toe di Visual Studio 2017

Gambar 1.1 – Tampilan Game Tic Tac Toe

Perlu diingat, kotak paling atas disebelah kiri atau kotak paling awal pada form ini adalah sebuah elemen button1. Di sebelah kanan kotak pertama, itu adalah sebuah elemen button2. Urutkan setiap elemen-elemen seperti pada urutan tersebut.

Berikut bahan-bahan yang harus dipersiapkan:

  1.  10 Buttons
  2. 6 labels
  3. 1 PictureBox (optional)

Semua elemen diatas akan dimasukkan kedalam form dan tiap-tiap elemen memiliki keterkaitan. Jadi disimpulkan, jika ada 1 elemen yang berkurang, maka kodingan yang aku siapkan dibawah tidak akan berjalan.

Baca juga: Cara Menghitung Rata-Rata Menggunakan Fungsi IF di Visual Studio

Langkah-Langkah Membuat Tic Tac Toe di Visual Studio 2017

Perlu diingat kembali cara membuat Tic Tac Toe di Visual Studio 2017 bahwa tutorial ini menggunakan bahasa visual basic bukan visual C#. Jika pada aplikasi visual studio kamu menggunakan bahasa C# maka kodingan dibawah ini tidak dapat berjalan.

  1. Click File – New Project – Pilih bagian Visual Basic (Windows Classic Dekstop) – Windows Forms App.
  2. Masukkan elemen-elemen kedalam form dan sesuaikan posisi seperti pada Gambar 1.1
  3. Untuk step ini, tidak perlu mengubah design name. Biarkan sistem yang menentukan design name tersebut.
  4. Pada visual studio, kamu tidak perlu klik dua kali setiap button. Kamu dapat memasukkan kodingan secara langsung. Masukkan kodingan dibawah ini kedalam View Code.
  5. Selesai.

Kodingan Membuat Tic Tac Toe di Visual Studio 2017

Kodingan dibawah ini berfungsi untuk membuat jumlah user beserta tampilan awal pada saat user mengklik aplikasi tersebut.

Public Class Form1

    Public player1, player2 As String

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        MsgBox("Wellcome guys to Tic Tac Toe Game by Bier Pinter")
        player1 = InputBox("Enter Name of Player 1 ", "Name of Player 1 - Bier Pinter")
        player2 = InputBox("Enter Name of Player 2 ", "Name of Player 2 - Bier Pinter")
        If player1 = "" Then
            player1 = "Player 1"
            player2 = "Player 2"
        End If
        Label1.Text = Label1.Text + player1
        Label2.Text = Label2.Text + player2
        Label3.Text = Label3.Text + player1
        Label4.Text = Label4.Text + player2
        Label2.Visible = False

    End Sub

Kodingan dibawah ini untuk membuat syarat / ketentuan player pertama menang.

 Private Sub txt_chk()
        'Player 1's Win chnces
        If Button1.Text = "X" And Button2.Text = "X" And Button3.Text = "X" Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button1.Text = "X" And Button5.Text = "X" And Button9.Text = "X") Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button1.Text = "X" And Button4.Text = "X" And Button7.Text = "X") Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button4.Text = "X" And Button5.Text = "X" And Button6.Text = "X") Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button7.Text = "X" And Button8.Text = "X" And Button9.Text = "X") Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button2.Text = "X" And Button5.Text = "X" And Button8.Text = "X") Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button3.Text = "X" And Button6.Text = "X" And Button9.Text = "X") Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button3.Text = "X" And Button5.Text = "X" And Button7.Text = "X") Then
            MsgBox("Congratulation " & player2 & ", You Win", MsgBoxStyle.Information, "Win")
            Label6.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False

Kodingan dibawah ini untuk membuat syarat / ketentuan player kedua menang.

'Player2's Win Chances
        ElseIf (Button1.Text = "O" And Button2.Text = "O" And Button3.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button1.Text = "O" And Button5.Text = "O" And Button9.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button1.Text = "O" And Button4.Text = "O" And Button7.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button4.Text = "O" And Button5.Text = "O" And Button6.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button7.Text = "O" And Button8.Text = "O" And Button9.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button2.Text = "O" And Button5.Text = "O" And Button8.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button3.Text = "O" And Button6.Text = "O" And Button9.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf (Button3.Text = "O" And Button5.Text = "O" And Button7.Text = "O") Then
            MsgBox("Congratulation " & player1 & ", You Win", MsgBoxStyle.Information, "Win")
            Label5.Text += 1
            Button1.Enabled = False
            Button2.Enabled = False
            Button3.Enabled = False
            Button4.Enabled = False
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False

        End If


    End Sub

Kodingan dibawah ini untuk membuat fungsi pada setiap elemen Button.

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        If Label1.Visible = True Then
            Button1.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button1.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button1.Enabled = False

    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        If Label1.Visible = True Then
            Button2.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button2.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button2.Enabled = False

    End Sub



    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
        If Label1.Visible = True Then
            Button3.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button3.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button3.Enabled = False

    End Sub



    Private Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click
        If Label1.Visible = True Then
            Button4.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button4.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button4.Enabled = False

    End Sub


    Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button5.Click
        If Label1.Visible = True Then
            Button5.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button5.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button5.Enabled = False

    End Sub


    Private Sub Button6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button6.Click
        If Label1.Visible = True Then
            Button6.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button6.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button6.Enabled = False

    End Sub


    Private Sub Button7_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button7.Click
        If Label1.Visible = True Then
            Button7.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button7.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button7.Enabled = False

    End Sub

    Private Sub Button8_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button8.Click
        If Label1.Visible = True Then
            Button8.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button8.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button8.Enabled = False

    End Sub



    Private Sub Button9_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button9.Click
        If Label1.Visible = True Then
            Button9.Text = "O"
            txt_chk()
            Label1.Visible = False
            Label2.Visible = True
            GoTo Ganti
        End If

        If Label2.Visible = True Then
            Button9.Text = "X"
            txt_chk()
            Label1.Visible = True
            Label2.Visible = False
            GoTo Ganti

        End If

Ganti:  Button9.Enabled = False

    End Sub

PictureBox & Tombol Reset

Untuk PictureBox kamu tidak diwajibkan menggunakan elemen ini. Elemen ini hanya berfungsi untuk memberikan / menampilkan icon pada form. Berikut kodingannya dibawah ini:

Private Sub PictureBox1_Click(sender As Object, e As EventArgs) Handles PictureBox1.Click
        Process.Start("https://www.bierpinter.com")

    End Sub
    Private Sub Button10_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button10.Click
        Button1.Text = ""
        Button1.Enabled = True
        Button2.Text = ""
        Button2.Enabled = True
        Button3.Text = ""
        Button3.Enabled = True
        Button4.Text = ""
        Button4.Enabled = True
        Button5.Text = ""
        Button5.Enabled = True
        Button6.Text = ""
        Button6.Enabled = True
        Button7.Text = ""
        Button7.Enabled = True
        Button8.Text = ""
        Button8.Enabled = True
        Button9.Text = ""
        Button9.Enabled = True

    End Sub

End Class

Demikian Cara Membuat Tic Tac Toe di Visual Studio 2017 dengan mudah. Bier Pinter juga telah menyiapkan video tutorial bagi kamu yang kurang jelas atau belum mengerti.

Jika Video ini bermanfaat, mohon di Like & Subscribe untuk mendukung kami dalam video-video berikutnya. Terima kasih,

What's your reaction?
Luar Biasa
33%
Suka Sekali
33%
Keren
33%
Kagum
0%
Jelek
0%
Tidak Suka
0%
About The Author
Carollous Dachi

Leave a Response