基于AS3.0和FlashCS5的拼图游戏设计与开发

陈赵云

摘要：Flash二维动画制作入门容易，但要真正精通很难，关键之一是缺少能够深入学习、实践的参照案例。该文详细介绍了基于ActionScript3.0和FlashCS5的拼图游戏设计与实现全过程，能够为初学者进一步地深入学习提供引导和借鉴。

关键词：ActionScript3.0;FlashCS5;拼图游戏

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）32-0075-03

1 系统功能介绍

本拼图游戏是基于FlashCS5和ActionScript3.0设计，有3*3和4*4两种模式供玩家选择，单击主界面中对应的模式即可进入开始体验。

1）3*3模式即为九宫阁，相对简单，使用代码将原图拆分成9格并随机排列在游戏界面的主体位置，原图被等比例缩放置于游戏界面的右上角，游戏界面中包含游戲说明和返回首页的按钮。

2）4*4模式即为十六宫阁，相对更复杂，使用代码将原图拆分成16格并随机排列在游戏界面的主体位置，原图被等比例缩放置于游戏界面的右上角，游戏界面中同样包含游戏说明和返回首页的按钮。

无论九宫阁还是十六宫阁，右下角都为空，并且原图的右下角区块被放置在游戏整体界面的最右下方，当完成拼图时，单击最右下角的区块可以检验游戏是否完成。

2 系统功能实现

1）打开FlashCS5软件，执行文件-->新建，在弹出的对话框中设置舞台大小为800*600，然后选择ActionScript3.0，在新建的文档中把准备好的图片素材导入库面板中备用。

2）新建一名为result的影片剪辑备用。影片剪辑的图层1第一帧为空白关键帧，第2帧到第20帧设计一个“恭喜过关”由小到大的形变动画;在影片剪辑的图层2第一帧和第二十帧输入stop（）;

3）双击时间轴的图层1改名为文本图像，单击该图层的第一个关键帧，用文本工具在舞台上输入“拼图游戏”并设置合适的大小和位置;在第二帧中借助标尺在右侧200像素的上方插入图片素材的原图，将result影片剪辑放在原图的下方并命名为mcResult，最后在影片剪辑下方添加游戏说明。

4）制作Easy、Hard和Return三个按钮元件，按钮元件的文本分别是“开始3*3”“开始4*4”和“返回首页”。

5）新建按钮图层，第一帧中将Easy和Hard两个按钮放在文本“拼图游戏”下方合适的位置，分别命名为btnEasy和btnHard;第二帧中将Return按钮元件置于游戏说明上方合适的位置，命名为btnReturn。

6）新建名为AS的图层，在第一帧实现的具体功能为：进入游戏先停留在主界面;玩家选择模式后进入对应的模式开始游戏，详细代码如下：

stop（）;

var hNum：int=0，vNum：int=0;

btnEasy.addEventListener（MouseEvent.CLICK，toStart）;

function toStart（e：Event）{

hNum=vNum=3;

gotoAndStop（2）;

}

btnHard.addEventListener（MouseEvent.CLICK，toPlay）;

function toPlay（e：Event）{

hNum=vNum=4;

gotoAndStop（2）;

}

7）在AS图层的第二帧，实现单击Return按钮返回主界面，详细代码如下：

btnReturn.addEventListener（MouseEvent.CLICK，goBack）;

function goBack（e：Event）{

prevFrame（）; }

8）新建一名为main的影片剪辑，该影片剪辑的主要功能是：根据玩家选择的模式代码实现3*3和4*4两种模式分割原图并打乱顺序;响应鼠标单击事件移动拼图;游戏结束时检验是否赢得游戏。在影片剪辑图层1的第一帧中输入如下代码：

import flash.events.Event;

import flash.display.Loader;

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.geom.Rectangle;

import flash.geom.Point;

import flash.display.Sprite;

import flash.display.MovieClip;

import flash.utils.Timer;

import flash.events.MouseEvent;

var w：int，h：int;

var bmArray：Array=new Array（）;//定义一个用于存放图像的一维数组

var endbmArray：Array=new Array（）;//拼图结束进行检查时的状态数组

var theLastBlock：Object=new Object（）;//定义空白的区块

theLastBlock.oldLocX=parent["hNum"]-1;//空白区块水平方向

theLastBlock.oldLocY=parent["vNum"]-1;//空白區块垂直方向

fscommand（"AllowScale"，"false"）;

var loaderPic：Loader=new Loader（）;

loaderPic.contentLoaderInfo.addEventListener（Event.COMPLETE，wellDone）;

loaderPic.load（new URLRequest（"SC1.jpg"））;

