畢業(yè)論文-基于html5的web環(huán)境下坦克大戰(zhàn)游戲軟件的開發(fā)

1、<p>　　基于HTML5的WEB環(huán)境下坦克大戰(zhàn)游戲軟件的開發(fā)</p><p>　　The Development of Battle City Game Software Based on HTML5 Web Environment</p><p><b>　　摘 要</b></p><p>　　隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和計(jì)算

2、機(jī)性能的不斷提升，用戶享受互聯(lián)網(wǎng)的方式也開始不斷的變化，越來(lái)越多的應(yīng)用可以直接以瀏覽器打開的方式使用，數(shù)據(jù)則是存儲(chǔ)在云端，更加的安全可靠，方便用戶共享數(shù)據(jù)。在各種應(yīng)用不斷的趨于更加網(wǎng)絡(luò)話的同時(shí)，一種新的技術(shù)標(biāo)準(zhǔn)也隨之產(chǎn)生，那就是HTML5（HTML是一種標(biāo)記語(yǔ)言也是一種標(biāo)準(zhǔn)，互聯(lián)網(wǎng)開發(fā)居于此）。HTML5是近十年來(lái)Web（互聯(lián)網(wǎng)）標(biāo)準(zhǔn)最巨大的飛躍，和以前的版本不同，HTML5并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)

3、用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖象和動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。也就是說(shuō)HTML5是通過(guò)開放的技術(shù)和標(biāo)準(zhǔn)來(lái)實(shí)現(xiàn)一個(gè)無(wú)插件模式的富客戶端，這個(gè)客戶端可以在移動(dòng)終端、PC（個(gè)人計(jì)算機(jī)）或者其他可以有網(wǎng)絡(luò)的地方輕松的運(yùn)行。所以此時(shí)研究HTML5，并且大膽的實(shí)踐有著重要的意義。</p><p>　　課題內(nèi)容是使用HTML5技術(shù)基于Web的環(huán)境來(lái)制作一個(gè)網(wǎng)絡(luò)版的“坦克大戰(zhàn)”游戲應(yīng)用，該游戲使用了HTML5中的Ca

4、nvas（畫布）、WebSocket（HTML5中最新使用的一種網(wǎng)絡(luò)連接協(xié)議，用于實(shí)時(shí)通訊）、Audio（HTML5中控制聲音的技術(shù)）等最新的技術(shù)。目前HTML5標(biāo)準(zhǔn)尚未成熟，很多地方仍在變動(dòng)，API（應(yīng)用程序接口）仍不是很穩(wěn)定，所以還無(wú)法真正的完全商用或者全部普及開，但這并不會(huì)影響我們來(lái)研究它。服務(wù)器端采用的Nodejs（一種Javascript程序語(yǔ)言框架，可以在服務(wù)器端運(yùn)行Javascript語(yǔ)言）這種新型的框架來(lái)開發(fā)，Nodej

5、s使用Javascript語(yǔ)言來(lái)開發(fā)，使整個(gè)應(yīng)用從客戶端到服務(wù)器端編程都是使用Javascript，大大的減少學(xué)習(xí)成本和開發(fā)成本，并且Nodejs性能強(qiáng)大，有很大的研究?jī)r(jià)值。</p><p>　　該游戲服務(wù)器運(yùn)行后，用戶可以直接通過(guò)瀏覽器打開，實(shí)時(shí)的同其他玩家在游戲中對(duì)戰(zhàn)，簡(jiǎn)單高效并且有聲音和實(shí)時(shí)性的數(shù)據(jù)傳輸。用戶可以用鍵盤控制自己的坦克，在地圖中和自己的隊(duì)友配合去攻擊另一隊(duì)的坦克來(lái)獲取勝利，整個(gè)游戲趣味性很強(qiáng)。

6、</p><p>　　關(guān)鍵詞：HTML5；互聯(lián)網(wǎng)實(shí)時(shí)性通信；Nodejs；網(wǎng)絡(luò)游戲</p><p><b>　　Abstract</b></p><p>　　With the increasing development of the Internet technology and the constantly rising of the co

7、mputer performance, users also begin to enjoy the Internet in the constantly changed ways. More and more application can be directly use in the way of opening the browser, data are stored in the clouds, and therefore it’

8、s more safe and reliable and continent for users to share data. In the same time of various application continuously tends to be more webified, a new standard of technology is produced, </p><p>　　The content

9、s of the subject topics is to use the HTML5 create a Web edition of "tank war" game application based on the environment of Web. The game operates the Canvas, WebSocket, Audio and some latest technology. At pre

10、sent, the standards of HTML5 have not yet mature and some points are still in the variation and API still is not very stable, so it can't be completely commercial or in a good popularization. However, we can still ha

11、ve a good study of it. The server is used Nodejs, a new Javascr</p><p>　　Keywords: HTML5; internet real-time communications; Nodejs; online games</p><p><b>　　目 錄<

12、/b></p><p><b>　　摘 要I</b></p><p>　　AbstractII</p><p><b>　　第1章 引言1</b></p><p>　　1.1 課題的目的和意義1</p><p>　　1.2 國(guó)內(nèi)外發(fā)展現(xiàn)狀2</p&

13、gt;<p>　　1.3 課題主要的內(nèi)容和功能介紹4</p><p>　　1.3.1 課題主要的內(nèi)容4</p><p>　　1.3.2 坦克大戰(zhàn)游戲功能介紹5</p><p>　　第2章 相關(guān)技術(shù)及開發(fā)方法簡(jiǎn)介6</p><p>　　2.1 相關(guān)技術(shù)簡(jiǎn)介6</p><p>　　2.1.1 HTM

14、L5標(biāo)準(zhǔn)簡(jiǎn)述及意義6</p><p>　　2.1.2 網(wǎng)絡(luò)實(shí)時(shí)性技術(shù)及WebSocket7</p><p>　　2.1.3 Nodejs簡(jiǎn)介11</p><p>　　2.2 開發(fā)工具及運(yùn)行環(huán)境13</p><p>　　2.2.1 Web開發(fā)工具和Aptana簡(jiǎn)述13</p><p>　　2.2.2 瀏覽器發(fā)展

15、和Chrome瀏覽器介紹14</p><p>　　第3章 游戲玩法設(shè)計(jì)和需求分析17</p><p>　　3.1 游戲玩法設(shè)計(jì)17</p><p>　　3.2 需求分析17</p><p>　　3.2.1 系統(tǒng)角色17</p><p>　　3.2.1 用例分析17</p><p>　

16、　第4章 總體設(shè)計(jì)及程序功能分析18</p><p>　　4.1 程序總體功能設(shè)計(jì)18</p><p>　　4.1.1 程序功能模塊分析18</p><p>　　4.1.2 地圖讀取及共享分析19</p><p>　　4.1.3 聲音的控制分析19</p><p>　　4.1.4 聯(lián)網(wǎng)對(duì)戰(zhàn)分析19</

17、p><p>　　4.2 程序流程20</p><p>　　4.3 模塊及對(duì)應(yīng)的方法22</p><p>　　第5章 詳細(xì)設(shè)計(jì)26</p><p>　　5.1 服務(wù)器端設(shè)計(jì)26</p><p>　　5.1.1 服務(wù)器端的運(yùn)行環(huán)境26</p><p>　　5.1.2 服務(wù)器端的設(shè)計(jì)26<

18、;/p><p>　　5.1.3 服務(wù)器端部分代碼27</p><p>　　5.2 地圖功能模塊28</p><p>　　5.2.1 讀取地圖28</p><p>　　5.2.2 繪制地圖28</p><p>　　5.2.2 地圖模塊部分代碼29</p><p>　　5.3 坦克模塊的設(shè)計(jì)

19、31</p><p>　　5.3.1 讀取服務(wù)器端信息31</p><p>　　5.3.2 控制坦克31</p><p>　　5.3.3 繪制畫面31</p><p>　　5.3.4 坦克模塊的部分實(shí)現(xiàn)代碼31</p><p>　　5.4 炮彈模塊的功能35</p><p>　　5.4

20、.1 讀取服務(wù)器端信息35</p><p>　　5.4.2 碰撞檢測(cè)35</p><p>　　5.4.3 擊毀功能35</p><p>　　5.4.4 繪制畫面35</p><p>　　5.5 客戶端與服務(wù)器端通信35</p><p><b>　　第6章 結(jié)論37</b></p&

