怎麼用flash製作簡單拼圖遊戲

可能有很多玩Flash的朋友都曾和我一樣想自己動手製作一個拼圖遊戲，但是苦於不知道實現的方法或不瞭解ActionScript(以下簡稱AS)而心存遺憾。別急,今天小編就告訴你如何利用Flash常用的AS製作一個簡單的拼圖遊戲，小編所説的簡單可不是將圖片簡單的拼湊到一起的那種簡單拼圖啊。

做好的成品如下：大家可以用鼠標將上面的圖像碎片拖到下面的方框內的合適位置，為方便大家找位，遊戲給出了有一定透明度的原圖作為參考。大家可以發現這個遊戲還設計了一個“吸附”功能，能夠讓你將拼圖片輕鬆地整齊排列，同時遊戲還會自動判斷拼圖是否全部正確完成。

　　第一步:圖片的準備工作

既然是拼圖,當然首先就要有圖片了,我找到的是一幅320*240象素的jpg圖片,通過Fireworks將其切割成12塊(每塊80*80px),然後分別保存成12個jpg小圖片備用，名稱最好有一定規律，比如我將他們分別命名為pic1～pic12，當然你也可以利用其他圖象處理工具來實現這一步。

　　第二步:建立Flash文件

打開今天的主角――Flash,通過菜單Modify Document...或Ctrl+J打開Document Properties面板(由於盜匪使用的'是Flash MX,一些快捷鍵可能與Flash 5的有所不同,不過盜匪會盡量給出Flash 5中相應的快捷鍵的,這個在Flash 5中的快捷鍵是Ctrl+M),將畫面大小改為400*600px,其他可以保持默認值。

　　第三步:製作用來判斷位置的Movie Clip

在場景中通過菜單File Import或Ctrl+R導入12塊已經處理好的小圖片,然後按照原圖順序擺放在場景的下半部,選中左上角第一塊,選擇菜單Insert Convert to Symbol或按F8鍵,在彈出的Convert to symbol面板中選擇Movie Clip(以後簡稱MC),控制點選擇在圖片中心(這一點很重要,Flash 5中可能沒有這個選項,不過好在Flash 5的默認值就是中心),name為check1(也可以根據自己的習慣取名),其餘的圖片用同樣的方法處理。

然後選擇菜單Window Properties或Ctrl+F3,打開Properties面板,按順序為這些圖片分別填寫Instance Name為b1～b12,以便以後在Action中調用.選中所有MC(Ctrl+A),將他們的Alpha屬性設置為30%,這樣做只是為了使MC看上去模糊,讓玩家不能清楚地辨認出是哪部分,以增大遊戲難度。

　　第四步:製作用來拖拽的MC

這是比較重要的一步,我們將利用這個MC來實現圖塊的拖拽以及位置的判斷,在這裏我們運用了MC中嵌套Button的方法以實現代碼重用,這是個很重要的方法,希望大家加以重視.

選擇菜單Insert New Symbol...或Ctrl+F8新建Button(以下簡稱BT),取名為button_body,確定後進入編輯界面,在Timeline(時間線)中右鍵單擊Hit幀,在快捷菜單中選擇New Keyframe建立關鍵幀 ,選擇矩形工具(R),繪製一個矩形,選擇選取工具 (V),雙擊矩形,在Properties面板中將寬、高、X座標、Y座標分別設置為80、80、0、0;新建MC 取名button_action,確定後進入MC編輯窗口,Ctrl+L打開Library(庫),將剛剛建立的button_body拖進來,同樣將X、Y座標設置為(0,0).

下面開始為BT(按鈕)添加AS,選中剛才拖進來的button_body,通過菜單Window Actions或F9鍵(Flash 5中為Ctrl+Alt+A)打開Actions面板,利用快捷鍵Ctrl+Shift+E(Flash 5 中為Ctrl+E,前提是選中了Actions面板)轉換到Expert Mode(專家模式,這個模式下編寫AS比較靈活,建議使用),填入下面的代碼:

on (press) {//按下鼠標 　　startDrag(_parent, false, 50, 50, 350, 550);//使圖塊可以在一定範圍內被拖拽 } on (release) {//釋放鼠標 　　stopDrag();//停止拖拽 　　for (i=1; i<=12; i++) {//判斷圖塊所在位置 　　　　if (_parent._x<=eval_r("_root.b"+i)._x+40 and _parent._x>=eval_r("_root.b"+i)._x-40 and _parent._y<=eval_r("_root.b"+i)._y+40 and _parent._y>=eval_r("_root.b"+i)._y-40) { //如果被拖拽的圖塊中心點進入某個判斷位置的MC的範圍內時 　　　　　　_parent._x = eval_r("_root.b"+i)._x;//設置圖塊的座標,使其吸附到相應的位置 　　　　　　_parent._y = eval_r("_root.b"+i)._y; 　　　　} 　　} }

這樣,拖拽組件button_action就製作好了,在下面的製作中將重複用到這個MC.

　　第五步:製作被拖拽的圖塊

新建MC,命名為pic1(這個名稱無關緊要),確定後進入編輯窗口,在Library中將button_action拖入,設置座標為(0,0),再從Library中將最初導入的圖片pic1.jpg拖入,座標(0,0),重複這個步驟,直到所有圖塊都擁有自己相應的MC.

順便再做一個按鈕，命名為button_back,用來在遊戲完成後開始新的遊戲.

　　第六步:遊戲的完成工作

回到場景中,將TimeLine中已存在的層命名為"位置判斷層"，點擊TimeLine左下角的Insert Layer按鈕 ,新建三個層,分別命名為"圖塊層"、"AS層"和"按鈕與提示層".選擇"圖塊層",將Library中的pic1～pic12這幾個MC拖入該層。特別注意:這裏是MC,而不是圖片,我們可以按住Ctrl鍵同時選擇不連續的多個Symbol。按順序在Properties面板中分別填寫Instance Name為p1～p12。

選擇"按鈕與提示層",將第二幀設為關鍵幀(如果你使用的是flash 5請選擇第四幀,並順便用F5將"圖塊層"添加兩幀內容幀),並在Properties面板(flash 5中為Frame面板)中填寫Frame Label為"over",選擇文字工具(A),在中間位置寫入勝利後的提示,如:"Good You Win !!",再拖入button_back到合適位置,並捆綁AS:

on(release){ 　　prevFrame();//回到前一幀,開始新遊戲 　　//Flash 5中應該是gotoAndPlay(1) }

現在進入衝刺階段,選擇"AS層",選擇第一幀,捆綁AS:

stop();//flash 5中請將這句去掉 for (i=1; i<=12; i++) {//遊戲初始化 　　eval_r("p"+i)._x = random(240)+80;//隨即設置圖塊的位置於場景上半部的一定區域內 　　eval_r("p"+i)._y = random(160)+70; } _terFrame = function() { //flash 5中請去掉這句和最後一個"}",將下面的AS捆綁到該層的第二幀,並在第三幀捆綁gotoAnfPlay(2) 　　b = 0; 　　for (j=1; j<=12; j++) { 　　　　if (eval_r("p"+j)._x == eval_r("b"+j)._x and eval_r("p"+j)._y == eval_r("b"+j)._y) { //判斷圖塊是否在正確的位置上,如果是 　　　　　　b += 1;//變量加一 　　　　} 　　} 　　if (b == 12) {//如果所有圖塊的位置都正確 　　　　gotoAndStop("over");//顯示勝利信息 　　} };

至此,拼圖遊戲就製作完成了,趕快Ctrl+Enter測試一下吧!

動動腦筋,還可以為遊戲添上時間限制,加大遊戲的難度,或者在遊戲過程中用一個按鈕來隱藏/顯示測試圖片等