【正文】 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 34 圖 關(guān)卡二 圖中出現(xiàn)的深黃色的方塊為磚墻，而白色的則為鐵墻。 但是大多數(shù)的 canvas 繪圖的 API 并沒有定義在該元素本身上，而是定義在通過畫布的 getContext()方法，用此方法獲得相應(yīng)的對象。 } else if(map[i][j]==13){ (img, 8 + mapx, mapy, 8, 16, j*16+8 + offerX, i*16 + offerY, 8, 16) 。 } else if(map[i][j]==HOME){繪制地圖中的基地 (img,0 + homex, homey, 32, 32, j*16 + offerX, i*16 + offerY, 32, 32) 。j++){ if(map[i][j]==WALL){繪制地圖中的磚墻 (img,mapx, mapy,16,16,j*16 + offerX, i*16 + offerY,16,16) 。 for(var i=0。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 30 = 7f7f7f。 j++ ){ map[i][j] =tempMap[i][j]。//聲明變量 tempMap，用來存放關(guān)卡 for (i = 0。具體代碼如下： 關(guān)卡的選擇： function selectMap(level){ var i,j。 tanks[i].score ++。當(dāng)前在屏幕里的敵方坦克全部爆炸 break。 break。 casefoodHome: changeHome(true)。 i ++){ if(tanks[i].hitTestObject(food)){ 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 28 switch(){ casefoodLife: tanks[i].live ++。隨機(jī)生成縱坐標(biāo) }。 = parseInt(() * 6)。其具體（部分）代碼如下： = newSprite()。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 27 坦克被擊毀的過程中，依然依賴于 graphics()函數(shù)，通過該函數(shù)去調(diào)用相應(yīng)的圖像去達(dá)到清除的效果。 } break。returntrue。 } case DOWN:{ if(()) { += 。 var RIGHT = 3。如當(dāng)方向?yàn)?up 時(shí)，相應(yīng)的 y 值就會做出變化，而具體的變化需要根據(jù)當(dāng)前坦克的行駛速度決定的。 () * 4 = 2 ) { = RIGHT。} else if( dir == RIGHT amp。amp。 i == UP amp。amp。//將隨機(jī)生成的數(shù)用函數(shù) paresInt 轉(zhuǎn)換成整數(shù)并賦值給變量 i var dir = 。 //使用函數(shù) ()隨機(jī)生成大于等于 且小雨 的隨機(jī)數(shù)。 = 70。坦克行駛方向的前一方向 = speed。我方坦克在相應(yīng)的時(shí)間吃掉出現(xiàn)在屏幕里的道具可以獲得特定的獎(jiǎng)勵(lì)功能。在炮彈遇到坦克或者敵我雙方坦克相撞時(shí)，爆炸的同時(shí)還要刷新屏幕，最終消失。當(dāng)炮彈從我方坦克發(fā)射時(shí)需要鍵盤事件來控制的，這樣可以提高該游戲的可玩性。 我方坦克擊敗敵方坦克的唯一方式是通過移動射擊炮彈，而躲避敵方坦克是通過躲避敵方的炮彈或者在游戲規(guī)定的時(shí)間內(nèi)吃到相應(yīng)的獎(jiǎng)勵(lì)物品。 游戲程序用例圖 圖 程序用例圖 程序中 Tank 的設(shè)定是主要的，在 Tank 中定義了移動的方法 ,即采用偽隨機(jī)函數(shù) (系統(tǒng)調(diào)用 )生成移動的效果，而 Mytank 則繼承自 Tank，但是其炮彈的發(fā)射和其自身的移動都是通過鍵盤處理函數(shù)和實(shí)現(xiàn)的。 在 haed部分定義了： (1) meta charset=GB2312 編碼格式 gb2312 用來顯示中文 (2) title基于 HTML5 的坦克大戰(zhàn) /title定義了頁面上方的名稱 (3) style type=text/css定義了使用 css 圖形疊加技術(shù)來繪制圖像 (4) script type=text/javascript = function(){main()}在這里定義了腳本語言是 javascript，其次 則是在頁面載入時(shí)運(yùn)行 main()函數(shù)，而 main()是單獨(dú)的 .js 文件中定義的。 （ 5） Mytank：與上面的相比，最大的區(qū)別就是方向的控制，這時(shí)的坦克是由玩家通過鍵盤來控制的。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 19 4 概要設(shè)計(jì) 總體流程設(shè)計(jì) 開始游戲，在開始界面選擇玩家數(shù)，之后進(jìn)入第一關(guān)卡，初始化玩家和敵方的坦克，同時(shí)初始化第一關(guān)的地圖，開始游戲后玩家通過控制鍵盤來消滅敵方坦克進(jìn)入下一關(guān)卡直至最后通關(guān)。開始游戲時(shí)，我方坦克可以自由控制發(fā)射炮彈，而敵方坦克在創(chuàng)建時(shí)便可自發(fā)地發(fā)射炮彈。 運(yùn)行環(huán)境 （ 1） 硬件平臺： HP 筆記本 （ 2）操作系統(tǒng)和版本： Windows 7 旗艦版 （ 3）支持環(huán)境：能支持 HTML5 環(huán)境的瀏覽器 坦克大戰(zhàn)主要需要的元素有： (1) 我方坦克 。在任天堂上運(yùn)行的被后世大家稱之為 “經(jīng)典 ”的游戲是由日本 Namco 游戲公司開發(fā)。這份軟件產(chǎn)品需求分析報(bào)告只與整個(gè)系統(tǒng)的某個(gè)部分有關(guān)系，那么只是定義軟件產(chǎn)品需求分析報(bào)告中說明的那個(gè)部分或子系統(tǒng)。比較新的技術(shù)有創(chuàng)建模型和使用用例。新系統(tǒng)很可能改變?nèi)酥g的關(guān)系和人的工作環(huán)境，因此認(rèn)定誰是重要的信息持有者是非常重要的。只有在確定了這些需要后，他們才能夠分析和尋求新系統(tǒng)的解決方法。需求分析有可能在一個(gè)項(xiàng)目中成為一個(gè)漫長、艱巨的工作。 WebKit 簡易小巧，并能有效率的運(yùn)用存儲器，符合 Google 理念，并且對新開發(fā)者來說相當(dāng)容易上手。 Chorme 能容許多個(gè)程序同時(shí)運(yùn)行而互不影響，每個(gè)網(wǎng)頁標(biāo)簽獨(dú)立于窗口程序存在，當(dāng)資源過高或崩潰時(shí)，不會因?yàn)橐粋€(gè)停頓而整個(gè)程序當(dāng)?shù)簟? “Google Chrome”會定期地更新防止網(wǎng)絡(luò)釣魚和惡意軟件的黑名單，并在用戶試圖瀏覽可能造成電腦損害的網(wǎng)站時(shí)予以警告。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 14 圖 最新的 IE9 瀏覽器 Google Chrome 是一個(gè)由 Google 開發(fā)的網(wǎng)頁瀏覽器。 Inter Explorer 依靠 DOCTYPE 判斷一個(gè)網(wǎng)頁應(yīng)該按老版本渲染還是按 W3C 標(biāo)準(zhǔn)渲染（在打印中， Inter Explorer 總使用 W3C 標(biāo)準(zhǔn)。它自帶的 XML 解釋器支持 XHTML，但是微軟從 IE 以后取消了這一支持，使它變得難以訪問。 Inter Explorer 可通過組群原則進(jìn)行完全配置。它允許對大量的功能進(jìn)行限制，也允許 只對指定功能進(jìn)行限制。目前最新穩(wěn)定版本是 Inter Explorer 11，此版本在速度、標(biāo)準(zhǔn)支持和界面均有很大的改善，并支持 SPDY、增強(qiáng)的開發(fā)者工具以及 WebGL。是微軟推出的一款網(wǎng)頁瀏覽器。插件架構(gòu)能夠支持將 任意的擴(kuò)展加入到現(xiàn)有環(huán)境中，例如配置管理，而決不僅僅限于支持各種編程語言。 Eclipse軟件的核心很小，其它所有功能都以插件的形式存在于 Eclipse之上，而開發(fā)者可以根據(jù)自己的實(shí)際需要隨意添加刪減。 在胖客戶機(jī)平臺上， Eclipse使用插件來提供所有的附加功能，例如支持 Java以外的其他語言。 Eclipse的基礎(chǔ)是 富客戶機(jī)平臺 （即 RCP）。 Eclipse 介紹 Eclipse是著名的 跨平臺 開源 集成開發(fā)環(huán)境 （ IDE）。同時(shí)，有些特殊功能（如 AJAX）必須依賴 Javascript在客戶端進(jìn)行支持。 (3)可以直接嵌入 HTML頁面，但寫成單獨(dú)的 js文件有利于結(jié)構(gòu)和行為的分離。 (2)文檔對象模型（ DOM），描述處理網(wǎng)頁內(nèi)容的方法和接口 。 為了獲取技術(shù)優(yōu)勢，微軟推出了 JScript，與 JavaScript同樣可在瀏覽器上運(yùn)行。 在 1995年時(shí)，由網(wǎng)景公司的布蘭登 所有主流瀏覽器均支持服務(wù)器發(fā)送事件，除了 Inter Explorer。ServerSent 事件 單向消息傳遞。然后創(chuàng)建 context對象。 fillStyle 方法將其染成紅色， fillRect 方法規(guī)定了形狀、位置和尺寸。而如何在 HTML5中播放音頻，所需的是： audio src = “” controls = “controls”/audio,其中 control屬性提供播放，暫停和聲音控件。然而并非所以的瀏覽器都擁有同樣的插件。同時(shí)為其他瀏覽要素提供了新的功能，通過一個(gè)標(biāo)準(zhǔn)接口，如 audio和 video標(biāo)記。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 8 2課題涉及的相關(guān)技術(shù)和開發(fā)環(huán)境介紹 2020年 9月， W3C提出計(jì)劃要在 2020年底前發(fā)布一個(gè) HTML5推薦標(biāo)準(zhǔn)?，F(xiàn)在國外《金融時(shí)報(bào)》、《紐約時(shí)報(bào)》等傳統(tǒng)媒體都已經(jīng)嘗試用 HTML5 的方式來分發(fā)移動應(yīng)用。 HTML5 應(yīng)用大量的出現(xiàn)會導(dǎo)致移動端有可能誕生 HTML5 應(yīng)用的 showcase，極有可能產(chǎn)生類似于韓國Anipang 這樣的成功游戲應(yīng)用。當(dāng)基于 HTML5 的移動 App 性能和表現(xiàn)上非常趨近于 Native App，而且有成熟的開發(fā)標(biāo)準(zhǔn)時(shí)，會出現(xiàn)一個(gè) App 大量向 HTML5 遷移的浪潮，導(dǎo)致的結(jié)果是用戶也大量向 HTML5 應(yīng)用轉(zhuǎn)移。桌面端 IE 逐步衰落，支持 HTML5 的現(xiàn)代瀏覽器逐步占領(lǐng)市場已經(jīng)是顯而易見的事情。 (2）支持圖片手勢操作：用過 iPad 的朋友都對相冊方便快捷的手勢操作贊不絕口。共生共贏，各擅勝場，它們有各自適合的場景和用途，會逐漸并存下去。 這一方面比較有代表性要數(shù) Linkedin iPad 版，它 95%以上都采用 HTML5 開發(fā)，性能和界面都非常優(yōu)秀，而為了保證良好的性能體驗(yàn)，設(shè)計(jì)時(shí)特意去掉了許多不必要的設(shè)計(jì)元素，例如所有的漸變背景和圓角，因?yàn)檫@會造成渲染性能降低。如果 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 5 我們能夠通過 Web App 獲取更多開放的信息與數(shù)據(jù)結(jié)構(gòu)，才能更好的迎接和擁抱大數(shù)據(jù)時(shí)代。如果出現(xiàn)重大 bug 或者質(zhì)量問題，通過新版本修復(fù)是極其麻煩的事情，在這個(gè)過程中蘋果 App Store 的審核期也讓很多開發(fā)者非常頭疼。這可以極大減少跨平臺開發(fā)人員數(shù)量和成本。而基于 html5 開發(fā)的應(yīng)用也隨著遍地開花。該規(guī)范定義了第五次重大版本，在這個(gè)版本中，新的功能不斷推出。此時(shí)的 html5 仍需要完善，然而，大部分瀏覽器已經(jīng)可以支持 html5。 W3C（ World Wide Web Consortium， 萬維網(wǎng) 聯(lián)盟） 專注于 。之后在短短的 20 年時(shí)間里， 20世紀(jì) 90 年代的人見證了 html 的跨越式的發(fā)展， 版， 版到 版，再到 1999 年的 版，此時(shí)再看 html 的發(fā)展，其技術(shù)已經(jīng)非常的成熟了。但后來隨著人們需求的不斷增加，游戲軟件也越來越大，這時(shí)就需要強(qiáng)大的計(jì)算機(jī)性能的支持，但計(jì)算機(jī)性能的提高就意味著成本的增加，所以有人就利用html 讓游戲直接在網(wǎng)頁中運(yùn)行，玩家可以省去下載身體龐大的客戶端，打開網(wǎng)頁就能享受游戲帶來的樂趣，如曾經(jīng)風(fēng)靡一時(shí)的 “qq 農(nóng)場 ”，操作簡單方便快捷。 電腦游戲，其出現(xiàn)與 1960 年代電子計(jì)算機(jī)進(jìn)入美國大學(xué)校園有密切關(guān)系?，F(xiàn)在 html5 已經(jīng)使一個(gè)成熟的技術(shù)，在 web 這個(gè)平臺上，它可以將圖像，動畫，音樂等很好與電腦交互。 (3)設(shè)備兼容特性（為網(wǎng)頁應(yīng)用開發(fā)者提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢，并且提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口，使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連） 。 Html5 的前身是超文本標(biāo)記語言（ html），而它則是第五次重大修改，經(jīng)過了將近8 年的艱辛努力，該標(biāo)準(zhǔn)才制定完成。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 目錄 1 緒論 ................................................................ 1 課題的目的和意義 ................................................ 1 國內(nèi)外發(fā)展現(xiàn)狀 .............................................. 3 課題的功能介紹 ................................................ 7 2 課題涉