21、gt;<p>　　參 考 文 獻(xiàn)38</p><p><b>　　致 謝40</b></p><p><b>　　第1章 引言</b></p><p>　　1.1 課題的目的和意義</p><p>　　隨著互聯(lián)網(wǎng)的不斷發(fā)展，互聯(lián)網(wǎng)對(duì)人們的生活也在不斷地變化和加強(qiáng)，人們漸漸地已

22、經(jīng)開始習(xí)慣于互聯(lián)網(wǎng)所帶來(lái)的各類服務(wù)與應(yīng)用，并且享受著它帶來(lái)的便利和豐富。當(dāng)然隨著互聯(lián)網(wǎng)的基礎(chǔ)用戶和開發(fā)者不斷增多，人們不斷地去創(chuàng)造和完善它的速度也越來(lái)越快，無(wú)論從技術(shù)層面還是商業(yè)層面，新的模式和方法層出不窮，整個(gè)行業(yè)新陳代謝不斷加速，新的應(yīng)用和新的公司不斷地挑戰(zhàn)著新的技術(shù)和新的模式，由于整個(gè)行業(yè)存在創(chuàng)業(yè)成本很低、技術(shù)成本門檻卻較高等特點(diǎn)，大公司也不斷地推動(dòng)著新的技術(shù)，基于此來(lái)創(chuàng)建一定的技術(shù)壁壘，同時(shí)基于此建立全新的服務(wù)和技術(shù)。但是畢竟整

23、個(gè)互聯(lián)網(wǎng)是一個(gè)開放的環(huán)境，大家需要一種標(biāo)準(zhǔn)，而不是一家獨(dú)大的競(jìng)爭(zhēng)下去，這樣就一定會(huì)失去民心，所以HTML5這種更加新的標(biāo)準(zhǔn)和技術(shù)體系在不斷地革新中發(fā)展壯大。</p><p>　　HTML5是近十年來(lái)Web標(biāo)準(zhǔn)最巨大的飛躍，和以前的版本不同，HTML5并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖象和動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。盡管HTML5的實(shí)現(xiàn)還有很長(zhǎng)的

24、路要走，但HTML5正在改變Web。另外，目前的互聯(lián)網(wǎng)不僅僅是傳統(tǒng)意義上面的互聯(lián)網(wǎng)，所有的傳統(tǒng)應(yīng)用和模式正在向著更加移動(dòng)和便捷發(fā)展，人們可能通過(guò)手機(jī)、平板電腦等各類移動(dòng)設(shè)備來(lái)獲取信息和使用更加豐富的應(yīng)用，如物理位置定位信息等新的數(shù)據(jù)采集和多點(diǎn)觸控、重力感應(yīng)等新的交互方式的應(yīng)用，未來(lái)必將也會(huì)改變?nèi)藗兩畹姆椒矫婷?。HTML5中也加入了以上各類新的元素和功能，同時(shí)也考慮到了非健全人事使用互聯(lián)網(wǎng)時(shí)可能帶來(lái)的問(wèn)題[1]。所以，研究HTML5這

25、種技術(shù)體系來(lái)嘗試做一些應(yīng)用是一個(gè)千載難逢的機(jī)遇，而基于這個(gè)變革的年代去使用類似的技術(shù)來(lái)創(chuàng)造更多新的應(yīng)用更是能夠改變這個(gè)世界的一次機(jī)會(huì)。</p><p>　　該課題是基于HTML5來(lái)做一個(gè)最佳實(shí)踐，完成之前不可能使用WEB技術(shù)來(lái)完成的功能，性能照比之前的技術(shù)體系要高出很多，而且有足夠的前瞻性和創(chuàng)新性?；ヂ?lián)網(wǎng)和其他的行業(yè)最大的區(qū)別就是這是一個(gè)創(chuàng)新驅(qū)動(dòng)并且快速變化的行業(yè)，一種新的技術(shù)可能就會(huì)創(chuàng)造出新的應(yīng)用、新的商業(yè)模式

26、，該課題是基于HTML5技術(shù)在Web環(huán)境中實(shí)現(xiàn)的一個(gè)實(shí)時(shí)性的聯(lián)網(wǎng)游戲，通過(guò)使用HTML5中的WebSocket來(lái)實(shí)現(xiàn)實(shí)時(shí)性，這無(wú)疑是對(duì)最新技術(shù)的一次最佳實(shí)踐和學(xué)習(xí)，也是對(duì)自己的能力的一次歷練。一個(gè)聯(lián)網(wǎng)的游戲最難解決的問(wèn)題無(wú)疑就是實(shí)時(shí)性的問(wèn)題，同步數(shù)據(jù)的數(shù)量、何時(shí)同步數(shù)據(jù)，這些都是需要認(rèn)真思考和設(shè)計(jì)的，不僅僅是簡(jiǎn)單的程序設(shè)計(jì)，而是復(fù)雜度較高真正的軟件工程。</p><p>　　游戲軟件是計(jì)算機(jī)誕生之后就開始有的產(chǎn)物

27、，最開始是一些計(jì)算機(jī)極客們無(wú)聊時(shí)寫著玩的代碼，漸漸地發(fā)展成為了一個(gè)巨大的產(chǎn)業(yè)，游戲軟件由最開始的單機(jī)版游戲逐漸發(fā)展為大型的網(wǎng)游，但是隨著整個(gè)行業(yè)新生模式的誕生，尤其是如SNS、微博等新型的以人與人關(guān)系類的網(wǎng)絡(luò)，游戲也在向著小型互動(dòng)的SNS型轉(zhuǎn)變，這樣的游戲有著互動(dòng)性強(qiáng)，直接在網(wǎng)頁(yè)中運(yùn)行，用戶體驗(yàn)較簡(jiǎn)單容易，就如之前風(fēng)靡一時(shí)的“偷菜”類游戲。游戲可以帶給人們快樂(lè)，可以使人們享受與人配合交流的快樂(lè)，也可以是打破尷尬的一種方式。對(duì)于程序員而言

28、能夠編寫一個(gè)游戲程序帶給用戶快樂(lè)，這無(wú)疑也會(huì)帶給自己成就感并且是一件很有意義和價(jià)值的事情。</p><p>　　1.2 國(guó)內(nèi)外發(fā)展現(xiàn)狀</p><p>　　HTML的發(fā)展歷經(jīng)了多個(gè)年代，但時(shí)間其實(shí)不過(guò)也在20年左右。1993年HTML首次以因特網(wǎng)草案的形式發(fā)布。20世紀(jì)90年代的人見證了HTML的大幅發(fā)展，從2.0版，到3.2版和4.0版，再到1999年的4.01版。隨著HTML的發(fā)展，W

29、3C（萬(wàn)維網(wǎng)聯(lián)盟）掌握了對(duì)HTML規(guī)范的控制權(quán)。然而在快速發(fā)布了這四個(gè)版本之后，業(yè)界普遍認(rèn)為HTML已經(jīng)到了窮途末路，對(duì)Web標(biāo)準(zhǔn)的焦點(diǎn)也開始轉(zhuǎn)移到了XML（一種數(shù)據(jù)存儲(chǔ)的形式）和XHTML（XHTML類似HTML的一種標(biāo)記語(yǔ)言，也同樣是Web開發(fā)的一個(gè)標(biāo)準(zhǔn)，要求頁(yè)面結(jié)構(gòu)像XML一樣嚴(yán)謹(jǐn)）上，HTML被放到了次要的位置。不過(guò)在此期間，HTML體現(xiàn)了頑強(qiáng)的生命力，主要的網(wǎng)站內(nèi)容還是基于HTML的。為能支持新的Web應(yīng)用，同時(shí)克服現(xiàn)有的缺點(diǎn)

30、，HTML迫切需要添加新的功能，制定新的規(guī)范。</p><p>　　致力于將Web平臺(tái)提升到一個(gè)新的高度，一小組人在2004年成立了WHATWG（Web超文本應(yīng)用技術(shù)工作組）。他們創(chuàng)立了HTML5規(guī)范，同時(shí)開始專門針對(duì)Web應(yīng)用開發(fā)新的功能，這被WHATWG認(rèn)為是HTML中最薄弱的環(huán)節(jié)。Web2.0實(shí)至名歸，開創(chuàng)了Web的第二時(shí)代[2]。舊的靜態(tài)網(wǎng)站逐漸讓位于需要更多特性的動(dòng)態(tài)網(wǎng)站和社交網(wǎng)站，這些網(wǎng)站中的新功能數(shù)

