摘  要： HTML5標(biāo)準(zhǔn)增強(qiáng)了網(wǎng)頁(yè)在圖形繪制,、媒體播放,、消息傳送等方面的能力，為提高網(wǎng)頁(yè)游戲性能創(chuàng)造了條件,?；谠摌?biāo)準(zhǔn)開發(fā)出一個(gè)3D多人網(wǎng)頁(yè)游戲。介紹了其實(shí)現(xiàn)方案,，測(cè)試了其相關(guān)性能,，分析了該技術(shù)的可行性。
關(guān)鍵詞： HTML5,；WebGL,；WebSocket；THREE.js,；JavaScript

　中國(guó)網(wǎng)游產(chǎn)業(yè)已走過了11年,，文化部發(fā)布的《2011中國(guó)網(wǎng)絡(luò)游戲市場(chǎng)年度報(bào)告》顯示，2011年中國(guó)網(wǎng)游市場(chǎng)規(guī)模為468.5億元[1],。近年來(lái),，網(wǎng)頁(yè)游戲（頁(yè)游）因其方便省時(shí)等優(yōu)點(diǎn)受到玩家青睞，正不斷占領(lǐng)市場(chǎng),。2011年開始,，3D頁(yè)游的出現(xiàn)又使頁(yè)游品質(zhì)大幅提升?？梢灶A(yù)測(cè),，高品質(zhì)頁(yè)游將在未來(lái)網(wǎng)游市場(chǎng)中占據(jù)一席之地,。本文以自主研發(fā)的基于HTML5的3D多人網(wǎng)頁(yè)游戲BillyRun為例,，介紹了其實(shí)現(xiàn)方案,，分析了其程序性能并展望了技術(shù)前景。
1 核心技術(shù)分析
1.1 以HTML5標(biāo)準(zhǔn)中Canvas元素為載體呈現(xiàn)游戲圖像
　HTML5是最新的網(wǎng)頁(yè)標(biāo)準(zhǔn),。廣義論及HTML5實(shí)際是指包括HTML,、CSS和JavaScript在內(nèi)的一套技術(shù)組合，其目的在于減少瀏覽器對(duì)插件的依賴性和豐富網(wǎng)頁(yè)的表現(xiàn)形式[2-3],。Canvas元素是HTML5中新增的頁(yè)面元素,，該元素是一個(gè)圖形繪制容器，擁有一個(gè)基于JavaScript的API,，可由腳本動(dòng)態(tài)繪制圖像[4],。BillyRun中的Canvas元素用于兩個(gè)方面：一是呈現(xiàn)和更新3D游戲畫面，二是繪制游戲中的部分2D畫面,。目前,，IE、FireFox,、Chrome,、Opera等主流瀏覽器均支持Canvas元素。
1.2 基于WebGL的游戲畫面渲染
　WebGL是一種3D繪圖標(biāo)準(zhǔn),，該標(biāo)準(zhǔn)通過增加OpenGL ES 2.0的一個(gè)JavaScript綁定,，為網(wǎng)頁(yè)中Canvas元素提供硬件3D加速渲染，使網(wǎng)頁(yè)3D程序能夠流暢運(yùn)行[5],，無(wú)需瀏覽器插件,。游戲中場(chǎng)景創(chuàng)建和渲染使用了THREE.js。THREE.js是一個(gè)JavaScript開源3D庫(kù),，能創(chuàng)建包括攝像機(jī),、燈光、材質(zhì),、模型在內(nèi)的三維場(chǎng)景,，并由WebGLRenderer模塊以WebGL標(biāo)準(zhǔn)渲染[6]。目前FireFox,、Chrome,、Opera、Safari等主流瀏覽器均支持WebGL標(biāo)準(zhǔn),。
1.3 基于NodeJS的服務(wù)端程序
    NodeJS是基于Google V8引擎由JavaScript實(shí)現(xiàn)的服務(wù)器端可擴(kuò)展程序,，可作為編寫高效網(wǎng)絡(luò)服務(wù)程序的平臺(tái)[7]。NodeJS消除了服務(wù)器端程序與客戶端程序的語(yǔ)言差異,，使代碼可以復(fù)用,，方便了頁(yè)游開發(fā)。BillyRun服務(wù)器端由NodeJS搭建,，其中定義了游戲信息,，并通過Socket.IO模塊與各客戶端實(shí)時(shí)通信完成更新,。服務(wù)器端連接了MySQL數(shù)據(jù)庫(kù)，用于保存用戶賬號(hào)信息,。目前服務(wù)器端在Linux,、Windows 7和Windows Server 2003下均可運(yùn)行。
