朱詩生，李國明

（汕頭大學(xué)計算機(jī)系，廣東汕頭515063）

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

1 網(wǎng)頁游戲

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

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

2 網(wǎng)頁游戲的開發(fā)技術(shù)及比較

2.1 開發(fā)技術(shù)

網(wǎng)頁游戲開發(fā)技術(shù)有許多，但是常用的開發(fā)工具和技術(shù)主要有以下幾個。

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

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

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

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

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

2.2 開發(fā)技術(shù)比較

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

表1 常用網(wǎng)頁游戲開發(fā)技術(shù)比較Tab.1Comparison of commonly used Web game development technology

3 “龍曦”網(wǎng)頁游戲軟件的開發(fā)

3.1 游戲的任務(wù)

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

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

3.2 游戲的功能層次

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

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

圖1 “龍曦”網(wǎng)頁游戲的B/S架構(gòu)Fig.1B/S architecture of“Longxi”Web game

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

3.3 游戲的數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)通信

在網(wǎng)游里需要使用數(shù)據(jù)結(jié)構(gòu)來創(chuàng)建不同類型的人物（如玩家、怪物、商人等）移動，攻擊行為等。而在地圖方面，需要使用圖的數(shù)據(jù)結(jié)構(gòu)來把地圖上的每個節(jié)點連接起來，地圖坐標(biāo)是一個二維數(shù)組[9]。實現(xiàn)游戲任務(wù)的數(shù)據(jù)結(jié)構(gòu)、算法的合理性往往決定游戲的成敗。目前游戲通常使用的算法有：A*算法，貪婪算法，遺傳算法，排序算法等?！褒堦亍本W(wǎng)頁游戲建立了玩家角色和怪物的數(shù)據(jù)結(jié)構(gòu)。玩家的排名使用了泡沫排序法，怪物跌倒率使用了概率隨機(jī)算法。

網(wǎng)頁游戲和傳統(tǒng)游戲?qū)W(wǎng)絡(luò)通信的需求都較大。傳統(tǒng)游戲一般使用Socket（套接字）實現(xiàn)通信，而網(wǎng)頁游戲則相對靈活些，既可用傳輸層Socket進(jìn)行通信，也可用應(yīng)用層Hypertext Transmission Protocol（Http）協(xié)議像瀏覽網(wǎng)頁交換數(shù)據(jù)方式進(jìn)行通信。ActionScript就同時支持上述兩種方式。

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

3.4 游戲的畫面層管理

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

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

圖2 “龍曦”網(wǎng)頁游戲截圖Fig.2Screenshot of“Longxi”Web game

3.5 游戲的處理流程

圖3是“龍曦”網(wǎng)頁游戲的處理流程。

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

下面只給出一段實現(xiàn)接收游戲動作并響應(yīng)處理的代碼段。其中fooCommand函數(shù)的用途是將動作事件數(shù)據(jù)發(fā)送給服務(wù)器，而fooGetData函數(shù)的用途是從服務(wù)器獲取數(shù)據(jù)并進(jìn)行處理。

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

…

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

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

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

{ActionState=true；RoleStateAction（）；}//發(fā)送龍狀態(tài)處理，游戲邏輯處理

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

}

private var ActionState:Boolean=false；

////////////////////////////收到服務(wù)器的數(shù)據(jù)////////////////////////////////

public function fooShowMsg（msg:String）:void{//接收服務(wù)器的數(shù)據(jù)

var sTemp:String=msg_box.text；//保存聊天內(nèi)容數(shù)據(jù)

if（ActionState==false）//判斷龍狀態(tài)是否改變

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

else{ActionState=false；}

}

////////////////////////////發(fā)送數(shù)據(jù)到服務(wù)器//////////////////////////////

public function fooCommand（sMsg:String）:void{//發(fā)送數(shù)據(jù)到服務(wù)器

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

{

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

sMsg=‘:’+sMsg；}//向所有在線用戶發(fā)送聊天內(nèi)容

var bMsg:ByteArray=new ByteArray（）；//新建一個ByteArray存放數(shù)據(jù)

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

oSocket.writeBytes（bMsg）；//寫入Socket的緩沖區(qū)

oSocket.flush（）；//調(diào)用flush方法發(fā)送信息

}

4 結(jié)束語

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

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

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

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

[4]姜天格.Flex3企業(yè)級Web應(yīng)用系統(tǒng)設(shè)計與實現(xiàn)[M].北京：機(jī)械工業(yè)出版社，2008:60－65.

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

[6]劉璐.基于Flex的網(wǎng)頁游戲的研究與設(shè)計[D].北京：北京化工大學(xué)，2009.

[7]顧漢杰，沈國珍，郭彩虹.基于Flex的教育類網(wǎng)頁游戲設(shè)計與實現(xiàn)[J].現(xiàn)代教育技術(shù)，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]鄧麗，董瑋.網(wǎng)絡(luò)游戲服務(wù)器端研究與設(shè)計[J].軟件導(dǎo)刊，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]王育文.網(wǎng)絡(luò)游戲開發(fā)的靈魂——數(shù)據(jù)結(jié)構(gòu)與算法[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.