31、不勝數(shù)。2006年W3C又重新介入HTML，并于2008年發(fā)布了HTML5的工作草案。2009年，XHTML2工作組停止工作。2010年因?yàn)镠TML5能解決非常實(shí)際的問(wèn)題，所以在規(guī)范還未定稿的情況下，各大瀏覽器廠家就已經(jīng)按耐不住了，開始對(duì)旗下產(chǎn)品進(jìn)行升級(jí)以支持HTML5的新功能。得益于瀏覽器的實(shí)驗(yàn)性反饋，HTML5規(guī)范也得到了持續(xù)的完善，HTML5以這種方式迅速融入到了對(duì)Web平臺(tái)的實(shí)質(zhì)性改進(jìn)中。到目前為止HTML5規(guī)范已經(jīng)以工作草案的

32、形式發(fā)布了，但還不是最終版本，不過(guò)現(xiàn)在在移動(dòng)終端和Apple公司為主的產(chǎn)品的推動(dòng)下，HTML5已經(jīng)得到了廣泛的使用[3]。</p><p>　　HTML5草案的前身名為Web Applications 1.0，是在2004年由WHATWG提出，再于2007年獲W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案發(fā)布。WHATWG表示該規(guī)范是目前仍在進(jìn)行的工作，仍須多年的努力。目前Fir

33、efox、Chrome、Opera、Safari（版本4以上）及Internet Explorer 9已支持HTML5技術(shù)（Firefox、Chrome、Opera、Safari和Internet Explorer 9均為瀏覽器品牌）。盡管HTML5已經(jīng)在網(wǎng)絡(luò)開發(fā)人員中非常出名了，但是它成為主流媒體的一個(gè)話題還是在2010年的4月，當(dāng)時(shí)Apple公司的CEO喬布斯發(fā)表一篇題為“對(duì)flash的思考”的文章，指出隨著HTML5的發(fā)展，觀看視

34、頻或其它內(nèi)容時(shí)，Adobe Flash將不再是必須的。這引發(fā)了開發(fā)人員間的爭(zhēng)論，包括HTML5雖然提供了增強(qiáng)的功能，但開發(fā)人員必須考慮到不同瀏覽器對(duì)標(biāo)準(zhǔn)不同部分的支持程度的不同，以及HTML5和Flash間的功能差異。HTML 5的標(biāo)準(zhǔn)草案目前已進(jìn)入W3C制定標(biāo)準(zhǔn)5大程序的第1步。負(fù)責(zé)編</p><p>　　據(jù)美國(guó)知名科技博客網(wǎng)站TechCrunch報(bào)道，F(xiàn)acebook（一家美國(guó)的社交網(wǎng)站，現(xiàn)在被譽(yù)為全世界最火

35、的網(wǎng)站）已秘密制定了一項(xiàng)名為“斯巴達(dá)”（Project Spartan）的移動(dòng)平臺(tái)服務(wù)計(jì)劃，此舉意在以全新方式向蘋果iOS平臺(tái)（蘋果公司的移動(dòng)終端操作系統(tǒng)）和Google的Android平臺(tái)（Google公司的移動(dòng)終端操作系統(tǒng)）以及相關(guān)移動(dòng)服務(wù)發(fā)起強(qiáng)有力的挑戰(zhàn)?！八拱瓦_(dá)”目前仍然屬于Facebook秘密開發(fā)的產(chǎn)品，目前確切可知的消息是“斯巴達(dá)”是一款基于HTML5技術(shù)標(biāo)準(zhǔn)的移動(dòng)服務(wù)平臺(tái)，目標(biāo)群目前鎖定為使用移動(dòng)版Safari瀏覽器的iP

36、hone手機(jī)和iPad用戶。目前已知的“斯巴達(dá)”平臺(tái)的工作原理是：該平臺(tái)基于HTML5技術(shù)，而Safari瀏覽器又對(duì)HTML5有比較好的支持，用戶通過(guò)Safari訪問(wèn)“斯巴達(dá)”平臺(tái)后，不僅能夠在該平臺(tái)使用Facebook的基本服務(wù)，還能夠獲取使用由外部開發(fā)者基于該平臺(tái)開發(fā)的相關(guān)應(yīng)用程序。而且微軟的說(shuō)法最新的Windows 8（微軟的下一代操作系統(tǒng)）將會(huì)支持兩種應(yīng)用，其一是傳統(tǒng)桌面應(yīng)用程序，另外就是 HTML5網(wǎng)絡(luò)應(yīng)用。Windows 8

37、中通過(guò) Int</p><p>　　HTML5無(wú)疑是客戶端的發(fā)展的一個(gè)巔峰，但是服務(wù)器端的變化也是顯著的，從之前的CGI（Common Gateway Interface，通用網(wǎng)關(guān)接口，在物理上是一段程序，運(yùn)行在服務(wù)器上，提供同客戶端HTML頁(yè)面的接口）到JAVA、J2EE（一種商用的JAVA開發(fā)框架，更是一種軟件生產(chǎn)標(biāo)準(zhǔn)），再到LAMP（Linux+Apache+Mysql+Perl/PHP/Python一組常

38、用來(lái)搭建動(dòng)態(tài)網(wǎng)站或者服務(wù)器的開源軟件，本身都是各自獨(dú)立的程序，但是因?yàn)槌１环旁谝黄鹗褂?，擁有了越?lái)越高的兼容度，共同組成了一個(gè)強(qiáng)大的Web應(yīng)用程序平臺(tái)）和Ruby on Rails（Ruby on Rails是一個(gè)可以使你開發(fā)，部署，維護(hù)Web 應(yīng)用程序變得簡(jiǎn)單的框架，基于Ruby語(yǔ)言），隨著HTML5的興起下一個(gè)服務(wù)器端架構(gòu)將會(huì)誕生，再次改變技術(shù)圈的架構(gòu)。本課題使用了較為有前景的一個(gè)全新的架構(gòu)Nodejs，Nodejs是一個(gè)Javas

39、cript運(yùn)行環(huán)境。實(shí)際上它是對(duì)Google V8引擎進(jìn)行了封裝（Google V8引擎是用來(lái)解析Javascript的專用運(yùn)行環(huán)境，以速度快著稱）。V8引擎執(zhí)行Javascrip</p><p>　　1.3 課題主要的內(nèi)容和功能介紹</p><p>　　1.3.1 課題主要的內(nèi)容</p><p>　　課題主要的內(nèi)容包括：</p><p>　

40、　使用HTML5 Cavans來(lái)開發(fā)動(dòng)畫效果。</p><p>　　基于HTML5 WebSocket的實(shí)時(shí)數(shù)據(jù)傳輸。</p><p>　　服務(wù)器端Nodejs的使用。</p><p>　　基于HTML5 Audio來(lái)實(shí)現(xiàn)控制聲音。</p><p>　　網(wǎng)絡(luò)實(shí)時(shí)性游戲的設(shè)計(jì)和實(shí)現(xiàn)。</p><p>　　地圖的繪制與實(shí)時(shí)

41、性地圖的控制。</p><p>　　1.3.2 坦克大戰(zhàn)游戲功能介紹</p><p>　　玩家打開瀏覽器，輸入地址即可進(jìn)入坦克大戰(zhàn)游戲并進(jìn)入聯(lián)機(jī)狀態(tài)，聯(lián)機(jī)后將會(huì)被自動(dòng)分配到黃方或者綠方，玩家可以通過(guò)鍵盤控制自己的坦克，黃、綠雙方各自將會(huì)以消滅對(duì)方為己任，互相攻擊。游戲可以負(fù)載多人，地圖可以在服務(wù)器端通過(guò)修改數(shù)組改變。</p><p>　　第2章 相關(guān)技術(shù)及開發(fā)方法簡(jiǎn)