1.4 基于WebSocket技術(shù)的網(wǎng)頁(yè)實(shí)時(shí)通信
　WebSocket是HTML5提供的瀏覽器與服務(wù)器間全雙工通信技術(shù),，主要用于實(shí)時(shí)通信服務(wù),。WebSocket十分高效，只須瀏覽器和服務(wù)器進(jìn)行一次握手,，便可雙向傳遞數(shù)據(jù),。Socket.IO是Node.JS的一個(gè)開源模塊，它對(duì)WebSocket進(jìn)行了封裝,，提供了建立連接和消息推送的接口,。BillyRun中基于此模塊在服務(wù)器端建立了Socket服務(wù)，與每個(gè)客戶端相連,，完成信息更新和消息處理工作,。目前，IE,、FireFox,、Chrome、Opera等主流瀏覽器均支持該技術(shù),。
1.5 Audio以及基于Web Audio API的3D音效
　Audio元素是HTML5中新增的元素,，可實(shí)現(xiàn)音頻文件播放等基本功能，支持HTML5的瀏覽器都能良好實(shí)現(xiàn),。Web Audio API由谷歌提出,，是一套用于網(wǎng)頁(yè)音頻處理的JavaScript API[8]，其功能強(qiáng)大,，尤其是3D定位和音錐技術(shù),，可根據(jù)聲源與玩家的位置關(guān)系，控制左右聲道實(shí)現(xiàn)立體音效,。該技術(shù)能大大提高游戲品質(zhì),，但目前只有Chrome瀏覽器能夠支持。BillyRun中分別實(shí)現(xiàn)了這兩套音效方案,，兼顧了游戲品質(zhì)和兼容性問題,。
2 具體實(shí)現(xiàn)方案
2.1 游戲內(nèi)容設(shè)計(jì)
BillyRun是一個(gè)空中對(duì)戰(zhàn)射擊游戲，游戲場(chǎng)景包括地面,、天空和建筑物,，每個(gè)玩家操作一架直升機(jī)在場(chǎng)景中飛行，可與其他玩家展開攻擊或防御,，已有多種游戲模式判定勝負(fù),。
2.2 程序整體結(jié)構(gòu)
　BillyRun由服務(wù)器端程序和客戶端程序兩部分組成,。服務(wù)器端程序?qū)崿F(xiàn)了數(shù)據(jù)庫(kù)交互、玩家事件處理,、界面跳轉(zhuǎn)等功能；客戶端程序?qū)崿F(xiàn)了界面顯示,、音效播放,、游戲主循環(huán)等功能，運(yùn)行在客戶瀏覽器上,。BillyRun功能結(jié)構(gòu)圖如圖1所示,。

2.3 程序執(zhí)行流程
2.3.1 程序整體流程
　程序由客戶端和服務(wù)器端組成，兩端通過通信保持同步,，其整體流程圖如圖2所示,。

2.3.2 客戶端程序流程
　客戶端包含界面、加載,、主循環(huán),、消息處理和輸入系統(tǒng)5部分。
?。?）游戲有5個(gè)div元素封裝的界面,。玩家先后進(jìn)入登錄界面、游戲大廳界面,、游戲房間界面,、加載界面和最后的游戲界面，每局游戲結(jié)束時(shí)返回游戲大廳界面,。
?。?）游戲的加載系統(tǒng)包括4部分：①場(chǎng)景模型和音頻文件。為固定游戲資源,，加載后保存在程序中,，僅進(jìn)行一次；②游戲信息,。加載在每局游戲開始前執(zhí)行,，更新客戶端信息；③玩家模型,。加載在每局開始前執(zhí)行,；④加載本局游戲所需的玩家模型，使用如圖3所示的動(dòng)態(tài)加載方法,，避免了重復(fù)加載,，提高了程序效率。

?。?）主循環(huán)由requestAnimationFrame構(gòu)建,。循環(huán)首先檢測(cè)玩家所處界面,，若處于游戲界面，程序會(huì)獲取與上次循環(huán)的時(shí)間間隔,，完成信息更新,、碰撞檢測(cè)、畫面重繪等工作,；若處于其他界面（如加載界面）,，表示游戲未進(jìn)行，程序?qū)⒌却麓窝h(huán),?？蛻舳烁骂l率為45 F/s，主循環(huán)每幀執(zhí)行,，以保證游戲的流暢性,。
　（4）消息處理模塊核心是一個(gè)socket對(duì)象,，與服務(wù)器端連接,，向服務(wù)器端發(fā)送自身玩家信息，并接收服務(wù)器端發(fā)送的其他玩家信息和系統(tǒng)命令,。
    （5）輸入系統(tǒng)由文檔對(duì)象document.addEventListener方法監(jiān)聽鼠鍵事件,。游戲輸入信息將緩存在程序中，由主循環(huán)處理,；非游戲輸入將即時(shí)處理,。
