基于AS3.0和FlashCS5的拼圖游戲設(shè)計(jì)與開(kāi)發(fā)

陳趙云

摘要：Flash二維動(dòng)畫制作入門容易，但要真正精通很難，關(guān)鍵之一是缺少能夠深入學(xué)習(xí)、實(shí)踐的參照案例。該文詳細(xì)介紹了基于ActionScript3.0和FlashCS5的拼圖游戲設(shè)計(jì)與實(shí)現(xiàn)全過(guò)程，能夠?yàn)槌鯇W(xué)者進(jìn)一步地深入學(xué)習(xí)提供引導(dǎo)和借鑒。

關(guān)鍵詞：ActionScript3.0;FlashCS5;拼圖游戲

中圖分類號(hào)：TP311 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）32-0075-03

1 系統(tǒng)功能介紹

本拼圖游戲是基于FlashCS5和ActionScript3.0設(shè)計(jì)，有3*3和4*4兩種模式供玩家選擇，單擊主界面中對(duì)應(yīng)的模式即可進(jìn)入開(kāi)始體驗(yàn)。

1）3*3模式即為九宮閣，相對(duì)簡(jiǎn)單，使用代碼將原圖拆分成9格并隨機(jī)排列在游戲界面的主體位置，原圖被等比例縮放置于游戲界面的右上角，游戲界面中包含游戲說(shuō)明和返回首頁(yè)的按鈕。

2）4*4模式即為十六宮閣，相對(duì)更復(fù)雜，使用代碼將原圖拆分成16格并隨機(jī)排列在游戲界面的主體位置，原圖被等比例縮放置于游戲界面的右上角，游戲界面中同樣包含游戲說(shuō)明和返回首頁(yè)的按鈕。

無(wú)論九宮閣還是十六宮閣，右下角都為空，并且原圖的右下角區(qū)塊被放置在游戲整體界面的最右下方，當(dāng)完成拼圖時(shí)，單擊最右下角的區(qū)塊可以檢驗(yàn)游戲是否完成。

2 系統(tǒng)功能實(shí)現(xiàn)

1）打開(kāi)FlashCS5軟件，執(zhí)行文件-->新建，在彈出的對(duì)話框中設(shè)置舞臺(tái)大小為800*600，然后選擇ActionScript3.0，在新建的文檔中把準(zhǔn)備好的圖片素材導(dǎo)入庫(kù)面板中備用。

2）新建一名為result的影片剪輯備用。影片剪輯的圖層1第一幀為空白關(guān)鍵幀，第2幀到第20幀設(shè)計(jì)一個(gè)“恭喜過(guò)關(guān)”由小到大的形變動(dòng)畫;在影片剪輯的圖層2第一幀和第二十幀輸入stop（）;

3）雙擊時(shí)間軸的圖層1改名為文本圖像，單擊該圖層的第一個(gè)關(guān)鍵幀，用文本工具在舞臺(tái)上輸入“拼圖游戲”并設(shè)置合適的大小和位置;在第二幀中借助標(biāo)尺在右側(cè)200像素的上方插入圖片素材的原圖，將result影片剪輯放在原圖的下方并命名為mcResult，最后在影片剪輯下方添加游戲說(shuō)明。

4）制作Easy、Hard和Return三個(gè)按鈕元件，按鈕元件的文本分別是“開(kāi)始3*3”“開(kāi)始4*4”和“返回首頁(yè)”。

5）新建按鈕圖層，第一幀中將Easy和Hard兩個(gè)按鈕放在文本“拼圖游戲”下方合適的位置，分別命名為btnEasy和btnHard;第二幀中將Return按鈕元件置于游戲說(shuō)明上方合適的位置，命名為btnReturn。

6）新建名為AS的圖層，在第一幀實(shí)現(xiàn)的具體功能為：進(jìn)入游戲先停留在主界面;玩家選擇模式后進(jìn)入對(duì)應(yīng)的模式開(kāi)始游戲，詳細(xì)代碼如下：

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圖層的第二幀，實(shí)現(xiàn)單擊Return按鈕返回主界面，詳細(xì)代碼如下：

btnReturn.addEventListener（MouseEvent.CLICK，goBack）;

function goBack（e：Event）{

prevFrame（）; }

8）新建一名為main的影片剪輯，該影片剪輯的主要功能是：根據(jù)玩家選擇的模式代碼實(shí)現(xiàn)3*3和4*4兩種模式分割原圖并打亂順序;響應(yīng)鼠標(biāo)單擊事件移動(dòng)拼圖;游戲結(jié)束時(shí)檢驗(yàn)是否贏得游戲。在影片剪輯圖層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（）;//定義一個(gè)用于存放圖像的一維數(shù)組

var endbmArray：Array=new Array（）;//拼圖結(jié)束進(jìn)行檢查時(shí)的狀態(tài)數(shù)組

var theLastBlock：Object=new Object（）;//定義空白的區(qū)塊

theLastBlock.oldLocX=parent["hNum"]-1;//空白區(qū)塊水平方向

theLastBlock.oldLocY=parent["vNum"]-1;//空白區(qū)塊垂直方向

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}）;

}

//用循環(huán)將數(shù)組元數(shù)添加到界面

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）;//定義計(jì)時(shí)器timer，延遲50ms，重復(fù)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測(cè)試，效果如圖1所示。

3 注意事項(xiàng)

1）圖片素材源文件一定要和Flash源文檔放在同一目錄下;2）要掌握在舞臺(tái)的影片剪輯中控制舞臺(tái)上其他元素時(shí)的相對(duì)路徑法，如：MovieClip（this.parent）.mcResult.gotoAndPlay（2）。就是通過(guò)舞臺(tái)上一個(gè)影片剪輯來(lái)控制舞臺(tái)上的另一影片剪輯。

參考文獻(xiàn)：

[1] 胡國(guó)鈺.Flash經(jīng)典課堂[M].北京：清華大學(xué)出版社，2013.

[2] 劉彩虹，唐琳.Flash動(dòng)畫設(shè)計(jì)與制作項(xiàng)目化教程[M].北京：清華大學(xué)出版社，2017.

[3] 張建琴，官彬彬.Flash CS6動(dòng)畫制作案例教程[M].北京：清華大學(xué)出版社，2018.

【通聯(lián)編輯：張薇】