42、介</p><p>　　2.1 相關(guān)技術(shù)簡(jiǎn)介</p><p>　　2.1.1 HTML5標(biāo)準(zhǔn)簡(jiǎn)述及意義</p><p>　　HTML5是HTML下一個(gè)的主要修訂版本，現(xiàn)在仍處于發(fā)展階段。目標(biāo)是取代1999年所定訂的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。廣義論及HTML5時(shí)，實(shí)際指的是包括HTM

43、L、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash（Adobe公司的一種技術(shù)體系，使用Actionscript語(yǔ)言，開發(fā)后生成的程序以插件形式在瀏覽器端運(yùn)行）、Microsoft Silverlight（微軟公司的一種技術(shù)，同樣是以插件形式在瀏覽器端運(yùn)行），與Oracl

44、e JavaFX（基于JAVA的一種技術(shù)，SUN公司被Oracles收購(gòu)后歸于Oracle公司，以插件形式在瀏覽器端運(yùn)行）的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。</p><p>　　HTML5添加了許多新的語(yǔ)法特征，其中包括<video>，<audio>，和<canvas>元素（<video>，<audio>，和<canvas>均為

45、HTML5中的新標(biāo)記），同時(shí)集成了SVG（HTML5中新加入的矢量圖形實(shí)現(xiàn)方式）內(nèi)容。這些元素是為了更容易的在網(wǎng)頁(yè)中添加和處理多媒體和圖片內(nèi)容而添加的。其它新的元素包括<section>，<article>，<header>和<nav>（<section>，<article>，<header>和<nav>均為HTML5新添加的標(biāo)記），是為了豐

46、富文檔的數(shù)據(jù)內(nèi)容。新的屬性的添加也是為了同樣的目的。同時(shí)也有一些屬性和元素被移除掉了。一些元素，像<a>，<cite>和<menu>（<a>，<cite>和<menu>均為HTML標(biāo)簽）被修改，重新定義或標(biāo)準(zhǔn)化了。同時(shí)APIs和DOM（Document Object Model，文檔對(duì)象模型）已經(jīng)成為HTML5中的基礎(chǔ)部分了。HTML5還定義了處理非法文檔的具體細(xì)節(jié)

47、，使得所有瀏覽器和客戶端程序能夠一致地處理語(yǔ)法錯(cuò)誤。</p><p>　　HTML5提供了一些新的元素和屬性，反映典型的現(xiàn)代用法網(wǎng)站。其中有些是技術(shù)上類似<div>和<span>標(biāo)簽，但有一定含義，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理、小屏幕設(shè)備和視障人士使用。同時(shí)為其他瀏覽要素提供了新的功能，通過(guò)一個(gè)標(biāo)準(zhǔn)接口，如<

48、;audio>和<video>標(biāo)記。一些過(guò)時(shí)的HTML4標(biāo)記將取消，其中包括純粹用作顯示效果的標(biāo)記，如<font>和<center>（HTML中為數(shù)不多的具有修改樣式屬性的標(biāo)簽），因?yàn)樗鼈円呀?jīng)被CSS取代。還有一些通過(guò)DOM的網(wǎng)絡(luò)行為[5]。</p><p>　　盡管和SGML（Standard Generalized Markup Language,標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言）在

49、標(biāo)記上的相似性，HTML5的句法并不再基于它了，而是被設(shè)計(jì)成向后兼容對(duì)老版本的HTML的解析。它有一個(gè)新的開始行看起來(lái)就像SGML的文檔類型聲明，<!DOCTYPE html>（<!DOCTYPE>聲明位于文檔中的最前面的位置，處于<html>標(biāo)簽之前，此標(biāo)簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范）這會(huì)觸發(fā)和標(biāo)準(zhǔn)兼容的渲染模式。在2009年1月5號(hào)，HTML5添加了Web Form 2.0（

50、處理表單的功能）的內(nèi)容。</p><p>　　HTML5還提供了許多新的應(yīng)用程序接口（API），除了原先的DOM接口，HTML5增加了更多樣化的API：</p><p>　　實(shí)時(shí)二維繪圖。Canvas API：有關(guān)動(dòng)態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動(dòng)畫的API。</p><p>　　定時(shí)媒體播放HTML5音頻與視頻：HTML5里新增的元素，它們?yōu)殚_發(fā)者提供了一套通用的

51、、集成的、腳本式的處理音頻與視頻的API，而無(wú)需安裝任何插件。</p><p>　　通信網(wǎng)絡(luò)Communication APIs：構(gòu)建實(shí)時(shí)和跨源（cross-origin）通信的兩大基礎(chǔ)： 跨文檔通信（Cross Document Messaging）與 XMLHttpRequest Level 2。</p><p>　　Geolocation API：用戶可共享地理位置，并在Web應(yīng)用的

52、協(xié)助下享用位置感知服務(wù)（location-aware services）。</p><p>　　Web SQL Database，一個(gè)本地的SQL數(shù)據(jù)庫(kù)。</p><p>　　WebSocket，一個(gè)基于瀏覽器的socket（一種網(wǎng)絡(luò)協(xié)議，支持所有的互聯(lián)網(wǎng)通信），支持實(shí)時(shí)性的數(shù)據(jù)傳輸。</p><p>　　其他：離線存儲(chǔ)數(shù)據(jù)庫(kù)（離線網(wǎng)絡(luò)應(yīng)用程序）、編輯、拖放等。&l

53、t;/p><p>　　2.1.2 網(wǎng)絡(luò)實(shí)時(shí)性技術(shù)及WebSocket</p><p>　　正常情況下，瀏覽器訪問(wèn)Web頁(yè)面時(shí)，一般會(huì)向頁(yè)面所在的Web服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求。Web服務(wù)器識(shí)別請(qǐng)求，然后返回響應(yīng)。大多數(shù)情況下，如股票價(jià)格、新聞報(bào)道、余額查詢、交通狀況、醫(yī)療設(shè)備讀取數(shù)據(jù)等，當(dāng)內(nèi)容呈現(xiàn)在瀏覽器頁(yè)面上時(shí)，可能已經(jīng)沒(méi)有時(shí)效性。如果用戶想要獲得最新的實(shí)時(shí)信息，就需要不斷地手動(dòng)刷新頁(yè)面，

54、這顯然不是一個(gè)明智的做法。目前實(shí)時(shí)Web應(yīng)用的實(shí)現(xiàn)方式，大部分是圍繞輪詢和其他服務(wù)器端推送技術(shù)展開的，其中最著名的是Comet。Comet技術(shù)可以讓服務(wù)器端主動(dòng)以異步方式向客戶端推送數(shù)據(jù)，它會(huì)使針對(duì)傳輸消息到客戶端的響應(yīng)延遲完成[6]。</p><p>　　使用輪詢。瀏覽器會(huì)定期發(fā)送HTTP請(qǐng)求，并隨即接收響應(yīng)，請(qǐng)求過(guò)程如圖2-1。</p><p>　　圖2-1 傳統(tǒng)網(wǎng)絡(luò)連接通過(guò)輪詢方式獲

55、取數(shù)據(jù)的過(guò)程圖</p><p>　　這項(xiàng)技術(shù)是瀏覽器在實(shí)時(shí)信息傳送方面的首次嘗試。顯然，如果知道消息傳遞的準(zhǔn)確時(shí)間間隔，輪詢將是一個(gè)很好的辦法，因?yàn)榭梢詫⒖蛻舳说恼?qǐng)求同步為只有服務(wù)器上的信息可用時(shí)才發(fā)出。但是，實(shí)時(shí)數(shù)據(jù)往往不可預(yù)測(cè)，不可避免會(huì)產(chǎn)生一些不必要的請(qǐng)求，在低消息率情況下會(huì)有很多無(wú)用的連接不斷地打開和關(guān)閉[7]。</p><p>　　使用長(zhǎng)連接。瀏覽器向服務(wù)器發(fā)送一個(gè)請(qǐng)求，服務(wù)器會(huì)

