基于Flash 的“同色消除”游戲設(shè)計(jì)與實(shí)現(xiàn)

楊孟姣

（湖南省石門(mén)縣第一中學(xué)，常德415300）

0 引言

網(wǎng)頁(yè)游戲（Web Game 或Browser Game）是指基于網(wǎng)站開(kāi)發(fā)技術(shù)，以標(biāo)準(zhǔn)HTTP 協(xié)議為基礎(chǔ)傳輸形式的無(wú)客戶端或基于瀏覽器內(nèi)核的微客戶端游戲，因其不需要下載安裝客戶端，與大型社區(qū)游戲相比更為便捷等優(yōu)勢(shì)，深受年輕一代的熱捧。隨著動(dòng)畫(huà)技術(shù)的不斷發(fā)展，網(wǎng)絡(luò)傳播速度越來(lái)越快，F(xiàn)lash 游戲已經(jīng)成為現(xiàn)在人生活?yuàn)蕵?lè)，消遣和緩解壓力非常重要的一款網(wǎng)頁(yè)游戲[1]。本文正是基于這個(gè)背景，采用Flash CS5 并結(jié)合ActionScript 3.0，實(shí)現(xiàn)了一個(gè)益智類闖關(guān)類“同色消除”游戲。

1 游戲的整體設(shè)計(jì)

1.1 游戲開(kāi)發(fā)流程及機(jī)制

設(shè)計(jì)游戲前需要定好一個(gè)完整的游戲規(guī)則，這樣才能使游戲設(shè)計(jì)過(guò)程順利進(jìn)行，達(dá)到事半功倍的效果。游戲制作流程如圖1 所示。

游戲機(jī)制即游戲的操控方式。通常包括：游戲如何運(yùn)行，玩家在游戲中可以做什么和怎么做，玩家會(huì)使用那些命令以及這些命令將產(chǎn)生怎樣的結(jié)果，玩家如何從一個(gè)模式轉(zhuǎn)換成另一個(gè)模式，以及在每個(gè)模式中的游戲如何控制等。

游戲規(guī)則是游戲的可玩性及在游戲設(shè)計(jì)時(shí)設(shè)定的元素需要符合的要求，是整個(gè)游戲的靈魂。同色消除游戲的規(guī)則相對(duì)簡(jiǎn)單，主要有：在一塊8×8 的板上，隨機(jī)的放置著7 種圖形。玩家通過(guò)單擊任何水平或垂直方向上相鄰的兩個(gè)圖形，將它們交換。如果交換后能將3 個(gè)或3 個(gè)以上同一類型的圖形排成一條直線，那么允許交換。連成直線的圖形都被移除后，這些圖形上面的那些都會(huì)掉下來(lái)，填補(bǔ)空缺，同時(shí)玩家得到相應(yīng)分?jǐn)?shù)。玩家需要在規(guī)定時(shí)間內(nèi)達(dá)到一定分?jǐn)?shù)，才能通向下一關(guān)，否則提示超時(shí)結(jié)束游戲。游戲一共分為5關(guān)，每關(guān)限時(shí)90 秒，達(dá)到該關(guān)卡要求的分?jǐn)?shù)即可晉級(jí)。獎(jiǎng)勵(lì)玩家的分?jǐn)?shù)則取決于匹配中的圖形數(shù)量。若一次有x（x≥3，x∈N）個(gè)圖形匹配消除，那就表示玩家可得（x-1）50x 分。

圖1 游戲開(kāi)發(fā)流程

設(shè)定好游戲規(guī)則后，就要著手開(kāi)始進(jìn)行游戲素材的搜集、整理、歸類、編輯的工作。主要包括圖形、圖像、視頻、聲音、程序等，這期間就需要用到很多的工具來(lái)靠人員分工配合完成。

1.2 游戲制作工具

目前游戲制作的基本工具有Flash、Java、Visual C++、RPG Maker 和Game Maker 等。通?？梢愿鶕?jù)游戲的規(guī)模、應(yīng)用模式等因素綜合考慮開(kāi)發(fā)技術(shù)。ActionScript 是一種基于ECMAScript 的腳本語(yǔ)言，可用于編寫(xiě)Adobe Flash 動(dòng)畫(huà)和應(yīng)用程序[2]。

