“龍曦”網頁游戲軟件的開發

朱詩生，李國明

（汕頭大學計算機系，廣東汕頭515063）

Web2.0技術以及基于Web2.0的Rich Internet Application（RIA）平臺的發展促進了網頁游戲的開發，綜合使用網頁游戲技術來設計更好的網頁游戲成為目前的熱點。介紹了當前網頁游戲技術及其發展，對常用的網頁游戲開發工具與技術進行了分析比較。最后就“龍曦”網頁游戲軟件的開發設計進行了分析討論。

1 網頁游戲

網頁游戲又叫無端網游，簡稱Web游戲。其特點是不需要象傳統游戲那樣，需要下載客戶端軟件，而僅利用瀏覽器平臺運行游戲[1]。Flash技術的出現促進了網頁游戲的流行，特別是豐富互聯網應用技術——RIA技術，為網游提供了豐富的表現手段。網頁游戲具有如下特點：1）瘦客戶端；2）可同時進行IM聊天；3）電腦配置要求低；4）“綠色”游戲，不需要對電腦添加任何信息；5）支持多平臺Windows、Linux、Mac等。目前網頁游戲已成為游戲的主流。

網頁游戲分為兩種：低端網頁游戲和高端網頁游戲。低端網頁游戲由網頁語言PHP/ASP/JSP/.net/JavaScript/Vbscript等軟件開發，界面比較原始，游戲時與玩家的交互需通過瀏覽器刷屏實現。高端網頁游戲由Flash、Flex和Java等軟件開發，游戲可在無刷屏的情況下實現玩家與游戲的交互，能夠實現肥客戶端網絡游戲的畫面，支持多媒體。

2 網頁游戲的開發技術及比較

2.1 開發技術

網頁游戲開發技術有許多，但是常用的開發工具和技術主要有以下幾個。

1）ASP技術Active Server Page（ASP）意為“動態服務器頁面”。ASP是微軟公司開發用來代替CGI腳本程序的編程工具，常用于設計動態網站。ASP腳本集成于HTML中，無需編譯即可直接解釋執行、獨立于瀏覽器（能解釋HTML碼的瀏覽器即可瀏覽ASP網頁）、保護源碼（ASP腳本在服務器上執行，傳到瀏覽器端的只是ASP執行結果所生成的常規HTML代碼）。

2）PHP技術Hypertext Preprocessor（PHP）意為“超級文本預處理語言”。PHP是一種在服務器端執行的嵌入HTML文檔的腳本語言，風格類似C語言，應用廣泛。PHP與CGI或Perl相比，能更快速地執行動態網頁。PHP是將程序嵌入到HTML文檔中去執行，跨平臺性強，程序開發快，執行效率高，可編譯以達到加密和優化代碼，支持幾乎所有流行的數據庫以及操作系統。

3）Ajax技術[1]Asynchronous javascript and xml（Ajax）意為“異步JavaScript和XML”。Ajax是一種創建交互式網頁應用的網頁開發技術，它不是一個新的編程語言，而是一個編程技術。Ajax的最大優點就是能在不刷新整個頁面的前提下更新數據，使得Web應用程序更為迅捷地響應用戶的交互需求[2]。

4）Flex技術[3]Flex是Adobe公司最新的服務器端產品。該技術提供了一個新的、基于標準的語言和編程模型，其編程模型支持常用的設計模式，能夠使企業創建許多有吸引力的、交互的快速應用，增強了用戶對網頁的體驗。傳統網頁游戲開發的局限是表現層受到一定的約束，而Flex技術能輕松地解決這一技術難題。網游Small World就是基于Flex技術開發的。

5）JSP技術Java Server Pages（JSP）是一種動態網頁技術標準，它可在傳統的網頁HTML文件（*.htm，*.html）中插入Java程序段和JSP標記，其生成內容的邏輯被封裝在標識和JavaBeans組件中，所有的腳本在服務器端運行。可重用的組件（JavaBeans或者Enterprise JavaBeansTM組件）能夠執行應用程序所要求的更為復雜的處理。由于Java在移植性、擴展性、多線程方面的特點使它成為目前許多網頁游戲的開發語言。由Java技術開發的高端網頁游戲，能處理各類與服務器的交互和復雜圖形，開發大型網絡游戲。目前國內網游《傾城》就是一款基于Java語言開發的游戲。

2.2 開發技術比較

