楊孟姣

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

0 引言

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

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

1.1 游戲開發(fā)流程及機制

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

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

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

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

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

1.2 游戲制作工具

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

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

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

2.1 游戲元素的制作

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

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

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

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

2.3 游戲場景制作

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

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

圖2 游戲開始界面

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

圖3 游戲進行中界面

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

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

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

2.4 游戲動畫制作

（1）爆炸點類的制作

爆炸點類應(yīng)該盡可能使自包含的。我們在游戲中只用一行代碼就可以使用爆炸點。所以，類本身必須負責創(chuàng)建文本和Sprite，設(shè)置元件的動畫，在完成后將自身完全移除。一開始爆炸點很小，然后慢慢變大；同時，爆炸點一開始是完全不透明的，然后慢慢消逝，變成透明。整個過程在一秒內(nèi)完成。主要代碼如下：

（2）圖形移動動畫的制作

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

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

3.1 游戲動畫制作

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

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

3.2 游戲交互設(shè)計

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

圖6 圖形交換的過程

當圖形的位置交換后，網(wǎng)格需要更新。因為這是每個圖形都有了正確的行和列的值，我們只需要將圖形放在網(wǎng)格中正確的位置：

交換是完全可以進行反向操作的，因為常常需要進行反向操作。事實上，一直到交換完成，我們都不知道這次交換能否完成。所以，我們經(jīng)常需要交換團，查看匹配，若沒有匹配就交換會原先的狀態(tài)。

3.3 尋找可能的移動

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

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

圖7 尋找匹配

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

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

4.1 游戲的測試

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

圖8 匹配條件

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

4.2 游戲的發(fā)布

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

5 結(jié)語

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