基于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.

【通聯編輯：張薇】