Flash游戏制作：七巧板


大家小时候一定都玩过七巧板这个游戏吧,使用七块形状各异的小板,经过一番思考可琢磨后,就可以拼出各种各样的形状,现在想起来真的很怀念,今天我们就用Flash制作一款这样的七巧板游戏,一起来回忆美好的童年。

　　游戏玩法:
　　游戏界面的右下方摆着我们熟悉的七巧板，我们可以使用鼠标将每块小板拖动到上面蓝色的区域。蓝色区域右上角用浅蓝色显示要求你拚出的图案，玩家可以按照此图将七块小板组合在一起，如果最后能成功地将小板组合成所给的图案,则游戏胜利。游戏过程中每点击小板上的蓝色小圈，小板则顺时针旋转45度。

　　游戏的左下角有三个功能按钮。“其它图形”按钮用来改变所给图案。“答案”按钮可以将所给图案分解为七部分，这样就可以看出原始图案是如何组成的。“重新开始”按钮可以清除蓝色区域中的小板,使游戏重新开始。

图2

图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拖到舞台中,然后按照图10所示摆放好。分别给七个小板设置实例名（Instance name）为: een, twee, drie, vier, vijf, zes, zeven。

图10

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

图11
　　所绘制的图案可以自己确定，本实例中每一帧的图案可以参考文章末尾提供的源文件。

　　在图层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");
　　　　 setProperty("drie", _rotation, "0");

　　　　 setProperty("twee", _x, "386.6");
　　　　 setProperty("twee", _y, "493.3");
　　　　 setProperty("twee", _rotation, "0");
　　}
　　//分别设置七块板的坐标,使它们回到舞台右下角的初始位置,这样就相当于将蓝色区域的小板清除,可以重新玩。

　　按照上面类似的方法，继续给后面的第3帧、第5帧、第7帧、第9帧中的按钮添加as，as的含义类似，注意gotoAndStop(n);中跳转的位置，这里就不再赘述了。

　　6. 最后还要插入一个图层action，将第1帧到第10全部插入关键帧，给每一帧添加AS:stop();，最后的时间线如图14所示:

图14

　　这样,一款七巧板游戏就制作完成了,游戏的制作过程很简单，所用的Action也很简单，关键还是制作过程中耐心。如果你有兴趣,可以绘制更多的图案出来,那么这款游戏的可玩性就更大了。