畢業(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ā)展和計算

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

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

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

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

6、</p><p>　　關(guān)鍵詞：HTML5；互聯(lián)網(wǎng)實時性通信；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 國內(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ā)方法簡介6</p><p>　　2.1 相關(guān)技術(shù)簡介6</p><p>　　2.1.1 HTM

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

15、和Chrome瀏覽器介紹14</p><p>　　第3章 游戲玩法設(shè)計和需求分析17</p><p>　　3.1 游戲玩法設(shè)計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è)計及程序功能分析18</p><p>　　4.1 程序總體功能設(shè)計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)對戰(zhàn)分析19</

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

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 坦克模塊的部分實現(xiàn)代碼31</p><p>　　5.4 炮彈模塊的功能35</p><p>　　5.4

20、.1 讀取服務(wù)器端信息35</p><p>　　5.4.2 碰撞檢測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)對人們的生活也在不斷地變化和加強，人們漸漸地已

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

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

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

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

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

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

28、能夠編寫一個游戲程序帶給用戶快樂，這無疑也會帶給自己成就感并且是一件很有意義和價值的事情。</p><p>　　1.2 國內(nèi)外發(fā)展現(xiàn)狀</p><p>　　HTML的發(fā)展歷經(jīng)了多個年代，但時間其實不過也在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ǎng)聯(lián)盟）掌握了對HTML規(guī)范的控制權(quán)。然而在快速發(fā)布了這四個版本之后，業(yè)界普遍認(rèn)為HTML已經(jīng)到了窮途末路，對Web標(biāo)準(zhǔn)的焦點也開始轉(zhuǎn)移到了XML（一種數(shù)據(jù)存儲的形式）和XHTML（XHTML類似HTML的一種標(biāo)記語言，也同樣是Web開發(fā)的一個標(biāo)準(zhǔn)，要求頁面結(jié)構(gòu)像XML一樣嚴(yán)謹(jǐn)）上，HTML被放到了次要的位置。不過在此期間，HTML體現(xiàn)了頑強的生命力，主要的網(wǎng)站內(nèi)容還是基于HTML的。為能支持新的Web應(yīng)用，同時克服現(xiàn)有的缺點

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

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

32、形式發(fā)布了，但還不是最終版本，不過現(xiàn)在在移動終端和Apple公司為主的產(chǎn)品的推動下，HTML5已經(jīng)得到了廣泛的使用[3]。</p><p>　　HTML5草案的前身名為Web Applications 1.0，是在2004年由WHATWG提出，再于2007年獲W3C接納，并成立了新的HTML工作團(tuán)隊。在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ā)人員中非常出名了，但是它成為主流媒體的一個話題還是在2010年的4月，當(dāng)時Apple公司的CEO喬布斯發(fā)表一篇題為“對flash的思考”的文章，指出隨著HTML5的發(fā)展，觀看視

34、頻或其它內(nèi)容時，Adobe Flash將不再是必須的。這引發(fā)了開發(fā)人員間的爭論，包括HTML5雖然提供了增強的功能，但開發(fā)人員必須考慮到不同瀏覽器對標(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ù)美國知名科技博客網(wǎng)站TechCrunch報道，F(xiàn)acebook（一家美國的社交網(wǎng)站，現(xiàn)在被譽為全世界最火

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

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

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

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