2.3.3 服務(wù)器端程序流程
　服務(wù)器端程序啟動(dòng)后監(jiān)聽端口，為登錄玩家建立服務(wù),。對(duì)每個(gè)玩家,，程序先訪問數(shù)據(jù)庫(kù)驗(yàn)證登錄信息，驗(yàn)證通過后為其建立玩家對(duì)象和socket連接,，加入玩家列表,。當(dāng)玩家所處房間可進(jìn)入游戲時(shí)，程序命令該房間所有玩家進(jìn)入游戲,，開啟該房間消息循環(huán),。游戲中重要邏輯處理如勝負(fù)判定都由服務(wù)器端完成。一局游戲結(jié)束后,，服務(wù)器端命令玩家返回大廳房間準(zhǔn)備下輪游戲,。當(dāng)玩家退出時(shí)，服務(wù)器端訪問數(shù)據(jù)庫(kù)更新信息,，在程序中將該玩家刪除,。
3 程序性能測(cè)試
　本文選擇了不同配置的4個(gè)客戶端和2個(gè)服務(wù)器端測(cè)試程序性能，機(jī)器配置如表1所示。

3.2 服務(wù)器端程序性能測(cè)試
　如表3所示,，服務(wù)器端程序?qū)?nèi)存和CPU的占用較低,，能較輕松地支持2~8人游戲，并有增加玩家負(fù)載的潛力（但負(fù)載上限還需要進(jìn)一步測(cè)試）,。

3.3 網(wǎng)絡(luò)傳輸性能測(cè)試
　網(wǎng)絡(luò)傳輸性能測(cè)試結(jié)果如表4所示,。由表4可以看出，受網(wǎng)絡(luò)情況影響,，加載用時(shí)差異較大,。而動(dòng)態(tài)加載技術(shù)避免了重復(fù)加載模型。因此當(dāng)首次加載完后,，再次進(jìn)入游戲時(shí)用時(shí)大大減小,，也即減少了玩家的等待時(shí)間,。

　HTML5的出現(xiàn)為頁(yè)游提供了新的實(shí)現(xiàn)方案,，通過對(duì)BillyRun的分析測(cè)試，證實(shí)了該方案的可行性,。目前HTML5標(biāo)準(zhǔn)還不夠成熟,，部分瀏覽器尚不能全面支持，基于該技術(shù)的頁(yè)游也相對(duì)較少,。但隨著HTML5標(biāo)準(zhǔn)的推廣,，尤其是PC端和移動(dòng)端瀏覽器的不斷支持，其跨平臺(tái)的優(yōu)勢(shì)將得以充分體現(xiàn),。在不遠(yuǎn)的將來(lái),，基于HTML5的頁(yè)游將有機(jī)會(huì)成為市場(chǎng)的主導(dǎo)。
參考文獻(xiàn)
[1] 新華社.文化部發(fā)布《2011中國(guó)網(wǎng)絡(luò)游戲市場(chǎng)年度報(bào)告》[EB/OL].（2012-03-30）[2012-08-06].http：//www.gov.cn/jrzg/2012-03/30/content_2103576.htm.
[2] 劉杰.淺談HTML5技術(shù)[J].科技創(chuàng)新導(dǎo)報(bào),，2012（10）：29－35.
[3] CHEN B J,， XU Z Q. A Framework for browser-based multiplayer online games using WebGL and WebSocket [C]. Multimedia Technology（ICMT）， 2011 International Conference,，2011：471-474.
[4] YANG J P,， ZHANG J. Towards HTML 5 and interactive 3D graphics[C]. Educational and Information Technology （ICEIT）， 2010 International Conference,，2010：522-527
[5] Khronos Group.WebGL 1.0—2011 WebGL[S].2011.
[6] Mrdoob. JavaScript 3D library[EB/OL].（2012-04-22）[2012-08-06]. https：//github.com/mrdoob/three.js/.
[7] KIESSLING M. The node beginner book[EB/OL].（2012-02-12）[2012-08-06]. http：//www.nodebeginner.org/.
[8] ROGERS C. Web audio API W3C working Draft 02 august 2012—2012 Web Audio API[S]. 2012.