用Image数组实现图片打乱效果
技术与开发
读者：我想做一个拼图的小游戏（见上图），可不知道怎么设计，能帮帮我吗？
小编：我们可以用VB中能灵活处理图片位置的Image数组来设计这个拼图游戏，具体操作如下。
在VB环境下，如果我们要操作多张图片，使用Image数组无疑是最方便最快捷的。Image数组的元素中有一个Picture属性，可以加载一张图片，Image数组元素的个数决定了这个数组能控制图片的张数，通过设置Image数组中每一个元素的属性就能够操作每一张图片，比如改变图片的大小、在界面中的坐标。
设计思路：在窗体中显示一张图片，5秒后图片隐藏，随即显示上图的窗体。此窗体是把原图分割成20张大小相同的小图并打乱显示出来（窗体最下方）。玩家点击一张小图，再在空白的区域点击一下，如果点击的小图正好是所点击的空白区域的缩略图，小图消失，显示相应的大图。如果点击错误，必须重新再次点击小图后才能点击空白区域。必须在90秒内把图复原才算获胜（图2）。
打乱图片位置原理：改变图片在界面中的位置（打乱图片）只需要一个简单的算法来打乱Image数组各个元素的位置，并依次显示各个元素的Picture就可以了。如下图，互换Image数组的各个元素的位置，图片在界面中的位置也就打乱了。互换图片采用随机互换2个数组的元素进行。Image数组元素经过多次互换位置后，图片位置就彻底打乱了。
拼图游戏的开发步骤
第一步：前期准备。首先要找一张稍微大点的背景图。然后制作素材，即把图片切割成20张大小相同的小图片，分别命名为b11、b12、b13、b14、b15、b21……b45。在上图的空白区域就显示b11、b12……b45。分别把b11、b12、b13、b14、b15、b21……b45缩小40%保存为l11、l12、l13、l14、l15、l21……l45。在上图的最下方显示打乱的小图就是l11、l12……l45。
第二步：启动VB，新建一工程，把启动窗体命名为startup，添加一个主窗体，命名为main。制作Statrup窗体：添加1个image，2个command，1个text，1个label，1个timer。给玩家5秒时间显示整个风景图后关闭并显示Main窗体。这一步编写代码简单，不再提供代码。
第三步：制作main窗口：添加1个Picture 、2个image（Picture、image都为数组控件），布置好其相对位置（如上图）。添加text1、text22、text23做辅助控件，设置在运行时为不可见。本文中代码没有定义的变量均为全局变量。
如何打乱小图片并显示出来的代码为：
For i = 0 To 20 Step 1 //设置打乱次数为20，如果增加难度的话可以把值加大，比如循环50次。
Pos1 = Rnd(1) * 19
Pos2 = Rnd(1) * 19
Tmp = PosArr(Pos1)
PosArr(Pos1) = PosArr(Pos2)
PosArr(Pos2) = Tmp
Next i
//把PicArr(0)-PicArr(5)分别赋值为l11、l12、l13、l14、l15
//把PicArr(6)-PicArr(10)分别赋值为l21、l22、l23、l24、l25
//把PicArr(11)-PicArr(15)分别赋值为l31、l32、l33、l34、l35
//把PicArr(16)-PicArr(20)分别赋值为l41、l42、l43、l44、l45
For i = 0 To 4 Step 1
PicArr(i) = "l1" + CStr(i + 1)
PicArr(i + 5) = "l2" + CStr(i + 1)
PicArr(i + 10) = "l3" + CStr(i + 1)
PicArr(i + 15) = "l4" + CStr(i + 1)
Next i
// 下面给Image数组装载打乱的小图片
For i = 0 To 19 Step 1
t = i
Text1.Text = PosArr(i) + 1
Call display(PosArr(i))
Next i
SelSmall = -1
SelIndex = -1
'***********************************
End Sub
Private Sub display(n As Integer)
Image10(t).Picture = LoadPicture(App.Path + "\pic\" + PicArr(n) + ".jpg")
//把PosArr()传递给n，如果PosArr（0）=15, 那么Image(0)就是Image10(0)装载的图片就是l15.jpg
End Sub
第四步：小图片打乱后就是程序与玩家的互动了，选择的小图是否是点击的空白区域的缩略图，如果是则把小图隐藏并在所点击的空白区域显示相应的大图，如果不是则需要重新选择小图。这里的难点就是flag变量的使用，只有点击小图后才能点击空白区域，因此当点击小图片后flag赋值为“真”，再点击空白区域后flag赋值为“假”，小图片点击代码如下：
Private Sub Image10_Click(Index As Integer)
flag = True
If (Index ＞= 0 And Index ＜ 20) Then
Text23.Text = PosArr(Index)
SelSmall = PosArr(Index)
SelIndex = Index
End If
End Sub
Private Sub disappear(m As Integer)//判断选择的小图是否是点击的空白区域的缩略图
Text22.Text = m
If (flag = True) Then
If SelSmall = m Then
Image1(m).Visible = True
Image10(SelIndex).Visible = False
End If
End If
SelSmall = -1
flag = False
End Sub
空白区域点击代码
Private Sub Picture1_Click(Index As Integer)
Call disappear(Index)
End Sub
总结
本程序的难点是使用Image数组来随机打乱并显示小图片，本文采用的方法是通过不断交换图片的位置来实现的，当然也可以采用其他算法，读者可自行研究更高效率的算法。另外本程序在图片处理上使用了Image数组和Picture数组，在Borland C++ Bulider 和Delphi中都没有图片数组功能，灵活使用VB的Image数组对于在设计程序中提高编程效率相当有用，这也是VB优于Delphi和BCB的地方之一。