本游戲使用的開(kāi)發(fā)工具為Adobe Flash Professional CS 5.5。輔助工具有Adobe Photoshop CS5、格式工廠3.0.1；程序語(yǔ)言為ActionScript 3.0。

2 游戲的開(kāi)發(fā)制作

2.1 游戲元素的制作

同色消除游戲?yàn)闊o(wú)劇情益智類Flash 小游戲，在游戲制作過(guò)程中，只需要制作一些圖形按鈕即可，并不需要將精力過(guò)多的放在游戲元素的設(shè)計(jì)上。制作出來(lái)的圖形可以通過(guò)轉(zhuǎn)換為元件的方式實(shí)現(xiàn)按鈕功能。

2.2 影片的創(chuàng)建和設(shè)置

Flash 軟件中新建一個(gè)文檔，命名為“MatchThree”并保存。在“文檔屬性”面板中調(diào)整其屬性。設(shè)定游戲畫(huà)面大小為550×400 像素，并將背景色設(shè)置為#000033，幀頻為60fps。在圖層面板中新建若干個(gè)圖層，用來(lái)繪制場(chǎng)景中的不同組成部分，在繪制的過(guò)程中可將圖層按其內(nèi)容來(lái)命名，以方便日后查找。為了不影響影片的整體效果，各圖層的制作過(guò)程，可通過(guò)修改visible 和lock 屬性來(lái)編輯各個(gè)圖層。

游戲的狀態(tài)會(huì)存儲(chǔ)在5 個(gè)不同的變量中。第一個(gè)是grid，它包含了對(duì)所有圖形的引用。它其實(shí)是一個(gè)數(shù)組的數(shù)組。所以grid 的每一個(gè)元素都是一個(gè)數(shù)組，包含了8 個(gè)Piece 影片剪輯的引用。因此grid 是一個(gè)8×8 的嵌套數(shù)組。然后我們就可以簡(jiǎn)單地使用grid[x][y]語(yǔ)法來(lái)訪問(wèn)所有的圖形。

2.3 游戲場(chǎng)景制作

由于同色消除游戲無(wú)情節(jié)鋪墊，所以場(chǎng)景設(shè)置以簡(jiǎn)潔大方、不易造成玩家疲勞為主。交互式Flash 游戲由場(chǎng)景組成，我們要設(shè)定若干個(gè)場(chǎng)景才能組成一個(gè)完整的Flash 游戲。本游戲設(shè)置了三種場(chǎng)景。

（1）游戲開(kāi)始界面。通過(guò)背景和音效的導(dǎo)入、開(kāi)始按鈕的設(shè)置及必要文字處理，制作出游戲開(kāi)始頁(yè)面。將成功消除的音效命名為RightSound，背景音效命名為BgSound。如圖2 所示。

圖2 游戲開(kāi)始界面

（2）游戲進(jìn)行中界面。在本界面中，要實(shí)現(xiàn)設(shè)置游戲變量、設(shè)置游戲網(wǎng)格、添加游戲圖形這三個(gè)功能。如圖3 所示。

圖3 游戲進(jìn)行中界面

（3）游戲結(jié)束頁(yè)面。游戲在超時(shí)或者通關(guān)時(shí)結(jié)束，此時(shí)游戲提示Game Over 且時(shí)間、分?jǐn)?shù)和游戲版面清零。如圖4 和圖5 所示。

圖4 挑戰(zhàn)失敗界面

圖5 成功通關(guān)界面

2.4 游戲動(dòng)畫(huà)制作

（1）爆炸點(diǎn)類的制作

爆炸點(diǎn)類應(yīng)該盡可能使自包含的。我們?cè)谟螒蛑兄挥靡恍写a就可以使用爆炸點(diǎn)。所以，類本身必須負(fù)責(zé)創(chuàng)建文本和Sprite，設(shè)置元件的動(dòng)畫(huà)，在完成后將自身完全移除。一開(kāi)始爆炸點(diǎn)很小，然后慢慢變大；同時(shí)，爆炸點(diǎn)一開(kāi)始是完全不透明的，然后慢慢消逝，變成透明。整個(gè)過(guò)程在一秒內(nèi)完成。主要代碼如下：