function wellDone（e：Event）{

var czyPic：Bitmap=Bitmap（e.target.loader.content）;

w=czyPic.width/parent["hNum"];

h=czyPic.height/parent["vNum"];

for（var a：int=0;a

for（var b：int=0;b

var nbMap：Bitmap=new Bitmap（new BitmapData（w，h））;

nbMap.bitmapData.copyPixels（czyPic.bitmapData，new Rectangle（a*w，b*h，w，h），new Point（0，0））;

var czySprite：Sprite=new Sprite;

czySprite.addChild（nbMap）;

if（a==parent["hNum"]-1 && b==parent["vNum"]-1）{

czySprite.x=（b+1）*w;

czySprite.y=a*h;

czySprite.addEventListener（MouseEvent.CLICK，gameResult）;

addChild（czySprite）;

}

else{

var bmObject：MovieClip=new MovieClip（）;

bmObject.oldLocX=a;

bmObject.oldLocY=b;

bmObject.addChild（czySprite）;

bmArray.push（bmObject）;

}

}

bmArray.sort（function（）{return Math.random（）>0.5？1：-1}）;

}

//用循环将数组元数添加到界面

for（a=0;a

for（b=0;b

if（a==parent["vNum"]-1 && b==parent["hNum"]-1）{

theLastBlock.LocX=a;

theLastBlock.LocY=b;

}

else{

var nbmObject：MovieClip=MovieClip（bmArray.pop（））;

nbmObject.LocX=b;

nbmObject.LocY=a;

nbmObject.x=b*w;

nbmObject.y=a*h;

endbmArray.push（nbmObject）;

nbmObject.addEventListener（MouseEvent.CLICK，bmClick）;

addChild（nbmObject）;

}

}

}

}

function bmClick（e：Event）{

var clickObj：MovieClip=MovieClip（e.currentTarget）;

if （clickObj.LocX==theLastBlock.oldLocX && clickObj.LocY==theLastBlock.oldLocY-1） {

moveObject（clickObj，"x"，-h）;

clickObj.LocY+=1;

theLastBlock.oldLocY-=1;

} else if （clickObj.LocX==theLastBlock.oldLocX && clickObj.LocY==theLastBlock.oldLocY+1） {

moveObject（clickObj，"x"，h）;

clickObj.LocY-=1;

theLastBlock.oldLocY+=1;

} else if （clickObj.LocX==theLastBlock.oldLocX-1 && clickObj.LocY==theLastBlock.oldLocY） {

moveObject（clickObj，"y"，-w）;

clickObj.LocX+=1;

theLastBlock.oldLocX-=1;

} else if （clickObj.LocX==theLastBlock.oldLocX+1 && clickObj.LocY==theLastBlock.oldLocY） {

moveObject（clickObj，"y"，w）;

clickObj.LocX-=1;

theLastBlock.oldLocX+=1;

} else {

return null;

}

}

function moveObject（bmObj，vx，vw） {

var timer：Timer=new Timer（50，10）;//定义计时器timer，延迟50ms，重复10次

timer.addEventListener（"timer"，timerHandler）;

timer.start（）;

function timerHandler（ev：TimerEvent）{

if （vx=="y"） {

bmObj.x -= vw/10;

} else if （vx=="x"） {

bmObj.y -= vw/10;

}

}

}

function gameResult（eve：MouseEvent）{

moveObject（eve.target，"y"，w）;

for （var num：uint=0; num

if （endbmArray[num].oldLocX==endbmArray[num].LocX && endbmArray[num].oldLocY==endbmArray[num].LocY） {

} else {

moveObject（eve.target，"y"，-w）;

return;

}

}

MovieClip（this.parent）.mcResult.gotoAndPlay（2）;

}

9）新建一名為主影片剪辑的图层，将main影片剪辑放在该图层的第二帧，保存Flash文档并Ctrl+Enter测试，效果如图1所示。

3 注意事项

1）图片素材源文件一定要和Flash源文档放在同一目录下;2）要掌握在舞台的影片剪辑中控制舞台上其他元素时的相对路径法，如：MovieClip（this.parent）.mcResult.gotoAndPlay（2）。就是通过舞台上一个影片剪辑来控制舞台上的另一影片剪辑。

参考文献：

[1] 胡国钰.Flash经典课堂[M].北京：清华大学出版社，2013.

[2] 刘彩虹，唐琳.Flash动画设计与制作项目化教程[M].北京：清华大学出版社，2017.

[3] 张建琴，官彬彬.Flash CS6动画制作案例教程[M].北京：清华大学出版社，2018.

【通联编辑：张薇】