Tutorial Pembuatan Program Puzzle

Pernahkah anda ingin membuat suatu game puzzle namun dengan cara yang sederhana? Berikut adalah cara pembuatan game puzzle yang sangat sederhana dengan Visual Basic 2010

Pertama buka Visual Basic 2010, lalu pada form1 buat interface (tampilan) sebagai berikut :

Gambar itu merupakan dari potongan gambar yang dimasukkan ke dalam picturebox1 sampai picturebox9. Untuk gambarnya kamu bisa ganti sesuai keinginan.

Jika sudah lalu masukkan listing berikut :

Public Class Form1

    Dim gambar As Image

    Dim angka As Integer

    Dim startTime As DateTime

    Dim ttlMins As Integer

    Dim timeLeft As TimeSpan

    Sub ukuran()

        PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox2.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox3.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox4.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox5.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox6.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox7.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox8.SizeMode = PictureBoxSizeMode.StretchImage

        PictureBox9.SizeMode = PictureBoxSizeMode.StretchImage

    End Sub

Keterangan : Listing Code ini digunakan untuk menyesuaikan tampilan dari tiap picture box.

    Private Sub PictureBox1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox1.Click

        If PictureBox2.Image Is Nothing Then

            gambar = PictureBox1.Image

            angka = PictureBox1.Tag

            PictureBox1.Image = PictureBox2.Image

            PictureBox1.Tag = PictureBox2.Tag

            PictureBox2.Image = gambar

            PictureBox2.Tag = angka

        ElseIf PictureBox4.Image Is Nothing Then

            gambar = PictureBox1.Image

            angka = PictureBox1.Tag

            PictureBox1.Image = PictureBox4.Image

            PictureBox1.Tag = PictureBox4.Tag

            PictureBox4.Image = gambar

            PictureBox4.Tag = angka

        End If

        Call ukuran()

    End Sub

    Private Sub PictureBox8_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox8.Click

        If PictureBox7.image Is Nothing Then

            gambar = PictureBox8.Image

            angka = PictureBox8.Tag

            PictureBox8.Image = PictureBox7.Image

            PictureBox8.Tag = PictureBox7.Tag

            PictureBox7.Image = gambar

            PictureBox7.Tag = angka

        ElseIf PictureBox5.Image Is Nothing Then

            gambar = PictureBox8.Image

            angka = PictureBox8.Tag

            PictureBox8.Image = PictureBox5.Image

            PictureBox8.Tag = PictureBox5.Tag

            PictureBox5.Image = gambar

            PictureBox5.Tag = angka

        ElseIf PictureBox9.Image Is Nothing Then

            gambar = PictureBox8.Image

            angka = PictureBox8.Tag

            PictureBox8.Image = PictureBox9.Image

            PictureBox8.Tag = PictureBox9.Tag

            PictureBox9.Image = gambar

            PictureBox9.Tag = angka

        End If

        Call ukuran()

    End Sub

    Private Sub PictureBox2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox2.Click

        If PictureBox1.Image Is Nothing Then

            gambar = PictureBox2.Image

            angka = PictureBox2.Tag

            PictureBox2.Image = PictureBox1.Image

            PictureBox2.Tag = PictureBox1.Tag

            PictureBox1.Image = gambar

            PictureBox1.Tag = angka

        ElseIf PictureBox3.Image Is Nothing Then

            gambar = PictureBox2.Image

            angka = PictureBox2.Tag

            PictureBox2.Image = PictureBox3.Image

            PictureBox2.Tag = PictureBox3.Tag

            PictureBox3.Image = gambar

            PictureBox3.Tag = angka

        ElseIf PictureBox5.Image Is Nothing Then

            gambar = PictureBox5.Image

            angka = PictureBox5.Tag

            PictureBox5.Image = PictureBox2.Image

            PictureBox5.Tag = PictureBox2.Tag

            PictureBox2.Image = gambar

            PictureBox2.Tag = angka

        End If

        Call ukuran()

    End Sub

    Private Sub PictureBox3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox3.Click

        If picturebox2.image Is Nothing Then

            gambar = PictureBox3.Image

            angka = PictureBox3.Tag

            PictureBox3.Image = PictureBox2.Image

            PictureBox3.Tag = PictureBox2.Tag

            PictureBox2.Image = gambar

            PictureBox2.Tag = angka

        ElseIf picturebox6.image Is Nothing Then

            gambar = PictureBox3.Image

            angka = PictureBox3.Tag

            PictureBox3.Image = PictureBox6.Image

            PictureBox3.Tag = PictureBox6.Tag

            PictureBox6.Image = gambar

            PictureBox6.Tag = angka

            Call ukuran()

        End If

    End Sub

    Private Sub PictureBox4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox4.Click

        If picturebox1.image Is Nothing Then

            gambar = PictureBox4.Image

            angka = PictureBox4.Tag

            PictureBox4.Image = PictureBox1.Image

            PictureBox4.Tag = PictureBox1.Tag

            PictureBox1.Image = gambar

            PictureBox1.Tag = angka

        ElseIf picturebox5.image Is Nothing Then

            gambar = PictureBox4.Image

            angka = PictureBox4.Tag

            PictureBox4.Image = PictureBox5.Image

            PictureBox4.Tag = PictureBox5.Tag

            PictureBox5.Image = gambar

            PictureBox5.Tag = angka

        ElseIf picturebox7.image Is Nothing Then

            gambar = PictureBox4.Image

            angka = PictureBox4.Tag

            PictureBox4.Image = PictureBox7.Image

            PictureBox4.Tag = PictureBox7.Tag

            PictureBox7.Image = gambar

            PictureBox7.Tag = angka

        End If

        Call ukuran()

    End Sub

    Private Sub PictureBox5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox5.Click

        If picturebox2.image Is Nothing Then

            gambar = PictureBox5.Image

            angka = PictureBox5.Tag

            PictureBox5.Image = PictureBox2.Image

            PictureBox5.Tag = PictureBox2.Tag

            PictureBox2.Image = gambar

            PictureBox2.Tag = angka

        ElseIf picturebox4.image Is Nothing Then

            gambar = PictureBox5.Image

            angka = PictureBox5.Tag

            PictureBox5.Image = PictureBox4.Image

            PictureBox5.Tag = PictureBox4.Tag

            PictureBox4.Image = gambar

            PictureBox4.Tag = angka

        ElseIf picturebox6.image Is Nothing Then

            gambar = PictureBox5.Image

            angka = PictureBox5.Tag

            PictureBox5.Image = PictureBox6.Image

            PictureBox5.Tag = PictureBox6.Tag

            PictureBox6.Image = gambar

            PictureBox6.Tag = angka

        ElseIf picturebox8.image Is Nothing Then

            gambar = PictureBox5.Image

            angka = PictureBox5.Tag

            PictureBox5.Image = PictureBox8.Image

            PictureBox5.Tag = PictureBox8.Tag

            PictureBox8.Image = gambar

            PictureBox8.Tag = angka

        End If

        Call ukuran()

    End Sub

    Private Sub PictureBox6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox6.Click

        If picturebox3.image Is Nothing Then

            gambar = PictureBox6.Image

            angka = PictureBox6.Tag

            PictureBox6.Image = PictureBox3.Image

            PictureBox6.Tag = PictureBox3.Tag

            PictureBox3.Image = gambar

            PictureBox3.Tag = angka

        ElseIf picturebox5.image Is Nothing Then

            gambar = PictureBox6.Image

            angka = PictureBox6.Tag

            PictureBox6.Image = PictureBox5.Image

            PictureBox6.Tag = PictureBox5.Tag

            PictureBox5.Image = gambar

            PictureBox5.Tag = angka

        ElseIf picturebox9.image Is Nothing Then

            gambar = PictureBox6.Image

            angka = PictureBox6.Tag

            PictureBox6.Image = PictureBox9.Image

            PictureBox6.Tag = PictureBox9.Tag

            PictureBox9.Image = gambar

            PictureBox9.Tag = angka

        End If

        Call ukuran()

    End Sub

    Private Sub PictureBox7_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox7.Click

        If picturebox4.image Is Nothing Then

            gambar = PictureBox7.Image

            angka = PictureBox7.Tag

            PictureBox7.Image = PictureBox4.Image

            PictureBox7.Tag = PictureBox4.Tag

            PictureBox4.Image = gambar

            PictureBox4.Tag = angka

        ElseIf picturebox8.image Is Nothing Then

            gambar = PictureBox7.Image

            angka = PictureBox7.Tag

            PictureBox7.Image = PictureBox8.Image

            PictureBox7.Tag = PictureBox8.Tag

            PictureBox8.Image = gambar

            PictureBox8.Tag = angka

        End If

        Call ukuran()

    End Sub

    Private Sub PictureBox9_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox9.Click

        If PictureBox6.image Is Nothing Then

            gambar = PictureBox9.Image

            angka = PictureBox9.Tag

            PictureBox9.Image = PictureBox6.Image

            PictureBox9.Tag = PictureBox6.Tag

            PictureBox6.Image = gambar

            PictureBox6.Tag = angka

        ElseIf PictureBox8.Image Is Nothing Then

            gambar = PictureBox9.Image

            angka = PictureBox9.Tag

            PictureBox9.Image = PictureBox8.Image

            PictureBox9.Tag = PictureBox8.Tag

            PictureBox8.Image = gambar

            PictureBox8.Tag = angka

        End If

        Call ukuran()

    End Sub