（2）圖形移動(dòng)動(dòng)畫(huà)的制作

利用每個(gè)圖形的row 和col 動(dòng)態(tài)屬性和其自身的x和y 屬性，經(jīng)過(guò)spacing、offsetX 和offsetY 這些變量的換算，可以得出圖形被移動(dòng)到新位置的數(shù)值。例如，在第3 列的圖形的x 值，就應(yīng)該為3×spacing+offsetX。當(dāng)聽(tīng)被移動(dòng)新的列時(shí)的位置，假設(shè)該圖形的列屬性col 為4，那么新的x 坐標(biāo)就為4×spacing+offsetX。此方法可用在所有需要移動(dòng)的圖形上，甚至不需要預(yù)先設(shè)置圖形的動(dòng)畫(huà)。movePieces 在每次ENTER_FRAME 事件時(shí)都會(huì)調(diào)用，它會(huì)遍歷所有的圖形，檢查它們的行和列的值，決定是否需要改變x 和y 的坐標(biāo)值。

3 基于ActionScript腳本語(yǔ)言的交互實(shí)現(xiàn)

3.1 游戲動(dòng)畫(huà)制作

（1）制作圖形的移動(dòng)動(dòng)畫(huà)。在本游戲中，游戲環(huán)境占據(jù)游戲屏幕大部分面積。畫(huà)面右上角為當(dāng)前分?jǐn)?shù)級(jí)倒計(jì)時(shí)，左上角為音效控制按鈕，右下角為開(kāi)始暫停按鈕。

（2）控制方法簡(jiǎn)介。玩家通過(guò)單擊選中任何水平或垂直方向上相鄰的兩個(gè)圖形，將它們交換，從而達(dá)到消除的目的。若交換后能將3 個(gè)或3 個(gè)以上同一圖形排成一條直線，那么允許交換。連成直線的圖形都被移除，在這些圖形上面的那些都會(huì)掉下來(lái)，填補(bǔ)空缺。

3.2 游戲交互設(shè)計(jì)

當(dāng)玩家單擊了一個(gè)圖形，發(fā)生的情況取決于這是他單擊的第一個(gè)圖形還是第二個(gè)圖形。若是第一個(gè)圖形，那么該圖形被選中。若玩家單擊相同圖形兩次，該圖形被取消選中，玩家回到之前的狀態(tài)。在實(shí)際開(kāi)發(fā)過(guò)程中，我們往往需要將第一個(gè)圖形的位置存儲(chǔ)到臨時(shí)變量中，再交換第一個(gè)圖形和第二個(gè)圖形的位置。交互過(guò)程如圖6 所示。

圖6 圖形交換的過(guò)程

當(dāng)圖形的位置交換后，網(wǎng)格需要更新。因?yàn)檫@是每個(gè)圖形都有了正確的行和列的值，我們只需要將圖形放在網(wǎng)格中正確的位置：

交換是完全可以進(jìn)行反向操作的，因?yàn)槌３Ｐ枰M(jìn)行反向操作。事實(shí)上，一直到交換完成，我們都不知道這次交換能否完成。所以，我們經(jīng)常需要交換團(tuán)，查看匹配，若沒(méi)有匹配就交換會(huì)原先的狀態(tài)。

3.3 尋找可能的移動(dòng)

同色消除游戲有兩個(gè)設(shè)計(jì)難點(diǎn)，其中一個(gè)就是尋找可能的移動(dòng)。尋找可能的移動(dòng)不是直接搜索已經(jīng)連成3連的匹配，而是尋找在進(jìn)行交換后能連成3 連的匹配。簡(jiǎn)單來(lái)說(shuō)，就是搜索整個(gè)游戲面板，嘗試每一種交換（0,0）和（0,1），然后是（1,0）和（2,0），直到結(jié)束。在每次交換后，使用前面的方法來(lái)檢查是否存在匹配。一旦在交換后找到了有效的匹配，就停止尋找，返回true 值。

圖7 展示了兩種模式，還進(jìn)一步劃分成了6 種可能的情況。水平方向上，缺失的小塊能夠從左邊或者右邊填入，而在垂直方向上，能夠從上方或者下方填入。圖中實(shí)心圓表示不動(dòng)的圖形；空心圓表示必須被換入，以完成匹配的圖形；菱形表示為了完成匹配，可能的換入位置。