56、在一段時(shí)間內(nèi)將其保持在打開狀態(tài)。如果服務(wù)器在此期間收到一個(gè)通知，就會(huì)向客戶端發(fā)送一個(gè)包含消息的響應(yīng)。如果時(shí)間已到卻還沒(méi)有收到通知，服務(wù)器會(huì)發(fā)送一個(gè)響應(yīng)消息來(lái)終止打開的請(qǐng)求。然而，最關(guān)鍵的是，當(dāng)信息量很大時(shí)，與傳統(tǒng)輪詢方式相比，長(zhǎng)連接方式并無(wú)實(shí)質(zhì)上的性能改善[8]。</p><p>　　圖2-2 傳統(tǒng)網(wǎng)絡(luò)連接通過(guò)長(zhǎng)連接方式獲取數(shù)據(jù)的過(guò)程圖</p><p>　　使用流解決方案。瀏覽器會(huì)發(fā)送一個(gè)

57、完整的HTTP請(qǐng)求，但服務(wù)器會(huì)發(fā)送并保持一個(gè)處于打開狀態(tài)的響應(yīng)，該響應(yīng)持續(xù)更新并無(wú)限期或是在一段時(shí)間內(nèi)處于打開狀態(tài)。每當(dāng)有消息可發(fā)送時(shí)，該響應(yīng)就會(huì)被更新，但服務(wù)器永遠(yuǎn)不會(huì)發(fā)出響應(yīng)完成的信號(hào)，這樣連接就會(huì)一直保持在打開狀態(tài)以便后續(xù)消息的發(fā)送。但是，由于流仍是封裝在HTTP中，其間的防火墻和代理服務(wù)器可能會(huì)對(duì)響應(yīng)消息進(jìn)行緩沖，造成消息傳遞的延時(shí)。因此，當(dāng)檢測(cè)到緩沖代理服務(wù)器時(shí)，許多流解決方案就回退到長(zhǎng)連接方式。此外，可利用TLS、SSL連接

58、來(lái)保護(hù)響應(yīng)不被緩沖，但在這種情況下，每個(gè)連接的創(chuàng)建和清除會(huì)消耗更多的服務(wù)器資源[9]。</p><p>　　綜上所述，所有這些提供實(shí)時(shí)數(shù)據(jù)的方式都會(huì)涉及HTTP請(qǐng)求和響應(yīng)報(bào)頭，其中包含有大量額外的、不必要的報(bào)頭數(shù)據(jù)，會(huì)造成傳輸延遲。最重要的是，全雙工連接需要的不僅僅是服務(wù)器到客戶端的下行連接。為了在半雙工HTTP的基礎(chǔ)上模擬全雙工通信，目前的許多解決方案都使用了兩個(gè)連接：一個(gè)用于下行數(shù)據(jù)流，另一個(gè)用于上行數(shù)據(jù)流。

59、這兩個(gè)連接的保持和協(xié)作也會(huì)造成大量的資源消耗，并增加了復(fù)雜度。簡(jiǎn)而言之，HTTP技術(shù)并不是為了實(shí)現(xiàn)實(shí)時(shí)全雙工通信設(shè)計(jì)的。當(dāng)開發(fā)人員試圖對(duì)上述方案繼續(xù)擴(kuò)展時(shí)，情況會(huì)變得更糟。模擬基于HTTP的雙向?yàn)g覽器通信是非常復(fù)雜和易錯(cuò)的，而且復(fù)雜度不可控。雖然最終用戶感覺(jué)WEB應(yīng)用像是實(shí)時(shí)的，但是這種“實(shí)時(shí)”體驗(yàn)的代價(jià)非常高，包括額外的時(shí)間延遲、不必要的網(wǎng)絡(luò)流量和CPU性能消耗[10]。</p><p>　　WebSocket

60、實(shí)現(xiàn)了通過(guò)瀏覽器直接于服務(wù)器形成全雙工連接。WebSocket是HTML5一種新的協(xié)議，它實(shí)現(xiàn)了真正的瀏覽器與服務(wù)器全雙工通信(full-duplex)。WebSocket請(qǐng)求過(guò)程如圖2-3。</p><p>　　圖2-3 網(wǎng)絡(luò)連接通過(guò)WebSocket方式獲取數(shù)據(jù)的過(guò)程圖</p><p>　　WebSocket是HTTP協(xié)議的擴(kuò)展，用HTTP握手之后，服務(wù)器和瀏覽器就使用這條HTTP鏈接

61、下的TCP連接來(lái)直接傳輸數(shù)據(jù)，拋棄了復(fù)雜的HTTP頭部和格式，WebSocket的格式是基于幀（Frame）的，最小的幀只有2個(gè)字節(jié)。在文本幀中，每一幀始于0x00直接，止于0xFF字節(jié)，數(shù)據(jù)使用UTF-8編碼。與long polling相比，通信的次數(shù)雖然一樣多，但是Web Socket的幀頭的標(biāo)記部分也比long polling的request的header部分簡(jiǎn)潔得多（幾個(gè)字節(jié)與幾K字節(jié)的差別）。為了建立WebSocket通信，客

62、戶端和服務(wù)器在初始握手時(shí)，將HTTP協(xié)議升級(jí)到了WebSocket協(xié)議，一旦連接建立成功，就可以在全雙工模式下在客戶端和服務(wù)器之間來(lái)回傳送WebSocket消息。這就意味著，在同一時(shí)間、任何方向，都可以全雙工發(fā)送基于文本的消息[11]。</p><p>　　2.1.3 Nodejs簡(jiǎn)介</p><p>　　Nodejs是一個(gè)Javascript運(yùn)行環(huán)境。實(shí)際上它是對(duì)Google V8引擎進(jìn)

63、行了封裝。V8引擎執(zhí)行Javascript的速度非常快，性能非常好。Nodejs對(duì)一些特殊用例進(jìn)行了優(yōu)化，提供了替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。例 如，在服務(wù)器環(huán)境中，處理二進(jìn)制數(shù)據(jù)通常是必不可少的，但Javascript對(duì)此支持不足，因此，V8.Node增加了Buffer類，方便并且高效地處理二進(jìn)制數(shù)據(jù)。因此，Nodejs不僅僅簡(jiǎn)單的使用了V8，還對(duì)其進(jìn)行了優(yōu)化，使其在各環(huán)境下更加實(shí)用[12]。Nodejs的運(yùn)行架構(gòu)

64、如圖：</p><p>　　圖2-4 Nodejs的運(yùn)行架構(gòu)圖</p><p>　　V8引擎本身使用了一些最新的編譯技術(shù)。這使得用Javascript這類高級(jí)語(yǔ)言編寫出來(lái)的代碼與用C這類低級(jí)語(yǔ)言寫出來(lái)的代碼性能相差無(wú)幾，卻節(jié)省了開發(fā)成本。對(duì)性能的苛求是Nodejs的一個(gè)關(guān)鍵因素。Javascript是一個(gè)事件驅(qū)動(dòng)語(yǔ)言，Nodejs利用了這個(gè)優(yōu)點(diǎn)，編寫出可擴(kuò)展性高的服務(wù)器。Nodejs采用了

65、一個(gè)稱為“事件循環(huán)（event loop）”的架構(gòu)，使得編寫可擴(kuò)展性高的服務(wù)器變得既容易又安全。提高服務(wù)器性能的技巧有多種多樣，Nodejs選擇了一種既能提高性能，又能減低開發(fā)復(fù)雜度的架構(gòu)。這是一個(gè)非常重要的特性，并發(fā)編程通常很復(fù)雜且布滿地雷，Node繞過(guò)了這些，但仍提供很好的性能[13]。</p><p>　　圖2-5 Nodejs在處理數(shù)據(jù)時(shí)帶來(lái)性能提升的比例圖</p><p>　　N

66、odejs采用一系列“非阻塞”庫(kù)來(lái)支持事件循環(huán)的方式。本質(zhì)上就是為文件系統(tǒng)、數(shù)據(jù)庫(kù)之類的資源提供接口。當(dāng)你向文件系統(tǒng)發(fā)送一個(gè)請(qǐng)求時(shí)，無(wú)需等待硬盤尋址并檢索文件，硬盤準(zhǔn)備好的時(shí)候非阻塞接口會(huì)通知Nodejs。該模型以可擴(kuò)展的方式簡(jiǎn)化了對(duì)慢資源的訪問(wèn)，直觀，易懂。尤其是對(duì)于熟悉onmouseover、onclick等DOM事件的用戶，更有一種似曾相識(shí)的感覺(jué)。雖然讓Javascript運(yùn)行于服務(wù)器端不是Node的獨(dú)特之處，但卻是其一強(qiáng)大功能。