39、cript運行環(huán)境。實際上它是對Google V8引擎進(jìn)行了封裝（Google V8引擎是用來解析Javascript的專用運行環(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來開發(fā)動畫效果。</p><p>　　基于HTML5 WebSocket的實時數(shù)據(jù)傳輸。</p><p>　　服務(wù)器端Nodejs的使用。</p><p>　　基于HTML5 Audio來實現(xiàn)控制聲音。</p><p>　　網(wǎng)絡(luò)實時性游戲的設(shè)計和實現(xiàn)。</p><p>　　地圖的繪制與實時

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

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

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

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

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

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

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

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

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

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

51、、集成的、腳本式的處理音頻與視頻的API，而無需安裝任何插件。</p><p>　　通信網(wǎng)絡(luò)Communication APIs：構(gòu)建實時和跨源（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，一個本地的SQL數(shù)據(jù)庫。</p><p>　　WebSocket，一個基于瀏覽器的socket（一種網(wǎng)絡(luò)協(xié)議，支持所有的互聯(lián)網(wǎng)通信），支持實時性的數(shù)據(jù)傳輸。</p><p>　　其他：離線存儲數(shù)據(jù)庫（離線網(wǎng)絡(luò)應(yīng)用程序）、編輯、拖放等。&l

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

71、人知的是它非常強悍的Javascript編輯器和調(diào)試器，去年Aptana吸收了Radrails項目，添加了非常強大的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家族打開速度較慢、運行需要資源量較多等缺點。</p><p>　　如圖2-6是Aptana的集成開發(fā)界面，整個界面默認(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)頁、只是解析HTML的時代相比，如今各大廠商都在爭奪這個真正意義上的“互聯(lián)網(wǎng)第一入口”。目前市面上的瀏覽器雖然品牌眾多，但是其都是根據(jù)幾大開源內(nèi)核來構(gòu)建，主要分為兩大類：IE系列和非IE系列[16]。</p><p>　　IE基于Trident排版引擎構(gòu)建，由于微軟

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

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

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

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

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

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

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

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

82、>　　玩家及玩家所具有的功能，如圖3-1。</p><p><b>　　圖3-1 用例圖</b></p><p>　　第4章 總體設(shè)計及程序功能分析</p><p>　　4.1 程序總體功能設(shè)計</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é)用戶操作，游戲界面繪制、實現(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>　　游戲要能夠較容易地自由的修改界面上形成的游戲地圖，且還可以靈活地改變整個游戲的大小，實現(xiàn)聯(lián)機(jī)對戰(zhàn)的所有玩家在地圖生成和改變時都能夠?qū)崟r的共享整個游戲地圖。</p><p>　　4.1.3 聲音的控制分析</p><p>　　根據(jù)游戲設(shè)計播放聲音，并且部分聲音玩家按鍵控制坦克時播放，游戲可以自如的播放出聲音，且較為流暢

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

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

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

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

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

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

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

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

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

94、包含的具體方法。</p><p>　　圖4-5 服務(wù)器端模塊方法圖</p><p><b>　　客戶端模塊：</b></p><p>　　客戶端主要負(fù)責(zé)用戶操作，游戲界面繪制、實現(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>　　①base模塊中有l(wèi)oadImage方法，該方法可以讀取圖片，并且在圖片加載完成后，異步調(diào)用傳入的其他方法。</p><p>　　圖4-6 客戶端base模塊方法圖</p><p>　?、贑lassGame模塊是整個游戲運行的主邏輯住調(diào)用的類，其中

96、有主入口函數(shù)init()、當(dāng)服務(wù)器器打開時觸發(fā)方法onopen()、接收數(shù)據(jù)方法onmessage()、鍵盤事件控制方法control()、游戲開始start()和游戲總的時間觸發(fā)器move()。</p><p>　　圖4-7 客戶端游戲總控制Game模塊圖</p><p>　　③ClassMap模塊是地圖相關(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>　　⑤ClassSound方法是聲音控制類，其中有基本的聲音控制方法，播放聲音play()和暫停播放pause()等方法。</p><p>　　圖4-10 客戶端聲音相關(guān)Sound模塊圖</p><p><b>　　第5章 詳細(xì)設(shè)計</b><

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

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

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

102、使用事件觸發(fā)機(jī)制的幾個關(guān)鍵方法來完成數(shù)據(jù)共享，方法如下：</p><p>　?、佼?dāng)有新客戶端連接之后觸發(fā)的事件：</p><p>　　server.addListener("connection", function(conn){})。</p><p>　　②接收到客戶端發(fā)來的數(shù)據(jù)時觸發(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>　　以下代碼實現(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;//端口號</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ù)器端程序開始運行，端口號是：'+port+'，請注意設(shè)置好客戶端訪問IP和端口號！');//輸出服務(wù)器運行消息</p><p&g

107、t;　　var tankList=[];//儲存坦克信息</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>　　];<