Jigsaw Puzzle

VB Jigsaw Puzzle Game

Create a classic puzzle game with drag-and-drop functionality using VB6 and VB.NET

Introduction to Jigsaw Puzzle Game

Jigsaw puzzles are classic games where players reassemble pieces of a picture that have been cut into interlocking pieces and jumbled up. This Visual Basic 6 implementation demonstrates how to create a simple 3x3 jigsaw puzzle with drag-and-drop functionality.

How It Works

Our VB6 puzzle allows you to drag and drop pieces into what you believe are the correct positions. The program validates each move - if correct, the piece stays; if incorrect, it returns to its original position.

Key Features

Drag-and-drop puzzle pieces
Position validation logic
Visual feedback for correct/incorrect moves
Simple 3x3 grid interface
VB6 sample code for learning

Game Interface

The puzzle interface consists of a 3x3 grid where players place the pieces. The pieces appear on the side and can be dragged to any cell in the grid.

Jigsaw Puzzle Game Interface

Interactive Puzzle Simulation

Click one puzzle piece, then click another piece to swap them. Arrange the numbers from 1 to 9 in the correct order to complete the puzzle.

Click Shuffle to start.

Implementation Details

Drag-and-Drop Mechanics

The core functionality uses VB6's DragDrop method. Each puzzle piece is draggable and can be dropped into any grid cell.

Position Validation

When a piece is dropped, the program checks if it matches the correct position using a tagging system that identifies each piece's proper location.

Visual Feedback

Correct placements make the piece appear in the grid, while incorrect attempts return the piece to its original position.

VB6 Code Sample

The following code demonstrates the drag-and-drop validation logic. Each grid cell checks if the dropped piece matches its expected tag.

DragDrop Event Handler

Dim imgindex As Integer
Dim imgtag As String

Private Sub Image1_DragDrop(Index As Integer, Source As Control, X As Single, Y As Single)
    imgtag = Source.Tag
    imgindex = Index
    
    Select Case imgindex
        Case 0
            If imgtag = "11" Then
                Image1(0).Picture = Image1(9).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 1
            If imgtag = "12" Then
                Image1(1).Picture = Image1(10).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 2
            If imgtag = 13 Then
                Image1(2).Picture = Image1(11).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 3
            If imgtag = 21 Then
                Image1(3).Picture = Image1(12).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 4
            If imgtag = 22 Then
                Image1(4).Picture = Image1(13).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 5
            If imgtag = 23 Then
                Image1(5).Picture = Image1(14).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 6
            If imgtag = 31 Then
                Image1(6).Picture = Image1(15).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 7
            If imgtag = 32 Then
                Image1(7).Picture = Image1(16).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
        Case 8
            If imgtag = 33 Then
                Image1(8).Picture = Image1(17).Picture
                Source.Visible = False
            Else
                Source.Visible = True
            End If
    End Select
End Sub

Note: This code uses an array of Image controls (Image1) where indices 0-8 represent the grid cells and indices 9-17 represent the puzzle pieces.

Equivalent VB.NET Code

The following VB.NET example shows how the same jigsaw-style puzzle can be built in Windows Forms using a 3×3 grid of PictureBox controls. Each piece can be dragged and dropped onto a target cell, and the program checks whether the dropped piece matches the expected position.

VB.NET Jigsaw Puzzle Code

Public Class Form1
    Private draggedPiece As PictureBox = Nothing

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' Example: PictureBox controls picPiece1 to picPiece9
        ' Example: Grid cells grid0 to grid8
        InitializePuzzle()
    End Sub

    Private Sub InitializePuzzle()
        ' Assign tags to puzzle pieces
        picPiece1.Tag = "11"
        picPiece2.Tag = "12"
        picPiece3.Tag = "13"
        picPiece4.Tag = "21"
        picPiece5.Tag = "22"
        picPiece6.Tag = "23"
        picPiece7.Tag = "31"
        picPiece8.Tag = "32"
        picPiece9.Tag = "33"
    End Sub

    Private Sub Piece_MouseDown(sender As Object, e As MouseEventArgs) _
        Handles picPiece1.MouseDown, picPiece2.MouseDown, picPiece3.MouseDown,
                picPiece4.MouseDown, picPiece5.MouseDown, picPiece6.MouseDown,
                picPiece7.MouseDown, picPiece8.MouseDown, picPiece9.MouseDown

        draggedPiece = CType(sender, PictureBox)
        If draggedPiece IsNot Nothing Then
            draggedPiece.DoDragDrop(draggedPiece, DragDropEffects.Move)
        End If
    End Sub

    Private Sub Grid_DragEnter(sender As Object, e As DragEventArgs) _
        Handles grid0.DragEnter, grid1.DragEnter, grid2.DragEnter,
                grid3.DragEnter, grid4.DragEnter, grid5.DragEnter,
                grid6.DragEnter, grid7.DragEnter, grid8.DragEnter

        If e.Data.GetDataPresent(GetType(PictureBox)) Then
            e.Effect = DragDropEffects.Move
        End If
    End Sub

    Private Sub Grid_DragDrop(sender As Object, e As DragEventArgs) _
        Handles grid0.DragDrop, grid1.DragDrop, grid2.DragDrop,
                grid3.DragDrop, grid4.DragDrop, grid5.DragDrop,
                grid6.DragDrop, grid7.DragDrop, grid8.DragDrop

        Dim targetGrid As PictureBox = CType(sender, PictureBox)
        Dim sourcePiece As PictureBox = CType(e.Data.GetData(GetType(PictureBox)), PictureBox)

        If targetGrid Is Nothing OrElse sourcePiece Is Nothing Then Exit Sub

        Dim targetTag As String = targetGrid.Tag.ToString()
        Dim pieceTag As String = sourcePiece.Tag.ToString()

        If targetTag = pieceTag Then
            targetGrid.Image = sourcePiece.Image
            sourcePiece.Visible = False
            CheckPuzzleComplete()
        Else
            MessageBox.Show("Incorrect position. Try again.", "Jigsaw Puzzle")
            sourcePiece.Visible = True
        End If
    End Sub

    Private Sub CheckPuzzleComplete()
        If grid0.Image IsNot Nothing AndAlso
           grid1.Image IsNot Nothing AndAlso
           grid2.Image IsNot Nothing AndAlso
           grid3.Image IsNot Nothing AndAlso
           grid4.Image IsNot Nothing AndAlso
           grid5.Image IsNot Nothing AndAlso
           grid6.Image IsNot Nothing AndAlso
           grid7.Image IsNot Nothing AndAlso
           grid8.Image IsNot Nothing Then

            MessageBox.Show("Congratulations! Puzzle completed.", "Jigsaw Puzzle")
        End If
    End Sub
End Class

In this VB.NET version, each puzzle piece is a PictureBox that can be dragged onto a grid cell. The Tag property is used to determine whether the piece belongs to that target position. This is the same idea as the VB6 version, but adapted to Windows Forms.

Learn More

To further explore Visual Basic game development:

VB6 Game Programming

Learn the fundamentals of game development with Visual Basic 6, including graphics handling and event-driven programming.

Drag-and-Drop Techniques

Master drag-and-drop implementations in VB6 for various applications beyond games.

Advanced Puzzle Mechanics

Explore more complex puzzle implementations like variable difficulty levels and image handling.