67、不得不承認(rèn)，瀏覽器環(huán)境限制了我們選擇編程語(yǔ)言的自由。任何服務(wù)器與日益復(fù)雜的瀏覽器客戶端應(yīng)用程序間共享代碼的愿望只能通過(guò)Javascript來(lái)實(shí)現(xiàn)。雖然還存在其他一些支持Javascript在服務(wù)器端運(yùn)行的平臺(tái)，但因?yàn)樯鲜鎏匦裕琋ode發(fā)展迅猛，成為事實(shí)上的平臺(tái)。</p><p>　　2.2 開發(fā)工具及運(yùn)行環(huán)境</p><p>　　2.2.1 Web開發(fā)工具和Aptana簡(jiǎn)述</p&g

68、t;<p>　　由于Web開發(fā)所作出的程序需要在Web瀏覽器上面來(lái)觀看效果，所以調(diào)試和編譯運(yùn)行等過(guò)程主要由瀏覽器或者后端服務(wù)器來(lái)完成，這樣使得Web開發(fā)工具的主要功能其實(shí)就是一個(gè)編輯器。Web開發(fā)工具漸漸的分為兩大類，一類是基于編輯器的，如Editplus、Vim等，另一個(gè)則是由Eclipse構(gòu)建的[14]。</p><p>　　編輯器類以Editplus為例，主要是對(duì)編程過(guò)程中的代碼高亮顯示，而且

69、可以提供自定義模板等功能，提高編程效率。而且Editplus打開速度很快，功能強(qiáng)大，很多Web工程師喜歡[15]。</p><p>　　Eclipse則是由IBM研發(fā)的大型集成化編譯環(huán)境（IDE），原本主要用于編寫大型的Java程序，后來(lái)IBM將其變?yōu)殚_源項(xiàng)目，而且Eclipse以插件的機(jī)制可擴(kuò)展，所以強(qiáng)大的擴(kuò)展性，使其定制靈活，所以后續(xù)有很多基于Eclipse開發(fā)的IDE。如編寫PHP的ZendStdio、編寫

70、Actionscript的FlashDevelop等。雖然Eclipse功能強(qiáng)大，但是打開速度較慢，系統(tǒng)內(nèi)存消耗較大。</p><p>　　Aptana正是基于Eclipse開發(fā)的一款強(qiáng)大的IDE，對(duì)HTML5和Javascript有強(qiáng)大的支持，很好的代碼高亮顯示和代碼提示功能，且運(yùn)行穩(wěn)定、擴(kuò)展性強(qiáng)。Aptana不僅僅支持HTML5和Javascript，同時(shí)也支持Ruby、Python等Web編程語(yǔ)言。其最廣為

71、人知的是它非常強(qiáng)悍的Javascript編輯器和調(diào)試器，去年Aptana吸收了Radrails項(xiàng)目，添加了非常強(qiáng)大的Ruby on Rails支持。但是Aptana前進(jìn)的腳步并未停止。隨著蘋果公司iPhone手機(jī)的發(fā)布，Aptana也推出了功能完備的iPhone集成開發(fā)功能，在Adobe公司的RIA產(chǎn)品AIR推出不久之后，Aptana就支持了AIR的開發(fā)環(huán)境。 所以Aptana是Web開發(fā)工程師手中的一把利器，但是它仍然繼承了Eclip

72、se家族打開速度較慢、運(yùn)行需要資源量較多等缺點(diǎn)。</p><p>　　如圖2-6是Aptana的集成開發(fā)界面，整個(gè)界面默認(rèn)背景色為黑色，代碼默認(rèn)色就是根據(jù)色彩明暗度變化比例，組成最利于編程人員的顏色。這種顏色搭配要比白色配黑色更能使眼睛不易疲勞。</p><p>　　圖2-6 Aptana集成編譯環(huán)境界面圖</p><p>　　2.2.2 瀏覽器發(fā)展和Chrome瀏

73、覽器介紹</p><p>　　瀏覽器隨著互聯(lián)網(wǎng)的發(fā)展也在漸漸的變化著，如今的瀏覽器在性能和功能上都已經(jīng)不能和曾經(jīng)只是展示一張網(wǎng)頁(yè)、只是解析HTML的時(shí)代相比，如今各大廠商都在爭(zhēng)奪這個(gè)真正意義上的“互聯(lián)網(wǎng)第一入口”。目前市面上的瀏覽器雖然品牌眾多，但是其都是根據(jù)幾大開源內(nèi)核來(lái)構(gòu)建，主要分為兩大類：IE系列和非IE系列[16]。</p><p>　　IE基于Trident排版引擎構(gòu)建，由于微軟

74、的商業(yè)目的等諸多原因，IE瀏覽器總是不去很好的實(shí)現(xiàn)Web的標(biāo)準(zhǔn)，導(dǎo)致很多Web工程師要針對(duì)IE進(jìn)行很多單獨(dú)的開發(fā)，而有些卻只對(duì)IE瀏覽器開發(fā)，導(dǎo)致其他非IE瀏覽器的用戶無(wú)法使用，這些問(wèn)題導(dǎo)致了很大的資源浪費(fèi)，不過(guò)這些即將在HTML5時(shí)代解決，以為微軟也清楚，這是一個(gè)互聯(lián)網(wǎng)的時(shí)代了。國(guó)內(nèi)的很多廠商基于IE開發(fā)了一些類似擴(kuò)展的瀏覽器，實(shí)際上就是在IE瀏覽器的外面加了一層殼，不過(guò)由于考慮到了很多用戶的需求，所以很多功能受到用戶的歡迎。國(guó)內(nèi)基于

75、IE做的較好的有遨游、360瀏覽器、搜狗瀏覽器等[17]。非IE系列的瀏覽器大都能夠?qū)?biāo)準(zhǔn)很好的實(shí)現(xiàn)，所以更注重的是性能提升和滿足用戶需求，其中以WebKit內(nèi)核做的做好。</p><p>　　還有一個(gè)較為強(qiáng)大且影響深遠(yuǎn)的瀏覽器，那就是鼎鼎大名的——Firefox（中文名稱火狐），是一個(gè)開源網(wǎng)頁(yè)瀏覽器，使用Gecko引擎(即非ie內(nèi)核)，由Mozilla基金會(huì)與數(shù)百個(gè)志愿者所開發(fā)。由于微軟的IE占有統(tǒng)治地位，有壟

76、斷的傾向，所以需要有一個(gè)開源的而且又強(qiáng)大的瀏覽器來(lái)與之對(duì)抗，而這個(gè)時(shí)候恰恰Firefox誕生了，它基于開源的信仰，很快就發(fā)展起來(lái)了?；饡?huì)的支持，數(shù)百萬(wàn)開發(fā)者的響應(yīng)，linux操作系統(tǒng)愛好者們幾乎都換用firefox。強(qiáng)大而又可擴(kuò)展，但是隨著插件安裝數(shù)量的增多，firefox打開是速度會(huì)下降，打開速度慢一直是firefox遭受詬病的源頭。</p><p>　　如圖2-7為firefox瀏覽器架構(gòu)圖，從架構(gòu)中即可看

77、出，firefox的架構(gòu)過(guò)于龐大，但是也同樣很強(qiáng)大，這樣強(qiáng)大的架構(gòu)使其顯得有些臃腫，導(dǎo)致打開速度慢，用戶體驗(yàn)不佳。</p><p>　　圖2-7 Firefox瀏覽器架構(gòu)圖</p><p>　　基于WebKit構(gòu)建的瀏覽器主要有Google的Chrome、Apple的Safari等。Webkit已解析速度快著稱，而且對(duì)標(biāo)準(zhǔn)鼎力的支持，得到了絕大部分Web工程師的認(rèn)可。而且Webkit中內(nèi)建

78、了一個(gè)開發(fā)者工具，工程師方便進(jìn)行開發(fā)和調(diào)試。值得一提的是，國(guó)內(nèi)的很多瀏覽器廠商看到了IE的問(wèn)題，也在嘗試基于雙內(nèi)核構(gòu)建瀏覽器，如遨游3、搜狗瀏覽器等。</p><p>　　Google的Chrome瀏覽器基于Webkit構(gòu)建，并且Google的工程師們開發(fā)了能夠快速解析Javascript的V8引擎與Webkit搭檔，使得Chrome瀏覽器打開網(wǎng)頁(yè)的速度極快，渲染性能也極強(qiáng)，而且能夠很好的支持HTML5。有Goo