前面介紹了5種常用的網頁游戲開發技術，由于Flex技術[4]與Ajax技術比較，Flex處理數據快且能很好地支持流媒體技術[5]，所以開發者更喜歡使用Flex技術來進行網頁的設計。因此這里只對其他4種開發技術進行比較，如表1所示。

表1 常用網頁游戲開發技術比較Tab.1Comparison of commonly used Web game development technology

3 “龍曦”網頁游戲軟件的開發

3.1 游戲的任務

每個網游都有不同的故事內容，游戲的任務按內容來分，一般有打怪，收集，煅造，探索，戲話，送信，護送等類型。按重要性來分，有主線任務和支線任務，重復任務或不重復任務，一對一和一對多任務等類型。一個完整任務包括“觸發→執行→完成”3個步驟。

“龍曦”網頁游戲的任務就是把敵方恐龍怪物清除并獲得相應的獎勵。首先我們跟None Player Character（NPC）對話并接受該任務，接著我們就尋找任務里怪物出現的地方，玩家角色使用弓箭拉弓對怪物進行傷害，然后把它清除，最后玩家對NPC對話完成該任務并獲得相應的獎勵。

3.2 游戲的功能層次

“龍曦”網頁游戲的設計分為3個層次[6]，即用戶界面層、邏輯處理層和數據層。用戶界面層由聊天模塊，游戲界面模塊，玩家信息模塊組成，這些模塊受游戲界面引擎控制。邏輯處理層是游戲運行的核心，主要完成網頁端與服務器之間的數據交換和游戲玩法運算[7]。數據層由玩家人物數據和配罝等組成。

首先，玩家使用瀏覽器（Client端）訪問服務器資源的網頁服務器，再通過網頁游戲自定義的不同方法訪問Web游戲服務器（Server端）[8]。在Web游戲服務器中，從上至下有網頁服務器、游戲邏輯服務器、數據庫服務器。各服務器通過接口實現連接和服務。最后由游戲邏輯服務器執行玩家所要求的操作，而數據庫服務器為玩家提供游戲數據。圖1是“龍曦”網頁游戲的B/S架構。

圖1 “龍曦”網頁游戲的B/S架構Fig.1B/S architecture of“Longxi”Web game

“龍曦”網頁游戲的數據傳遞采用消息包封裝。瀏覽器端每完成一個特定事件，該事件涉及的角色及有關數據將封裝成信息包，從客戶端提交給服務器。如果存在多個客戶端同時與一個服務器交互信息，則采用線程間通信。服務器的每個線程都與一個客戶端的進程進行通信，任務并發處理。玩家的經驗數據可采用緩存機制進行處理，并定時將內存數據存入數據庫。

3.3 游戲的數據結構和數據通信

在網游里需要使用數據結構來創建不同類型的人物（如玩家、怪物、商人等）移動，攻擊行為等。而在地圖方面，需要使用圖的數據結構來把地圖上的每個節點連接起來，地圖坐標是一個二維數組[9]。實現游戲任務的數據結構、算法的合理性往往決定游戲的成敗。目前游戲通常使用的算法有：A*算法，貪婪算法，遺傳算法，排序算法等。“龍曦”網頁游戲建立了玩家角色和怪物的數據結構。玩家的排名使用了泡沫排序法，怪物跌倒率使用了概率隨機算法。

網頁游戲和傳統游戲對網絡通信的需求都較大。傳統游戲一般使用Socket（套接字）實現通信，而網頁游戲則相對靈活些，既可用傳輸層Socket進行通信，也可用應用層Hypertext Transmission Protocol（Http）協議像瀏覽網頁交換數據方式進行通信。ActionScript就同時支持上述兩種方式。

由于“龍曦”網游采用了Flex技術，消息數據必須封裝成ActionScript Messaging Format（AMF）格式[5]。因篇幅有限略去通過Transfer Control Protocol/Internet Protocol（TCP/IP）協議實現Server端和Web端建立連接的過程。

3.4 游戲的畫面層管理

“龍曦”網游使用Flash來制作動畫（swf格式），然后由Flex通過ActionScript實現調用，放到網頁上展示。由于Flash制作的動畫是2D的，所以游戲每增加（刪除，移動）一個對象，就必須考慮應該把對象放到哪一個層，這就引出一個游戲畫面層管理的問題。

“龍曦”網游使用ActionScript提供的功能來實現畫面層的管理。使用ActionScript的Sprite類來存儲層，在New Container基礎上通過addchild（New Container）便可建立新層，新層代表上層，層數越高，離用戶越近。使用ActionScript Application Programming Interface（API）getchild（）的方法來獲取某層的對象，并將對象移動到某一層，或者把層刪除。例如當角色放弓箭時，將會透過管理層放在背景層之上，才能使用戶看清楚畫面。圖2給出了“龍曦”網頁游戲截圖。