圖7 尋找匹配

以圖7 中的第一個(gè)模式為例。我們先得到了構(gòu)成匹配的前兩個(gè)點(diǎn)的位置，還有了3 個(gè)可能構(gòu)成匹配的位置，只要它們中有一個(gè)的類型與之前兩個(gè)點(diǎn)的類型相投，就能夠完成一次匹配，得到需要的結(jié)果。將左邊的實(shí)行圓圈的位置標(biāo)記為（0,0），那么與之相鄰的（1,0）位置上的圖形肯定滿足要求。然后，來(lái)考慮3 個(gè)可能的匹配位置（-1，-1），（-2,0），（-1,1），只要有一個(gè)位置上的圖形滿足要求，就能完成匹配。同樣的，匹配也能發(fā)生在出事匹配對(duì)的右邊。右邊的位置為（2,-1），（2,1）和（3,0）。因此，判定工作從一個(gè)起始圖形開(kāi)始。然后它的四周必須有一個(gè)圖形與初始圖形匹配。然后考慮其余6 個(gè)可能完成匹配的位置。圖8 對(duì)此進(jìn)行了展示。圖中（1,0）需要與（0,0）相匹配，6 個(gè)空心菱形的位置中，至少有一個(gè)與（0,0）匹配。

4 游戲的測(cè)試和發(fā)布

4.1 游戲的測(cè)試

游戲測(cè)試作為軟件測(cè)試的一部分，具備了軟件測(cè)試的一切共性。測(cè)試的目的是發(fā)現(xiàn)軟件中存在的缺陷。測(cè)試是需要測(cè)試人員按照產(chǎn)品行為描述來(lái)實(shí)施。產(chǎn)品行為描述可以是書(shū)面規(guī)格說(shuō)明書(shū)、需求文檔、產(chǎn)品文件或是用戶手冊(cè)、源代碼?？偠灾?，測(cè)試就是發(fā)現(xiàn)問(wèn)題并進(jìn)行改進(jìn)，從而提升軟件產(chǎn)品的質(zhì)量[3]。同時(shí)，游戲的特殊性也決定了游戲測(cè)試的特殊性：有傳統(tǒng)軟件測(cè)試和游戲本身的測(cè)試這兩部分組成。游戲測(cè)試主要分為以下幾個(gè)方面：①游戲情節(jié)的測(cè)試；②游戲世界的平衡測(cè)試；③游戲文化的測(cè)試。

圖8 匹配條件

測(cè)試時(shí)利用Flash 自帶的ControllTestMovie 命令來(lái)測(cè)試動(dòng)畫(huà)的執(zhí)行狀況。進(jìn)入測(cè)試模式后，還可以經(jīng)過(guò)監(jiān)視Objects 和Variables 的方式，找出程序中的問(wèn)題。除此之外，為了避免測(cè)試時(shí)的盲點(diǎn)，應(yīng)在多臺(tái)計(jì)算機(jī)上進(jìn)行測(cè)試，多找?guī)孜煌婕覅⒓訙y(cè)試，以便發(fā)現(xiàn)游戲中不易發(fā)現(xiàn)的問(wèn)題，使游戲可以更加完善。

4.2 游戲的發(fā)布

完成創(chuàng)作后，導(dǎo)出swf 文件，該格式可在安裝了Flash Player 的系統(tǒng)中或?yàn)g覽器中播放。

5 結(jié)語(yǔ)

Flash 網(wǎng)頁(yè)游戲術(shù)的核心是資源的動(dòng)態(tài)加載和圖形表現(xiàn)[4]。本文采用ActionScript 腳本語(yǔ)言，設(shè)計(jì)和開(kāi)發(fā)了基于瀏覽器運(yùn)行的Flash 網(wǎng)頁(yè)游戲，主要研究了如何在Flash 中實(shí)現(xiàn)一個(gè)益智闖關(guān)類游戲，突出Flash 游戲的交互性，給玩家一定的趣味性和可玩性，后期將繼續(xù)完善影片中可重用的爆炸點(diǎn)類、游戲操作、關(guān)卡選擇等功能。