79、gle的強(qiáng)大支持，基于開源項(xiàng)目構(gòu)建的Chrome得到了越來(lái)越多的用戶和開發(fā)者的認(rèn)可。基于Chrome的Chrome軟件商店里面有大量應(yīng)用，使得Chrome更加的強(qiáng)大。但是由于國(guó)內(nèi)的特殊環(huán)境及技術(shù)原因，國(guó)內(nèi)開發(fā)的很多應(yīng)用和站點(diǎn)不支持非IE內(nèi)核的瀏覽器。如圖2-8所示為Chrome瀏覽器架構(gòu)圖，可以看出Chrome的架構(gòu)很小巧，而且每個(gè)模塊又是性能強(qiáng)勁，合理的組織到一起，使Chrome整體性能表現(xiàn)出色，打開速度快，用戶體驗(yàn)較佳。</p

80、><p>　　圖2-8 Chrome瀏覽器架構(gòu)圖</p><p>　　第3章 游戲玩法設(shè)計(jì)和需求分析</p><p>　　3.1 游戲玩法設(shè)計(jì)</p><p>　　根據(jù)網(wǎng)絡(luò)實(shí)時(shí)性特點(diǎn)和技術(shù)復(fù)雜度，設(shè)計(jì)游戲玩法如下：</p><p>　　用戶可以通過(guò)瀏覽器打開游戲，游戲打開后，用戶被自動(dòng)分配到紅方或者綠方陣營(yíng)中，目的就是消滅

81、對(duì)方陣營(yíng)的坦克。游戲中被敵方坦克擊中，就算死亡，相應(yīng)對(duì)的成績(jī)會(huì)加一。</p><p><b>　　3.2 需求分析</b></p><p>　　3.2.1 系統(tǒng)角色</p><p>　　游戲玩家：玩游戲的人，能夠操作坦克在地圖上面行動(dòng)和發(fā)射炮彈。</p><p>　　3.2.1 用例分析</p><p

82、>　　玩家及玩家所具有的功能，如圖3-1。</p><p><b>　　圖3-1 用例圖</b></p><p>　　第4章 總體設(shè)計(jì)及程序功能分析</p><p>　　4.1 程序總體功能設(shè)計(jì)</p><p>　　4.1.1 程序功能模塊分析</p><p>　　該游戲主要分為兩大部分：&

83、lt;/p><p>　　(1) 服務(wù)器端：主要負(fù)責(zé)數(shù)據(jù)的集中管理和數(shù)據(jù)的分發(fā)。</p><p>　　(2) 客戶端：主要負(fù)責(zé)用戶操作，游戲界面繪制、實(shí)現(xiàn)游戲玩法、數(shù)據(jù)的發(fā)送和接收等功能。</p><p>　　如圖4-1為坦克大戰(zhàn)游戲的總體模塊圖。</p><p>　　圖4-1 坦克大戰(zhàn)游戲總體模塊圖</p><p>　　4

84、.1.2 地圖讀取及共享分析</p><p>　　游戲要能夠較容易地自由的修改界面上形成的游戲地圖，且還可以靈活地改變整個(gè)游戲的大小，實(shí)現(xiàn)聯(lián)機(jī)對(duì)戰(zhàn)的所有玩家在地圖生成和改變時(shí)都能夠?qū)崟r(shí)的共享整個(gè)游戲地圖。</p><p>　　4.1.3 聲音的控制分析</p><p>　　根據(jù)游戲設(shè)計(jì)播放聲音，并且部分聲音玩家按鍵控制坦克時(shí)播放，游戲可以自如的播放出聲音，且較為流暢

85、。</p><p>　　4.1.4 聯(lián)網(wǎng)對(duì)戰(zhàn)分析</p><p>　　玩家通過(guò)瀏覽器直接打開游戲，并且能夠和其他玩家聯(lián)機(jī)對(duì)戰(zhàn)，實(shí)時(shí)看到所有玩家的坦克。要想實(shí)現(xiàn)這種功能，我們就要先分析一下現(xiàn)有的技術(shù)和架構(gòu)如何來(lái)實(shí)現(xiàn)。目前，處理客戶端之間的交互有兩種主要架構(gòu)。</p><p>　　對(duì)等網(wǎng)絡(luò)架構(gòu)（Peer-to-Peer，P2P）。信息只在客戶端間傳送，不需要服務(wù)器的介入

86、。可能首先會(huì)使用服務(wù)器讓客戶端間能查找到對(duì)方，但在此之后就不再需要服務(wù)器了。具體的可以分為兩種不同的形式：</p><p>　?、偻暾B接拓?fù)浼軜?gòu)。每個(gè)客戶端與其他每個(gè)客戶端之間都必須有連接，信息可以直接在用戶間交換。</p><p>　?、诃h(huán)狀拓?fù)浼軜?gòu)。信息只有流經(jīng)一個(gè)或多個(gè)客戶端后才能傳遞過(guò)來(lái)。</p><p>　　P2P架構(gòu)的延時(shí)較小，在C/S模式中，信息首先

87、是從一個(gè)客戶端傳到服務(wù)器端，而后再?gòu)姆?wù)器端傳到另一個(gè)客戶端。但P2P架構(gòu)則是讓信息直接在兩個(gè)客戶端間傳遞，這樣就比C/S模式減少了一半的傳遞時(shí)間。另外，P2P不需要服務(wù)器，這對(duì)于無(wú)論是游戲開發(fā)者還是發(fā)布者來(lái)說(shuō)都是一件好事，因?yàn)椴挥迷贋榫S持運(yùn)行游戲中央服務(wù)器而支付主機(jī)托管和管理費(fèi)用了。</p><p>　　但是同時(shí)P2P也有很多的缺點(diǎn)。首先當(dāng)游戲的客戶端相當(dāng)少的時(shí)候，P2P架構(gòu)的延時(shí)很小且不需要使用服務(wù)器端。但是

88、當(dāng)游戲有很多客戶端時(shí)，P2P架構(gòu)就不適用了，因?yàn)樗枰總€(gè)客戶端都和其他客戶端保持一個(gè)獨(dú)特的鏈接，建立了很多鏈接，性能較差，這些都導(dǎo)致P2P游戲的可擴(kuò)展性差。</p><p>　　客戶端-服務(wù)器架構(gòu)（Client-Server，C/S）?？蛻舳酥话研畔魉偷椒?wù)器上，然后服務(wù)器再把信息傳給相應(yīng)的客戶端。</p><p>　　Socket服務(wù)器可于某處運(yùn)行并監(jiān)聽連接嘗試，接受并管理來(lái)自客戶端

89、的連接，智能規(guī)劃客戶端間的信息傳送路線。Socket服務(wù)器依托一個(gè)IP地址或主機(jī)名稱，在至少一個(gè)端口上監(jiān)聽連接嘗試?？蛻舳艘坏┡cSocket服務(wù)器建立起連接，也就和服務(wù)器建立起了持續(xù)不斷的Socket連接。通過(guò)這個(gè)開放的Socket接口，客戶端能夠?qū)⑿畔鬟f給服務(wù)器，反之亦然。這種Socket是開發(fā)并且隨時(shí)可用的，所以信息互相傳遞非?？旖?，更新是基于事件驅(qū)動(dòng)的而且是實(shí)時(shí)的。</p><p>　　所以，本課題采用C

90、/S架構(gòu)的Socket服務(wù)器方式來(lái)實(shí)現(xiàn)服務(wù)器端程序。</p><p><b>　　4.2 程序流程</b></p><p>　　根據(jù)功能模塊劃分，程序主要分為三部分各自獨(dú)立的流程：</p><p>　　服務(wù)器端流程。服務(wù)器端流程每次都由接收到客戶端數(shù)據(jù)改變作為事件觸發(fā)的句柄，之后發(fā)送給所有客戶端。</p><p>　　服