Keterangan : Listing code ini digunakan untuk menukar gambar dan “angka” dari picturebox yang berdakatan dengan picturebox yang kosong.

Contohnya pada picturebox9 diatas, dia berdekatan dengan picturebox 6 dan 8. Saat kita menekan picturebox 9 jika picturebox 6 kosong dia akan bertukar peran dengan picturebox 6. Awalnya gambar di picturebox9 akan dipindah ke variabel “gambar” sehingga gambar pada picturebox 9 menjadi kosong dan tag (penanda angka) pada picturebox 9 akan dipindah ke variabel “angka” sehingga pada picturebox 9 menjadi kosong. Lalu gambar dan tag pada picturebox 6 akan dimasukkan ke picturebox 9 dan picturebox 6 akan diisi gambar dari variabel “gambar” dan tag dari variabel “angka”. Hal ini juga berjalan sama untuk penukaran picturebox yang lain.

    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick

        gambar = PictureBox9.Image

        angka = PictureBox9.Tag

        PictureBox9.Image = PictureBox4.Image

        PictureBox9.Tag = PictureBox4.Tag

        PictureBox4.Image = gambar

        PictureBox4.Tag = angka

        gambar = PictureBox9.Image

        angka = PictureBox9.Tag

        PictureBox9.Image = PictureBox3.Image

        PictureBox9.Tag = PictureBox3.Tag

        PictureBox3.Image = gambar

        PictureBox3.Tag = angka

        gambar = PictureBox2.Image

        angka = PictureBox2.Tag

        PictureBox2.Image = PictureBox7.Image

        PictureBox2.Tag = PictureBox7.Tag

        PictureBox7.Image = gambar

        PictureBox7.Tag = angka

        gambar = PictureBox2.Image

        angka = PictureBox2.Tag

        PictureBox2.Image = PictureBox6.Image

        PictureBox2.Tag = PictureBox6.Tag

        PictureBox6.Image = gambar

        PictureBox6.Tag = angka

        gambar = PictureBox3.Image

        angka = PictureBox3.Tag

        PictureBox3.Image = PictureBox8.Image

        PictureBox3.Tag = PictureBox8.Tag

        PictureBox8.Image = gambar

        PictureBox8.Tag = angka

        gambar = PictureBox3.Image

        angka = PictureBox3.Tag

        PictureBox3.Image = PictureBox1.Image

        PictureBox3.Tag = PictureBox1.Tag

        PictureBox1.Image = gambar

        PictureBox1.Tag = angka

        gambar = PictureBox5.Image

        angka = PictureBox5.Tag

        PictureBox5.Image = PictureBox8.Image

        PictureBox5.Tag = PictureBox8.Tag

        PictureBox8.Image = gambar

        PictureBox8.Tag = angka

        gambar = PictureBox5.Image

        angka = PictureBox5.Tag

        PictureBox5.Image = PictureBox7.Image

        PictureBox5.Tag = PictureBox7.Tag

        PictureBox7.Image = gambar

        PictureBox7.Tag = angka

        gambar = PictureBox6.Image

        angka = PictureBox6.Tag

        PictureBox6.Image = PictureBox1.Image

        PictureBox6.Tag = PictureBox1.Tag

        PictureBox1.Image = gambar

        PictureBox1.Tag = angka

    End Sub