圖2 “龍曦”網頁游戲截圖Fig.2Screenshot of“Longxi”Web game

3.5 游戲的處理流程

圖3是“龍曦”網頁游戲的處理流程。

圖3 “龍曦”處理流程Fig.3Processes of“Longxi”

下面只給出一段實現接收游戲動作并響應處理的代碼段。其中fooCommand函數的用途是將動作事件數據發送給服務器，而fooGetData函數的用途是從服務器獲取數據并進行處理。

例如：若獲取的數據是“FIRE+ ”，那么就調用FireAction（）函數，其效果就是在界面層可看到角色攻擊的動作。

…

if（sMsg.match（“FIRE”+ ））//判斷事件動件角色龍是否FIRE

{ActionState=true；FireAction（）；}//發送FireAction處理，游戲邏輯處理

if（sMsg.match（“STATE”+ ））//判斷事件動件角色龍狀態是否變化

{ActionState=true；RoleStateAction（）；}//發送龍狀態處理，游戲邏輯處理

fooShowMsg（sMsg）；//判斷是否為聊天信息

}

private var ActionState:Boolean=false；

////////////////////////////收到服務器的數據////////////////////////////////

public function fooShowMsg（msg:String）:void{//接收服務器的數據

var sTemp:String=msg_box.text；//保存聊天內容數據

if（ActionState==false）//判斷龍狀態是否改變

{msg_box.text=“收到”+msg+’ ’+sTemp；}//把聊天內容保存在聊天框上

else{ActionState=false；}

}

////////////////////////////發送數據到服務器//////////////////////////////

public function fooCommand（sMsg:String）:void{//發送數據到服務器

if（ip_text.length＞1）//判斷是否對某用戶聊天

{

sMsg=ip_text.text+':'+sMsg；//在聊天框上顯示聊天內容}else{

sMsg=‘:’+sMsg；}//向所有在線用戶發送聊天內容

var bMsg:ByteArray=new ByteArray（）；//新建一個ByteArray存放數據

bMsg.writeUTFBytes（sMsg+‘ ’）；//以utf－8格式傳數據避免中文亂碼

oSocket.writeBytes（bMsg）；//寫入Socket的緩沖區

oSocket.flush（）；//調用flush方法發送信息

}

4 結束語

“龍曦”網頁游戲使用了當今流行的Flex和Flash等技術。所以使用“龍曦”網頁游戲，不需要下載客戶端，操作簡單，交互效果好。特別是在與服務器的通信中，客戶端能夠在不刷屏的狀態下實現網頁局部信息的更新，極大地提高了用戶的體驗。

[1]佚名.Asynchronous javaScript and XML[EB/OL].[2011].http://baike.baidu.com/view/4675799.htm.

[2]Wikipedia.網頁游戲[EB/OL].[2011－03－25].http://en.wikipedia.org/wiki/Web_game.

[3]劉慶.Flex開發入門[EB/OL].[2009－01－07].http://www.ibm.com/developerworks/cn/web/wa－lo－flexdev/.

[4]姜天格.Flex3企業級Web應用系統設計與實現[M].北京：機械工業出版社，2008:60－65.

[5]楊占坡，楊銘，翁穎.Flex3 RIA開發詳解與精深實踐[M].北京：清華大學出版.2009:230－231.

[6]劉璐.基于Flex的網頁游戲的研究與設計[D].北京：北京化工大學，2009.

[7]顧漢杰，沈國珍，郭彩虹.基于Flex的教育類網頁游戲設計與實現[J].現代教育技術，2010，20（1）：65－68.GU Han-jie，SHEN Guo-zhen，GUO Cai-hong.An educational webgame design and realization based on Flex[J].Modern Educational Technology，2010，20（1）:65－68.

[8]鄧麗，董瑋.網絡游戲服務器端研究與設計[J].軟件導刊，2009，8（5）：135－137.DENG Li，DONG Wei.Research and design of network game server programming[J].Software Guide，2009，8（5）:135－137.

[9]王育文.網絡游戲開發的靈魂——數據結構與算法[J].電腦報，2007（17）:63－65.WANG Yu-wen.The soul of the network game developmentdata structure and algorithms[J].Computer News，2007（17）:63－65.