拼图游戏是大家比较熟悉的一种游戏，小时候经常会玩到这个益智游戏，面前摆着一堆小方块，拼来拼去，今天我们就使用Flash重新演绎这个经典的游戏，可谓是老树开新花。（本例的.swf和.fla文件请点击这里下载）

游戏主界面如图1所示：



图1

游戏主界面的右方是已经被分割的图案碎块，并且已经被打乱排列，左边是拼图的目标区域，我们的任务就是将右边的小块图案分别放置到左边的小方格里，如果将所有小块图案全部放置完毕后，能成为一幅完整的图案，则游戏成功。

下面我们来进行此游戏的制作。

1．首先需要选择一幅合适的图片，我们选择文件/导入命令，从外部导入一副小熊的图片到影片中，然后使用Ctrl+b快捷键将图片打散，如图2所示：



图2

2．然后使用直线工具，在打散后的图形上横向绘制六条直线，纵向绘制两条直线，将图形分成3*7=21块，如图3所示：



图3

3．因为游戏中需要使用鼠标拖动小的图案，所以分别选择每一块被分割的图案，将其转换成Button元件，分别命名为o1到o21。

4．判断游戏是否胜利，需要借助于Action动作脚本，通过动作脚本判断每块小图案是否在其应在的位置，所以还需要将按钮o1到o21转换成Movie clip影片剪辑，转换方法基本上相似，下面就以将按钮o1转换成影片剪辑m1为例，进行说明。

新一个Movie clip影片剪辑，命名为m1,进入元件的编辑区后，将元件o1拖到图层layer1中，并在第5帧插入一个关键帧，然后添加图层layer2,分别在第1,2,5帧插入关键帧，然后给第1帧添加如下Action动作脚本：

x = getProperty("/1", _droptarget);

//取得主场景中实例名为1的影片剪辑的_droptarget属性值，并赋值给变量x，_droptarget属性用来表示MC被放下的绝对路径

if (x eq "/yer1") {

setProperty("/1", _x, getProperty("/yer1", _x));

setProperty("/1", _y, getProperty("/yer1", _y));

gotoAndStop(5);

}//如果x也就是小图案被放下的位置和其对应的矩形位置一致的话，说明小图案的位置正确，然后设置小图案的坐标值为小矩形的坐标值，然后执行第5帧

给第2帧添加如下Action动作脚本：

gotoAndPlay(1);

//返回到第一帧继续判断位置是否正确

给第5帧添加如下Action动作脚本：

stopDrag();

/:correct = Number(/:correct)+1;

//如果位置正确，停止拖动小图案

然后给元件o1添加AS:

on (press) {

startDrag("/1", true);

}

//按下鼠标，开始拖动小图案

on (release) {

stopDrag();

}

//释放鼠标，停止拖动小图案

最后时间线如图4所示：



图4

5．接下来制作游戏界面左边的接收图案的小方块，一共也需要21个，其制作方法完全相同，下面以其中一个yer1为例进行说明。

新建一个Movie clip影片剪辑元件，命名为yer1,然后使用矩形工具绘制一个大小适中，填充色为白色，无轮廓的矩形，如图5所示：



图5

如法炮制，制作出其余20个矩形即可。

6．回到主场景中，添加三个图层，由下自上分别命名为table,border和pic,首先选中table图层，将元件yer1到yer21共21 个矩形拖到舞台中，排列其位置到舞台左边，并将其排列成7*3的阵列，如图6所示：



图6

排列好后，在属性面板中设置其对应的实例名，分别为yer1到yer21.

7.选中图层border,使用直线工具给已排列好的矩形添加黑色的边线，如图7所式：



图7

8．最后选中图层pic,将元件m1到m21分别从库中拖到舞台上，也排列成7*3的阵列，然后放置到舞台靠右的位置，如图8所示：



图8

然后还需要给这21个小图案设置实例名，设置规则是m1设置为1,m2设置为2,依此类推，全部设置。

最后发布影片，游戏制作完成了，是不是很简单，如果你已经成功拼出了上面的小熊，完全可以按照上面讲解的方法，换一个图案自己做一个新的游戏，做到百玩而不厌（出处：http://vipcn）

选择5ucms.org 选择未来