《Flash 8实训教程-游戏制作入门》第3章 拼图游戏

第3章拼图游戏3.1游戏说明3.2打乱拼图3.3拼图的移动和判断3.4拼图完成的判断和界面美化 3.1游戏说明

本游戏是一个简单的拼图游戏。所有拼图的图片均为规则的正方形，而非常见的拼图那样有不规则的形状。所有图片在舞台上平铺，通过拖动图块到它应该在的位置，实现将图块放到正确的位置上；而将原来占据该位置的图块自动切换到所拖动图块原来的位置上。当所有图块均放置到正确位置时，表明拼图正确完成。

3.2打乱拼图

3.2.1游戏制作

1．初期准备工作

(1)准备一张位图图片(本书配套光盘中第三章\素材\3-1.jpg)，图片尺寸为1024×768像素或者800×600像素。由于目前普遍使用的电脑显示器屏幕的长宽比例一般为4∶3，因此，使用这一比例的图片在屏幕上显示时，给人的视觉感受会比较和谐。图3-1

(2)使用图片处理软件处理图片。本例中使用AdobePhotoshop，选择菜单命令〖图像〗→〖图像大小〗，在弹出的〖图像大小〗对话框中(见图3-1)，将图片的〖分辨率〗设置为“72”(像素/英寸)，〖宽度〗改为“400”(像素)，〖高度〗自动变为“300”(像素)。

(3)打开Flash，新建一个空白Flash文件，将动画文件的大小设置为400×300像素。

(4)在图像处理软件中按Ctrl+A键全选图像，按Ctrl+C键复制，再回到Flash中按Ctrl+V键进行粘贴；或者在Flash中选择菜单命令〖文件〗→〖导入〗→〖导入到舞台…〗，然后选择需要导入的图片即可。

(5)如果图片与舞台没有重合，则在〖属性〗控制面板中将图片的位置〖x〗和〖y〗均设置为“0”。

2．制作基本元件

(1)保持刚才导入的图片被选中(图片外会有一个灰色的框)，按F8键，在〖转换为元件〗对话框中，将〖类型〗设置为“影片剪辑”，〖名称〗设置为“big_mc”。现在可以将舞台上的图片实例删去，库中元件不受影响。

(2)使用〖矩形工具〗，在〖属性〗控制面板中将〖笔触颜色〗设置为“无色”，〖填充颜色〗设置为任意颜色，在舞台上画一个矩形。

(3)保持矩形选中的状态，按F8键将它转换为影片剪辑，〖名称〗为“mask_mc”，并将舞台上的实例删去，保留库中的元件。

(4)按Ctrl+F8键，在〖创建新元件〗对话框中，选择〖类型〗为“影片剪辑”，〖名称〗为“block_mc”。确定后，自动进入“block_mc”的编辑界面。

(5)调出〖库〗面板，将“big_mc”影片剪辑拖动到舞台上，在〖属性〗控制面板中，设置〖x〗和〖y〗为“0”，〖实例名称〗为“img”。

(6)将图层1重新命名为“大图”。

(7)新建层，拖动此层放置于“大图”层的上方，并将层命名为“遮罩”。

(8)在〖库〗控制面板中，拖出“mask_mc”影片剪辑放到此层上。在〖属性〗控制面板中，将这个实例的〖x〗和〖y〗均设置为“0”，〖实例名称〗设置为“mask”。

(9)单击“遮罩”层以选中，在“遮罩”层单击右键，在弹出的快捷菜单中选择〖遮罩层〗。两个图层变成图3-2所示的形式。

(10)单击场景1，返回主场景。图3-2

3．打碎图片并随机摆放

(1)从〖库〗面板中拖出“block_mc”影片剪辑，将它放到舞台白色区域外面的灰色区域中。

(2)在〖属性〗控制面板中，将此“block_mc”影片剪辑的〖实例名称〗设置为“tu”。

(3)新建层，命名为“action”。

(4)选择第1帧，按F9键，插入如下ActionScript语句：

weizhi=Array(1,2,3,4,5,6,7,8,9,10,11,12);

PieceLeft=12;

ax=0;

ay=0;