Keterangan : Listing code diatas digunakan untuk mengacak gambar. Saat timer ini enabled (aktif) maka tiap detik akan terjadi pertukaran gambar dan tag (penanda angka) pada tiap picturebox ke picturebox lain yang saling berdekatan. Cara yang digunakan juga sama dengan cara penukaran gambar saat pengguna menyusun gambar.

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

        Timer1.Enabled = True

    End Sub

Keterangan : Listing ini merupakan listing code yang akan berjalan apabila pengguna menekan tombol “Acak”. Ini digunakan untuk mengaktifkan timer1 yang bertujuan mengacak gambar.

    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

        Timer1.Enabled = False

        Call waktu()

        Label2.Visible = True

        Button3.Enabled = False

    End Sub

Listing ini merupakan listing code yang akan berjalan apabila pengguna menekan tombol “Stop”. Ini akan menghentikan timer1 dan menampilkan waktu pada label2.

    Private Sub button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        If PictureBox1.Tag = 1 And PictureBox2.Tag = 2 And PictureBox3.Tag = 3 And PictureBox4.Tag = 4 And PictureBox5.Tag = 5 And PictureBox6.Tag = 6 And PictureBox7.Tag = 7 And PictureBox8.Tag = 8 Then

            MsgBox("Selamat Anda Berhasil")

        Else : MsgBox("Maaf Anda Belum Berhasil")

        End If

    End Sub