91、務(wù)器端流程如圖4-2所示。</p><p>　　圖4-2 服務(wù)器端流程圖</p><p>　　客戶端界面控制流程。所有程序由定時(shí)器觸發(fā)，每次觸發(fā)就會(huì)去重新繪制當(dāng)前Canvas。第一次創(chuàng)建時(shí)，首先要連接到服務(wù)器獲取到地圖信息，之后再去繪制地圖，生成坦克。</p><p>　　如圖4-3所示，為客戶端打開后連接服務(wù)器生成地圖流程圖。</p><p&g

92、t;　　圖4-3 客戶端打開后連接服務(wù)器生成地圖流程圖</p><p>　　客戶端數(shù)據(jù)發(fā)送流程。每次當(dāng)坦克位置發(fā)生變化，或者地圖發(fā)生變化，則會(huì)觸發(fā)向服務(wù)器發(fā)送數(shù)據(jù)的方法。</p><p>　　如圖4-4所示，為客戶端數(shù)據(jù)發(fā)送流程。</p><p>　　圖4-4 客戶端數(shù)據(jù)發(fā)送流程</p><p>　　4.3 模塊及對(duì)應(yīng)的方法</p>

93、;<p>　　主要模塊分為服務(wù)器端和客戶端：</p><p><b>　　服務(wù)器端模塊：</b></p><p>　　服務(wù)器端模塊具體功能有調(diào)用服務(wù)器Nodejs模塊、調(diào)用WebSocket Server來(lái)提供服務(wù)器端基礎(chǔ)應(yīng)用模塊。然后通過(guò)具體方法處理客戶端的連接、數(shù)據(jù)的接受和分發(fā)。</p><p>　　如圖4-4為服務(wù)器端模塊所

94、包含的具體方法。</p><p>　　圖4-5 服務(wù)器端模塊方法圖</p><p><b>　　客戶端模塊：</b></p><p>　　客戶端主要負(fù)責(zé)用戶操作，游戲界面繪制、實(shí)現(xiàn)游戲玩法、數(shù)據(jù)的發(fā)送和接收等功能。分為基礎(chǔ)類模塊ClassBase（如圖4-5）、游戲主函數(shù)模塊ClassGame（如圖4-6）、地圖模塊ClassMap（如圖4-7

95、）、游戲坦克模塊ClassTank（如圖4-8）和聲音控制模塊ClassSound（如圖4-9）。</p><p>　?、賐ase模塊中有l(wèi)oadImage方法，該方法可以讀取圖片，并且在圖片加載完成后，異步調(diào)用傳入的其他方法。</p><p>　　圖4-6 客戶端base模塊方法圖</p><p>　　②ClassGame模塊是整個(gè)游戲運(yùn)行的主邏輯住調(diào)用的類，其中

96、有主入口函數(shù)init()、當(dāng)服務(wù)器器打開時(shí)觸發(fā)方法onopen()、接收數(shù)據(jù)方法onmessage()、鍵盤事件控制方法control()、游戲開始start()和游戲總的時(shí)間觸發(fā)器move()。</p><p>　　圖4-7 客戶端游戲總控制Game模塊圖</p><p>　?、跜lassMap模塊是地圖相關(guān)方法模塊，其中主要有清除某一位置地圖方法clean()、清除所有地圖方法clea

97、nAll()、繪制某一位置地圖方法draw()、繪制全部位置地圖方法drawAll()、取得某位置z-index數(shù)值方法getZ_index()等。</p><p>　　圖4-8 客戶端地圖相關(guān)Map模塊圖</p><p>　?、蹸lassTank是玩家控制的Tank的主要方法的類，其中有生成新坦克的birth方法、取得下一步的方法getNextStep()和繪制坦克drawTank()等

98、方法。</p><p>　　圖4-9 客戶端tank模塊圖</p><p>　?、軨lassSound方法是聲音控制類，其中有基本的聲音控制方法，播放聲音play()和暫停播放pause()等方法。</p><p>　　圖4-10 客戶端聲音相關(guān)Sound模塊圖</p><p><b>　　第5章 詳細(xì)設(shè)計(jì)</b><

99、;/p><p>　　5.1 服務(wù)器端設(shè)計(jì)</p><p>　　5.1.1 服務(wù)器端的運(yùn)行環(huán)境</p><p>　　服務(wù)器端環(huán)境使用的是Cygwin在window7操作系統(tǒng)下內(nèi)建一個(gè)linux，類似于在虛擬機(jī)中安裝linux環(huán)境?；诖税惭bNodejs的包管理NPM，之后安裝并配置Nodejs。除了Nodejs運(yùn)行環(huán)境外，還需要一個(gè)Web發(fā)布環(huán)境，本課題采用Apache作

100、為Web頁(yè)面發(fā)布程序[18]。</p><p>　　5.1.2 服務(wù)器端的設(shè)計(jì)</p><p>　　服務(wù)器端需要保證實(shí)時(shí)性和統(tǒng)一性，所以首先我們要考慮下需要同步的數(shù)據(jù)量：</p><p>　?、俚貓D數(shù)據(jù)。地圖數(shù)據(jù)需要先寫好在服務(wù)器端，當(dāng)用戶連接時(shí)才能保證每臺(tái)機(jī)器的數(shù)據(jù)都是同一的，每臺(tái)客戶端都先請(qǐng)求地圖數(shù)據(jù)，然后繪制地圖。</p><p>　　

101、②坦克數(shù)據(jù)。每個(gè)客戶端都要能夠?qū)崟r(shí)的獲取到其他客戶端的數(shù)據(jù)信息，這樣才能夠?qū)崿F(xiàn)實(shí)時(shí)互聯(lián)。</p><p>　　③炮彈信息。每個(gè)客戶端都要能夠發(fā)射出炮彈，而炮彈信息也需要實(shí)時(shí)傳送。</p><p>　　所有這些信息的改變都是基于事件觸發(fā)的，這樣才能夠有效的減少服務(wù)器與客戶端之間傳輸?shù)臄?shù)據(jù)量，并且又不影響較高的實(shí)時(shí)性[19]。</p><p>　　實(shí)現(xiàn)方法：服務(wù)器端主要

102、使用事件觸發(fā)機(jī)制的幾個(gè)關(guān)鍵方法來(lái)完成數(shù)據(jù)共享，方法如下：</p><p>　　①當(dāng)有新客戶端連接之后觸發(fā)的事件：</p><p>　　server.addListener("connection", function(conn){})。</p><p>　?、诮邮盏娇蛻舳税l(fā)來(lái)的數(shù)據(jù)時(shí)觸發(fā)的事件：</p><p>　　con

103、n.addListener("message", function(message){})。</p><p>　?、巯蛩锌蛻舳朔职l(fā)數(shù)據(jù)的事件：</p><p>　　server.broadcast(message)。</p><p>　　5.1.3 服務(wù)器端部分代碼</p><p>　　以下代碼實(shí)現(xiàn)了服務(wù)器端的基本功能，

104、和程序的基本數(shù)據(jù)傳輸功能：</p><p>　　var http = require('http');</p><p>　　var sys = require('sys');</p><p>　　var ws = require('/home/test/node-websocket-server/lib/ws/server&#

105、39;);</p><p>　　var os=require('os');</p><p>　　var fso = require('fs');</p><p>　　var port=8000;//端口號(hào)</p><p>　　var speed=30;//游戲速度</p><p>　　v

106、ar server = ws.createServer();//建立websocket</p><p>　　server.listen(port);//監(jiān)聽端口</p><p>　　console.log('服務(wù)器端程序開始運(yùn)行，端口號(hào)是：'+port+'，請(qǐng)注意設(shè)置好客戶端訪問(wèn)IP和端口號(hào)！');//輸出服務(wù)器運(yùn)行消息</p><p&g

107、t;　　var tankList=[];//儲(chǔ)存坦克信息</p><p>　　var flag=0;</p><p><b>　　//地圖初始數(shù)組</b></p><p>　　// 0是空，1是紅磚，2是水泥墻，3是草，4是河</p><p>　　var mapArray=[</p><p>　　

108、[0,0,1,1,2,2,3,2,3,0,1,2,3,0,1,2,2,3,2,3,0,1,2,3,0,1,2,2,3,2,3,0,1,2,3,0,0,0,0],</p><p>　　[0,0,1,1,2,2,3,2,3,0,1,2,3,0,1,2,2,3,2,3,0,2,3,0,1,2,2,3,2,3,0,1,2,3,0,0,0,0,0]</p><p><b>　　];<