Flash游戏制作：七巧板

   大家小时候一定都玩过七巧板这个游戏吧,使用七块形状各异的小板,经过一番思考可琢磨后,就可以拼出各种各样的形状,现在想起来真的很怀念,今天我们就用Flash制作一款这样的七巧板游戏,一起来回忆美好的童年。
　　游戏玩法:
　　游戏界面的右下方摆着我们熟悉的七巧板，我们可以使用鼠标将每块小板拖动到上面蓝色的区域。蓝色区域右上角用浅蓝色显示要求你拚出的图案，玩家可以按照此图将七块小板组合在一起，如果最后能成功地将小板组合成所给的图案,则游戏胜利。游戏过程中每点击小板上的蓝色小圈，小板则顺时针旋转45度。
　　游戏的左下角有三个功能按钮。“其它图形”按钮用来改变所给图案。“答案”按钮可以将所给图案分解为七部分，这样就可以看出原始图案是如何组成的。“重新开始”按钮可以清除蓝色区域中的小板,使游戏重新开始。

                     图1
　　制作思路:
　　游戏的制作思路比较简单,关键要实现的是小板的旋转控制。游戏中小板旋转控制的实现很简单,只需要设置Movie clip元件的Rotation属性即可。如果要实现不间断的顺时针旋转，需要先记录前一位置的角度，给一个45度的增量，再设置旋转角度。
　　制作步骤:
　　一、首先需要制作七块形状不同的小板
　　1.因为游戏中提供了如图2所示的拼图答案，所以先来制作七块用做答案图形的小板。

                     图2
　　2.新建一个Graphic元件.命名为1g,在后面的元件中,都采用数字+元件类型的命名方法,例如1g中的1表示第一个图形,g表示元件类型为Graphic,进入元件编辑区后,使用直线工具绘制一个三角形,然后选择Modify/Group命令将三条直线群组起来,如图3所示:

                     图3
3.接下来制作游戏中使用的小板,因为游戏中可以随意对小板进行拖动,所以需要将小板制作为Button按钮元件。新建一个Button元件,命名为1b,进入元件编辑区后,在Up帧使用绘图工具绘制一个形状和图3中三角形一样的带有填充色的三角形,如图4所示:

                     图4
　　4.游戏中需要对小板进行旋转操作,每点一下小板上的小圈,便可旋转45度，所以用于小板旋转的小圈也要制作成Button按钮元件。新建一个Button元件,命名为rotation,进入元件编辑区后,在Up帧使用椭圆工具绘制一个小的正圆即可,填充颜色设置成和图4中图形一样,轮廓线选淡蓝色,如图5所示:

                     图5
　　5.接下来将元件1b和rotation组合成最终的小板,而游戏中需要使用Action动作脚本对小板进行旋转控制,所以这里的组合体应该制作成Movie clip元件。新建一个Movie clip元件,命名为1m,进入元件编辑区后,分别将元件1b和rotation拖到编辑区中,移动Rotation 对象到三角形上合适位置,如图6所示:

                     图6
　　6.最后给三角形小板按钮添加如下Action:
　　on (press)
　　//当按下鼠标的时候,可以拖动此按钮
　　on (release)
　　//当释放鼠标的时候,拖动停止
　　给控制旋转的圆圈按钮添加如下Action:
　　on (press) {
　　　　 elrotation = getProperty('', _rotation);　　//用变量elrotation记录当前的旋转角度
　　　　 elrotation = Number(elrotation)+45;　　//设置变量值为当前角度加45度
　　　　 setProperty('', _rotation, int(eval('elrotation')));
　　　　//按照新的旋转角度值旋转对象
　　}
　　这样,七巧板中的一个小板就制作完成了,可以看到，制作一个小板需要相应的制作三个不同的元件。
　　按照类似的方法制作其它六个小板，共18个元件。具体情况可以查看提供的源文件,最后图库如图7所示:

                    图7
二、接下来布置场景。
　　1. 回到主场景中,设置影片大小为440px*550px,背景色为淡蓝色。
　　2. 将当前默认图层改名为background，使用矩形工具在舞台上绘制一个正方形,填充颜色为蓝色,作为游戏的拼图区域,将其放置在舞台中靠上的位置。然后在舞台左下角使用文本工具输入说明信息，提醒玩家点击小板上的圆圈可以将小板旋转,最后将图层延续到第10帧,如图8所示;

                    图8
　　3. 新建一个图层Pieces，将制作好的七个小板1m到7m拖到舞台中,然后按照图9所示摆放好。分别给七个小板设置实例名（Instance name）为: een, twee, drie, vier, vijf, zes, zeven。

                   图9
　　4. 然后新建两个图层shapes和solutions，分别放置游戏中的目标图案和拼图的答案。在图层shapes的第1,3,5,7,9帧分别插入关键帧，在每一关键帧绘制目标图案，例如第1关键帧中的图案如图10所示:

                   图10
　　所绘制的图案可以自己确定，本实例中每一帧的图案可以参考文章末尾提供的源文件。
　　在图层solutions的第2,4,6,8,10帧分别插入关键帧，每一帧放置的都是前一帧目标图案的答案，可以根据前一帧的图案,使用元件1g到7g进行组合，例如第5帧和第6 帧分别如图11和图12所示:

                    图11

                    图12
5. 新建一个图层buttons，用来放置游戏中的功能按钮，分别制作三个如图13所示的按钮,然后摆放到舞台的左下角。

                    图13
　　分别在第1、3、5、7、9帧插入关键帧。
　　回到第1帧，给图13中第1个按钮（其他图形）添加AS;
　　on (press)
　　//因为第1、3、5、7、9帧中放置的是目标图案，所以此按钮的跳转目标是这些帧，后面那些帧中此按钮的AS的道理也一样。
　　给第2个按钮（答案）添加AS:
　　on (press)
　　//因为1,3,5,7,9帧中的图案的答案都在下一帧，所以要看第一帧图案的答案要跳到第2帧,后面帧中此按钮的AS含义也相似
　　给第3个按钮（重新开始）添加AS:
　　on (release) {
　　　　 setProperty('vier', _x, '159.8');
　　　　 setProperty('vier', _y, '505.7');
　　　　 setProperty('vier', _rotation, '0');

　　　　 setProperty('zeven', _x, '181.8');
　　　　 setProperty('zeven', _y, '447.9');
　　　　 setProperty('zeven', _rotation, '0');

　　　　 setProperty('zes', _x, '225.3');
　　　　 setProperty('zes', _y, '502.9');
　　　　 setProperty('zes', _rotation, '0');

　　　　 setProperty('vijf', _x, '262.4');
　　　　 setProperty('vijf', _y, '438.8');
　　　　 setProperty('vijf', _rotation, '0');

　　　　 setProperty('een', _x, '272.9');
　　　　 setProperty('een', _y, '493.1');
　　　　 setProperty('een', _rotation, '0');

　　　　 setProperty('drie', _x, '340.6');
　　　　 setProperty('drie', _y, '446.9')