Listing ini merupakan listing code yang akan berjalan apabila pengguna menekan tombol “Cek Gambar”. Ini akan mengecek apakah gambar sudah benar. Apabila benar maka akan ditampilkan messagebox (“Selamat Anda Berhasil”) dan sebaliknnya messagebox(“Maaf Anda Belum Berhasil”).

Gambar diangggap sudah benar jika tag pada picturebox 1 sama dengan 1, 2 sama dengan 2 dan seterusnya sampai 9 sama dengan 9. Jika sudah benar maka akan ditampilkan msgbox(“Selamat Anda Berhasil”) namun apabila belum benar akan ditampilkan msgbox(“Maaf Anda Belum Berhasil”).

  

 Private Sub Timer2_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer2.Tick

        timeLeft = startTime.Subtract(Now)

        If Not timeLeft.Milliseconds < 0 Then

            Label2.Text = Format(timeLeft.Minutes, "#0") & " Mins" & "  " & Format(timeLeft.Seconds, "00") & " Secs"

        Else

            Timer2.Enabled = False

            If MsgBox("Coba Lagi?", vbQuestion + vbYesNo, "Game Over!") = vbYes             Then Call waktu()

                Timer1.Enabled = True

                Button3.Enabled = True

            Else

                Close()

            End If

        End If

    End Sub

Keterangan : Listing ini digunakan untuk mengecek waktu, apabila waktu telah habis akan ditampilkan messagebox(“Coba lagi?”) dengan pilihan jawaban. Apabila memilih “yes” maka akan mengulang kembali permainan, apabila “no” akan keluar dari permainan

    Sub waktu()

        Timer2.Interval = 1000

        Timer2.Enabled = True

        ttlMins = Integer.Parse(Label4.Text)

        startTime = Now.AddMinutes(ttlMins)

        timeLeft = startTime.Subtract(Now)

        Label2.Text = Format(timeLeft.Minutes, "#0") & " Mins" & "  " & Format(timeLeft.Seconds, "00") & " Secs"

    End Sub

Keterangan : Listing ini digunakan untuk menampilkan waktu.

End Class

Untuk flowchartnya adalah sebagai berikut :

Nah, mudah bukan? Selamat mencoba ^^