for(c=0;c<12;c++){

(5)效果如图3-3所示。图3-33.2.2重点与难点详解

在开始编程前，我们首先要把图片分成为横向4块，纵向3块，也就是一共分成为12块，然后再给这12块分别编号(见图3-4)。

开始编程时，使用一个数组变量weizhi来记住在没打乱图片顺序之前的各块图块。那么，什么是数组呢？我们可以把数组看成是一列火车，其中每一节车厢放着一个数字。我们是通过语句“weizhi=Array(1,2,3,4,5,6,7,8,9,10,11,12);”来给数组赋值的。通过“weizhi[0]，weizhi[1]，…”的形式来访问每一节“车厢”中的数字。可以这么说，0号车厢中放着数字1，1号车厢中放着数字2，……，11号车厢中放着数字12。特别要注意的是，车厢编号是从0开始的。图3-4在本例中，一开始有十二节车厢，顺序放入1～12这几个数。我们用PiecesLeft变量来保存当前还未生成的片数，即还未被取走的车厢总数。

用一个for语句来依次生成1～12号图块。for语句是一个循环语句，它的格式如下：

for(初始值；结束条件；步长){

语句1；

语句2；

…

语句n；

}

for语句的执行流程如图3-5所示。图3-5一旦取出车厢中的数字后，我们要把该列车厢从整列火车中摘除，以免出现重复的车厢。所以，我们使用数组对象的splice方法。“weizhi.splice(t,1);”表示在weizhi这个数组中的第t个位置开始，移除1个车厢。摘除车厢后，要把剩余的车厢数减1，所有在t后面的车厢编号自动往前移1号。按照前面的假设，如果t=5，在摘除车厢后，weizhi中的内容就变成(1,2,3,4,5,7,8,9,10,11,12)，如果下一次生成的t还是等于5，那么5号车厢中的数字就变为7(车厢是从0开始编号的)，见图3-6。图3-6一旦知道当前图块应该放到哪个位置后，我们就要生成这个图块。首先，使用“duplicateMovieClip(this.tu,"a"+c,c+10);”方法把tu这个图块的实例复制一份，这些实例的名称是a1～a12，层次依次为11～22。然后，我们通过移动“图块”影片剪辑中的“大图”影片剪辑实例img来制作不同的图块。图3-7模拟了如何通过移动img来实现不同的图块，注意，方框代表遮罩的位置，也就是真正图块所显示的范围。当真正图块没有移动而大图移动的时候，所显示的内容就发生了变化。请比较图3-7两个方框中的内容。图3-7 作业与练习

请在网上找一张合适的图片，并在Flash中用本节的方法将它打乱。 挑战与提高

能不能将一张500×400像素的图片分成5行4列并打乱呢？ 提示与解答

要将一张500×400像素的图片分成5行4列，每个图块的大小还是100×100像素，制作基本元件的过程不需要作任何改变。

需要改变的是ActionScript语句。而且，数组中的内容就不只是12个，而是应该有20个了，所有计算条件都要进行适当的修改。循环次数也由12次增加到20次。

3.3拼图的移动和判断

3.3.1游戏制作

1．使拼图图块可由鼠标拖动

(1)打开上节完成的Flash文件。

(2)在主时间轴中，选择“block_mc”影片剪辑的实例tu，按F9键调出〖动作〗编辑面板。

(3)在〖动作〗面板中输入以下语句段，进行变量初始化：

onClipEvent(load){

vari=0;

}图3-8

2．判断并互换图块

(1)仍然保持tu影片剪辑的实例被选中的状态，按F9键调出〖动作〗面板。

(2)将鼠标松开后需执行的内容修改为如下语句：

on(release){

stopDrag();

i=0;

tag=0;

for(v=0;v<12;v++){

if(_x<_root["a"+v]._x+50and_x>_root["a"+v]._x-50and_y<_root["a"+v]._y+50and_y>_root["a"+v]._y-50and_root["a"+v]._name!=this._name){

(3)按Ctrl+Enter键运行影片。现在，只要拖动图块到一个地方，松开鼠标左键，两块图片就可以互换位置了。3.3.2重点与难点详解

在tu这个“block_mc”影片剪辑的实例上，使用了onClipEvent(load)事件，这个事件的含义是当在动画中加载“block_mc”影片剪辑的时候，就执行花括号中的语句。上一节中，我们让动画每一个位置都复制一个tu，每复制一个tu，就是把“block_mc”影片剪辑又加载了一次，所以，每复制一个tu，就会执行一次onClipEvent的花括号中的语句。而花括号中的语句就只有一个“vari=0;”语句，首先定义了一个变量i，然后给这个i赋值为0。i变量用来记录图块是否正在被移动中。当i等于0的时候，表示该图块并没有被移动。对于每个“图块”影片剪辑的实例都有一个属于它自己的i，如a1.i、a2.i、…、a12.i。当在某一块“block_mc”影片剪辑的实例上按下鼠标左键时，首先用x1和y1两个变量记住当前实例的位置，然后把i设置为1，表示开始拖动这个实例。接着，用“this.swapDepths(100);”方法把当前实例的深度与深度为100的实例进行深度交换。如果深度100处没有其它实例，则当前实例的深度被设置为100，以让它在所有其它实例上方。最后，使用startDrag(this)方法，令本实例跟随鼠标移动。

在Flash中，用深度概念来决定对象和对象重叠时，深度值小的在下方，深度值大的在上方。我们用图3-9来表示结果。图3-9当松开鼠标时，首先要做的就是用stopDrag()来停止本实例继续随鼠标移动，并且设置表示是否正在被拖动的变量i为0，然后判断这块图块被放在哪里。由于我们并不能并且没必要总是精确地去放置图块，因此希望当图块放置到靠近某一范围时，就认为是与该范围最接近的图块位置。判断的标准是，当图块有超过1/4的面积与另一个图块重叠时，就认为该图块应该与重叠的图块交换位置。“_x<_root["a"+v]._x+50and_x>_root["a"+v]._x-50and_y<_root["a"+v]._y+50and_y>_root["a"+v]._y-50and_root["a"+v]._name!=this._name”这个判断条件，给每一个图块画出了一个区域，当正在被拖动的图块的原点进入这一区域时，重叠的面积就超过了1/4,见图3-10。图3-10 作业与练习

按照本例完成图片的拖动和互换。 挑战与提高

1．试记录一共交换了几步。

2．试制作5×4块的拼图的图片拖动和互换。提示与解答现在仅有这个变量是没有意义的，因为没有结果显示。我们将在下一节中，通过显示结果帧、增加动态文本框以显示这个变量。

2．在上一节完成的将图片打散成5×4块的基础上修改本例，只要把本例代码中涉及的“12”替换为“20”即可完成。

3.4拼图完成的判断和界面美化

3.4.1游戏制作

1．拼图的完成判断

(1)打开上节完成的Flash文件。

(2)在主时间轴图层1的第2帧处单击鼠标右键，在弹出的快捷菜单中，选择〖创建空白关键帧〗。

(3)在主场景action图层的第2帧处也创建空白关键帧。按F9键，调出〖动作〗面板，在其中输入语句“stop();”后，按F9键关闭〖动作〗面板。

(4)单击主时间轴图层1的第1帧，选择放在舞台外的“block_mc”影片剪辑实例tu。按F9键，调出〖动作〗面板。(6)按F9键关闭〖动作〗面板。

2．制作完成界面

(1)将图层1改名为“内容”，单击第2帧，将“big_mc”影片剪辑拖到舞台上，并选择〖任意变形工具〗，将这个影片剪辑适当缩小并放于合适的位置。

(2)用〖文本工具〗输入“聪明！！”，并按两次Ctrl+B键将文字打散，在保持选中的状态下，按Ctrl+G键重新组合。

(3)打开〖公用库〗，从中拖出一个按钮，放在合适的位置。本例中，选择“buttonsoval”类别中的“ovalgray”按钮。

(4)双击按钮，进入按钮编辑界面。选择“text”图层，点击它旁边的小锁以解锁。选择〖文本工具〗，将文字改为“再玩一次”(见图3-11)。图3-11

(5)点击场景1，返回主时间轴。

(6)选择刚才的按钮，按F9键，编辑按钮的ActionScript，输入如下语句：

on(release){

_root.gotoAndPlay(1);

}

(7)添加新层，双击新层的名称，改名为“背景”，并将新层拖动到最底层。

(8)保持选中“背景”层，导入一张图片(配套光盘中第三章\素材\background.jpg)作为背景。3.4.2重点与难点详解

在判断是否完成拼图时，我们又使用了一个变量来计算处于正确位置的图块数：RightPiece。每次松开鼠标后，在上节的位置判断后，均要判断当前有多少个图块放置在正确的位置上。当正确的图块数为12时，意味着所有的图块都已经放在正确的位置上了。此时，需要将所有图块清除，因为上节关于深度的内容中提到，如果不将这些图块清除，进入第2帧后，所有生成的图块的深度均比人工设置的深度高，会挡住舞台上现有的文字、图片和按钮。清除图块时我们使用了语句“removeMovieClip(_root["a"+p]);”。

removeMovieClip方法的调用格式如下：

removeMovieClip(影片剪辑名)

或

影片剪辑名.removeMovieClip();

本例中我们使用的是第一种调用形式，作用是移除由attachMovie方法或duplicate-MovieClip方法所建立的影片剪辑。

跳转到第2帧时我们使用了语句“_root.gotoAndStop(2);”。 作业与练习

完成上一节的拼图游戏。 挑战与提高