基與HTML5的塔防游戲設(shè)計(jì)與實(shí)現(xiàn)

本科論文目錄TOC\o"1-3"\h\u18927摘要 I81Abstract II25535引言 140701項(xiàng)目背景與相關(guān)技術(shù) 324451.1背景與發(fā)展簡(jiǎn)介 3240531.2HTML5技術(shù)及其優(yōu)勢(shì) 4106411.3JavaScript開發(fā)的優(yōu)勢(shì)與劣勢(shì) 413921.4CSS樣式表在開發(fā)中的用處 5107971.5本章小結(jié) 6301062系統(tǒng)分析 7323392.1需求分析 770012.2問題分析 7302502.3流程設(shè)計(jì) 724952.3功能分析 8301682.4本章小結(jié) 10174603系統(tǒng)界面設(shè)計(jì)與優(yōu)化 11193533.1技術(shù)支持 1178553.2初始數(shù)據(jù)設(shè)計(jì) 11265063.3炮臺(tái)屬性設(shè)計(jì) 1132843.4怪獸屬性設(shè)計(jì) 1227703.5游戲初始設(shè)定 13161223.6游戲選項(xiàng)指令設(shè)定 13289413.7游戲失敗設(shè)計(jì) 1493133.8本章小結(jié) 14200124系統(tǒng)實(shí)現(xiàn) 15256374.1功能實(shí)現(xiàn)效果 1531034.1.1打開游戲界面 15109244.1.2放置建筑物 15202314.1.3升級(jí)建筑物 16224334.1.4游戲失敗 17152994.2本章小結(jié) 18145285系統(tǒng)測(cè)試 1971845.1模塊功能測(cè)試 1981865.2性能測(cè)試 1952785.3本章小結(jié) 2022458結(jié)論 211216致謝 2220049參考文獻(xiàn) 239377附錄源程序清單 25本科論文摘要現(xiàn)如今，HTML5技術(shù)的飛速發(fā)展，同時(shí)也是帶動(dòng)了網(wǎng)頁塔防游戲開發(fā)行業(yè)的飛快發(fā)展。本游戲是由個(gè)人開發(fā)和設(shè)計(jì)的基于最新HTML5技術(shù)的網(wǎng)頁塔防游戲，是一款既簡(jiǎn)單又休閑有趣的益智塔防類的小游戲，主要是利用了最新HTML5的不同標(biāo)簽來設(shè)計(jì)和構(gòu)造了主標(biāo)題頁面，使用了最新的CSS3樣式標(biāo)簽來進(jìn)行潤(rùn)飾頁面，利用先進(jìn)的Javascript腳本開發(fā)技術(shù)去設(shè)計(jì)和實(shí)現(xiàn)網(wǎng)頁游戲的主要操作邏輯和算法，采用這些最新的網(wǎng)絡(luò)前端腳本開發(fā)技術(shù)，使得游戲運(yùn)行時(shí)無需任何安裝，用瀏覽器就是可以輕松打開，具有良好的安全性和用戶網(wǎng)絡(luò)游戲體驗(yàn)。隨著現(xiàn)代網(wǎng)絡(luò)自動(dòng)化技術(shù)的發(fā)展，輕型的傳統(tǒng)網(wǎng)頁游戲也越來越多的受到了用戶的廣泛喜愛，而目前使用HTML5開發(fā)的輕型網(wǎng)頁游戲已經(jīng)不再服輸于那些使用第三方插件進(jìn)行開發(fā)的中小型傳統(tǒng)網(wǎng)頁游戲。本文主要的靈感是來源自大火的簡(jiǎn)易版保衛(wèi)蘿卜，筆者對(duì)游戲進(jìn)行了大量的提煉以及簡(jiǎn)化，塔防游戲主要通過在塔防游戲的地圖上裝置特定的炮塔，阻止敵人進(jìn)攻的策略型塔防游戲。本次的塔防游戲項(xiàng)目就是在塔防地圖上的特定位置和地點(diǎn)可以裝置多種防御能力不同的塔防炮臺(tái)以及抵御多種怪獸的攻擊和入侵。同時(shí)在游戲中玩家每場(chǎng)的戰(zhàn)斗將會(huì)都會(huì)擁有多種的道具可以讓玩家的防守更加輕松。通過設(shè)計(jì)本次的塔防游戲項(xiàng)目對(duì)HTML5的網(wǎng)頁游戲應(yīng)用進(jìn)行一個(gè)常用的標(biāo)簽和腳本的總結(jié)研究，通過學(xué)習(xí)如何使用這些標(biāo)簽和腳本來對(duì)于網(wǎng)頁類塔防游戲應(yīng)用在設(shè)計(jì)過程中時(shí)會(huì)有可能出現(xiàn)的一些問題和方法進(jìn)行一個(gè)總結(jié)性的探究，根據(jù)已有的基礎(chǔ)知識(shí)以及相關(guān)的參考文獻(xiàn)進(jìn)行找尋腳本以及更多的相關(guān)設(shè)計(jì)方面的基礎(chǔ)知識(shí)。關(guān)鍵詞：HTML5；JavaScript；塔防游戲；CSS

AbstractNowadays,thedevelopmentofHTML5technologyalsodrivestherapiddevelopmentofthewebgameindustry.ThetowerdefensegamebasedonHTML5technologydesignedbythisprojectisacasualpuzzlegame.ItmainlyusesthedifferenttagsofHTML5toconstructthemainpage,usestheCSS3styletoretouchthepage,andusesJavaScripttorealizethemainlogicalalgorithmofthegame.Usingthelatestfront-endtechnology,thegamecanbeopeneddirectlywiththebrowserwithoutinstallingplug-ins,andusershaveagoodgameexperience.WiththedevelopmentofWebTechnology,lightwebgamesarebecomingmoreandmorepopularwithusers.WebGamesdevelopedusingHTML5arenolessthantraditionalwebgamesdevelopedusingthirdpartyplugins.Andbecauseofitssmallsize,therehavebeenalotofsimpleversionofwebgames.Thisarticleismainlytointroduceoneofthetowerdefensegame.Thedeveloper'sinspirationisfromthesourceoffiredefenseradish.Thedevelopersrefinedthesimplicityanddesignedasimpleversionoftheguardianradishbasedonit.Towerdefensegamemainlyrepresentsakindofstrategygamethatpreventstheenemyfromattackingbyinstallingturretsonthegamemap.Thisgameisamapofspecificlocationsintheinstallationofmultiplecapabilitiesofthebatterytoresisttheinvasionofavarietyofdifferentmonsters,andplayerswillhaveadifferentbuildingforeachbattletodefend.ThepurposeofthedeveloperistodesignthisprojectthroughtheHTML5applicationofacommontagandscripttoresearchandapplication,andtosummarizeandexploretheproblemsinwebgamedesignthroughtags,andtofindmorerelevantknowledgebasedonexistingknowledgeandreferences.Keywords:HTML5;JavaScript;towerdefensegame;CSS引言進(jìn)入新的時(shí)代，HTML5正在成為引領(lǐng)新的時(shí)代游戲發(fā)展的新一個(gè)潮流，隨之而來的也必然帶動(dòng)了互聯(lián)網(wǎng)游戲開發(fā)行業(yè)的繁榮和飛速發(fā)展[1]。與傳統(tǒng)客戶端高設(shè)備開發(fā)速度要求網(wǎng)游的開發(fā)相比，網(wǎng)頁游戲的研發(fā)實(shí)現(xiàn)難度和成本相對(duì)較低[2]，設(shè)計(jì)產(chǎn)品研發(fā)和市場(chǎng)經(jīng)營(yíng)過程所需要前期投入的大量資金和成本相對(duì)較低，研發(fā)的周期也相對(duì)較短，游戲產(chǎn)品上線之后需要資金回籠的速度較快，使得傳統(tǒng)的企業(yè)游戲平臺(tái)可快速的運(yùn)行，這些優(yōu)勢(shì)的組合令得網(wǎng)頁企業(yè)游戲一直以來備受廣大游戲玩家和開發(fā)商的喜愛，長(zhǎng)期保持著高速的增長(zhǎng)。本項(xiàng)目將真正的將HTML5游戲的設(shè)計(jì)核心展現(xiàn)出來，拋去以往其他游戲的華而不實(shí)，以最基本的操作來展現(xiàn)塔防游戲的精髓。開發(fā)時(shí)參考一款經(jīng)典的塔防游戲保衛(wèi)蘿卜進(jìn)行大致界面設(shè)計(jì)，拋去界面復(fù)雜的UI設(shè)計(jì)，只采用最基本的設(shè)計(jì)，通過使用不同的樣式來渲染不同角色，讓用戶的使用體驗(yàn)盡量在不增加開發(fā)者工作量的情況下達(dá)到最佳[3]。本次系統(tǒng)設(shè)計(jì)主要采用的就是JavaScript腳本開發(fā)，主要是因?yàn)殡S著JavaScript的出現(xiàn)，web編程的興起，web的編程技術(shù)也因此得到了它的飛速發(fā)展。常用的JavaScript腳本語言就是一種基于對(duì)象和事件驅(qū)動(dòng)的用于進(jìn)行客戶端和web編程開發(fā)的交互式腳本語言，使用這種語言能夠給設(shè)計(jì)者本身靜止的頁面添加動(dòng)畫效果，代替了原先使用第三方插件生成的動(dòng)畫效果。在本次操作系統(tǒng)中主要使用的JavaScript在客戶端HTML的文檔中主要實(shí)現(xiàn)的就是通過編寫了客戶端網(wǎng)頁腳本的代碼，從而可以代替第三方的插件從而實(shí)現(xiàn)了客戶端和web編程中網(wǎng)頁內(nèi)容的動(dòng)態(tài)變化。當(dāng)一個(gè)用戶在網(wǎng)頁瀏覽器中自動(dòng)打開一個(gè)項(xiàng)目的網(wǎng)頁時(shí)，瀏覽器就是會(huì)自動(dòng)執(zhí)行該項(xiàng)目網(wǎng)頁內(nèi)嵌用戶事先設(shè)計(jì)好的的一個(gè)JavaScript腳本代碼，用戶就是可以直接通過交互式的行為來自動(dòng)更改客戶端網(wǎng)頁的內(nèi)容和網(wǎng)頁外觀，這也就是實(shí)現(xiàn)了僅用客戶端的HTML和CSS技術(shù)就實(shí)現(xiàn)的網(wǎng)頁動(dòng)態(tài)效果。而本文主要是為了向用戶介紹本系統(tǒng)，從需求分析到運(yùn)行測(cè)試一系列的操作，使用戶能夠更加清晰了解具體的操作，通過文字說明解釋，讓用戶了解各種技術(shù)的使用背景，通過需求分析來向用戶展示系統(tǒng)開發(fā)的目的，通過核心代碼的解釋說明來向用戶展示HTML5游戲的核心實(shí)現(xiàn)技術(shù)，最后再加以圖片更加直觀讓用戶了解當(dāng)前系統(tǒng)的運(yùn)行實(shí)現(xiàn)效果。本文第一章主要介紹網(wǎng)絡(luò)大環(huán)境下HTML5主要技術(shù)發(fā)展背景，包括JavaScript和CSS等技術(shù)的發(fā)展及優(yōu)點(diǎn)。第二章主要介紹項(xiàng)目的分析過程，包括需求分析和設(shè)計(jì)的理念及規(guī)則，用流程圖來結(jié)合描述，展示玩家與開發(fā)者各自所能實(shí)現(xiàn)的功能點(diǎn)，結(jié)合用例圖進(jìn)行描述。第三章就是對(duì)系統(tǒng)具體實(shí)現(xiàn)代碼進(jìn)行詳細(xì)的解釋說明，向用戶展示核心技術(shù)，通過文字說明、代碼和運(yùn)行抓圖相結(jié)合的方式讓用戶更加直觀的理解核心技術(shù)點(diǎn)。第四章主要是向用戶展示項(xiàng)目的整體運(yùn)行效果。第五章系統(tǒng)測(cè)試是對(duì)一個(gè)項(xiàng)目整體性能系統(tǒng)進(jìn)行的一個(gè)整體綜合測(cè)試，包括各個(gè)系統(tǒng)功能模塊的測(cè)試以及整體性能的測(cè)試。

1項(xiàng)目背景與相關(guān)技術(shù)1.1背景與發(fā)展簡(jiǎn)介HTML5作為HTML的最新標(biāo)準(zhǔn)，增添了類似新多媒體(video、audio)、新表單(keygen、output)、畫布(canvas)等此類新鮮元素[4]，對(duì)網(wǎng)頁提供更好的頁面結(jié)構(gòu)，同時(shí)它也有很多新的優(yōu)點(diǎn)，其中比較重要的一點(diǎn)是具有強(qiáng)大的圖形和跨平臺(tái)特性。HTML5增加了很多新的元素[5]，其中包括與Web游戲設(shè)計(jì)緊密相關(guān)的Canvas元素。盡管Canvas元素在各個(gè)類型的跨平臺(tái)瀏覽器中的運(yùn)行性能都有所很大的差異，不過總的來說，Canvas的應(yīng)用程序運(yùn)行編碼速度還是很快的。HTML5是基于HTML語言的進(jìn)化過程中的其中一個(gè)開發(fā)版本，也被廣泛認(rèn)為是適用于下一代移動(dòng)網(wǎng)頁游戲開發(fā)的基礎(chǔ)語言，它為開發(fā)者提供了一系列新的技術(shù)元素和新的功能特性，這也讓越來越多的游戲開發(fā)人員對(duì)游戲進(jìn)入了研究。目前各大主流的智能移動(dòng)瀏覽器都已經(jīng)全面的兼容了HTML5，智能移動(dòng)瀏覽器平臺(tái)和移動(dòng)互聯(lián)網(wǎng)的普及和興起，讓下一代HTML5應(yīng)用更惹人喜愛和關(guān)注。而隨著HTML5的迅速普及和發(fā)展，帶動(dòng)了互聯(lián)網(wǎng)游戲?yàn)g覽器產(chǎn)業(yè)的迅速崛起。例如磊友網(wǎng)絡(luò)科技最新推出的《修仙三國(guó)》[6]，推出當(dāng)日便已經(jīng)迎來982位活躍注冊(cè)玩家，付費(fèi)率8.3%，這使得很多開發(fā)者針對(duì)這一現(xiàn)象進(jìn)行了大范圍的研究，國(guó)內(nèi)的HTML5光景一片大好，眾多之前沉迷于開發(fā)插件游戲的開發(fā)者逐漸開始思考是否真的一味的使用插件就會(huì)開發(fā)出真正適合玩家的游戲。HTML5在網(wǎng)頁游戲領(lǐng)域的取得的重大突破，是在新推出的HTML5標(biāo)簽和和開發(fā)者不斷研究完善后使用js腳本進(jìn)行編碼。在國(guó)外HTML5市場(chǎng)經(jīng)過5年的長(zhǎng)期發(fā)展之后，早進(jìn)入理性的狀態(tài)，不是炒作概念或者單純的市場(chǎng)宣講活動(dòng)，甚至關(guān)注度出現(xiàn)了下降，已經(jīng)變成了在web技術(shù)各個(gè)獨(dú)立領(lǐng)域深度探索和創(chuàng)新[7]。國(guó)內(nèi)傳統(tǒng)基于flash網(wǎng)頁游戲流行的原因，是flash支持視頻播放、音頻播放與錄制等。如今，HTML5新引入的Canvas標(biāo)簽同樣具備了游戲開發(fā)的條件[8]。HTML5游戲也迎來了真正的發(fā)展高潮，越來越多的開發(fā)者加入了開發(fā)HTML5游戲的行列，越來越多的大型游戲公司也開始和這些開發(fā)者進(jìn)行合作，國(guó)內(nèi)的發(fā)展也開始由這些先行者們領(lǐng)頭進(jìn)入了迅速發(fā)展崛起的時(shí)代。1.2HTML5技術(shù)及其優(yōu)勢(shì)HTML5游戲即點(diǎn)即玩的特性非常適合輕度游戲的發(fā)展[9]，隨著玩家日漸苛刻的要求，對(duì)于開發(fā)者的要求也越來越高，開發(fā)者們也開始進(jìn)行更加深層次的研究，HTML5游戲就此也迎來了真正的春天。已故的喬布斯大神曾經(jīng)這樣說過：“沒有人愿意使用Flash，全世界已經(jīng)開始步入了一個(gè)名為H5的時(shí)代[10]?！逼鋵?shí)，HTML5的Canvas標(biāo)簽是允許設(shè)計(jì)者進(jìn)行設(shè)計(jì)實(shí)現(xiàn)很多不同樣式和作用的交互動(dòng)畫，和以往人們用Flash動(dòng)畫設(shè)計(jì)實(shí)現(xiàn)生成的效果一樣，這樣就使用戶不用提前安裝其他的第三方插件來進(jìn)行游戲，也避免了出現(xiàn)大多數(shù)網(wǎng)頁玩家所反映的插件不兼容等等問題。與其他不同的高技術(shù)型開發(fā)的游戲相比，基于HTML5的標(biāo)簽開發(fā)的游戲有三點(diǎn)主要的優(yōu)勢(shì)：一是相關(guān)技術(shù)免費(fèi)開放、規(guī)范且容易推廣，設(shè)計(jì)者在設(shè)計(jì)的時(shí)候不需要有償?shù)娜カ@取自己想要的資料，使得HTML5的開發(fā)更加的開放化，不為單個(gè)公司所有或控制[11]；二是開發(fā)者不需要安裝其他插件，這樣從根本上減少了用戶在操作時(shí)的會(huì)產(chǎn)生的麻煩，也提高了安全性，使用插件總是會(huì)導(dǎo)致某些病毒的潛在攻擊，是眾多游戲開發(fā)者的優(yōu)先選擇[12]；三是HTML5覆蓋面廣，能夠在任何系統(tǒng)上進(jìn)行操作，不存在兼容性異常的情況，無論是安卓系統(tǒng)還是ios系統(tǒng)都能夠很好的實(shí)現(xiàn)設(shè)計(jì)者想要展示的效果，不會(huì)因?yàn)槭褂谜哌\(yùn)行環(huán)境的影響而受到影響。1.3JavaScript開發(fā)的優(yōu)勢(shì)與劣勢(shì)Javascript作為一種腳本語言與python，shell等腳本語言類似，不需要編譯運(yùn)行，有自己的基本數(shù)據(jù)類型，語法結(jié)構(gòu)，算術(shù)和比較運(yùn)算符，在幫助用戶處理數(shù)據(jù)和文件實(shí)際應(yīng)用中，提供了四種基本的數(shù)據(jù)類型，同時(shí)利用變量存放信息，采用表達(dá)式來完成功能復(fù)雜的操作[13]。目前總結(jié)出來的JavaScript的優(yōu)劣勢(shì)已經(jīng)十分明顯了，有以下幾個(gè)優(yōu)勢(shì)：JavaScript的優(yōu)勢(shì)：（1）快速的終端反應(yīng)：Java腳本在客戶端進(jìn)行編寫，不需要服務(wù)器端提供支持就可以運(yùn)行，提高速度優(yōu)勢(shì)[14]。在用戶電腦上直接作為腳本執(zhí)行測(cè)試，幾乎是立即就可以完成的。相比起其它開發(fā)腳本更加容易學(xué)習(xí)和實(shí)現(xiàn)。它只需利用DOM模型，提供大量的代碼，就可以開發(fā)出一個(gè)用戶需要的腳本[15]。（2）用途廣泛：目前JavaScript和其他大部分語言都可以很好的進(jìn)行交互，并且被廣泛應(yīng)用于各個(gè)領(lǐng)域?，F(xiàn)在，有很多的方法可以使用JavaScript，不拘泥于某一種固定的使用途徑，使得其更加靈活方便，成為開發(fā)者青睞的一種腳本開發(fā)。JavaScript的劣勢(shì)：（1）安全性：任何一種開發(fā)都不可能是絕對(duì)安全的，同樣JavaScript被顯示添加到用戶的瀏覽器，它就有可以會(huì)利用客戶系統(tǒng)，人為有可能會(huì)察覺不到，導(dǎo)致信息泄露[16]。（2）瀏覽器支持：不同的引擎對(duì)Javascript也會(huì)有不同的渲染結(jié)果[17]，因?yàn)椴煌墓δ芎徒涌谥笆谴嬖诓顒e的。如果關(guān)閉引擎，那么依賴于瀏覽器支持的腳本也會(huì)被關(guān)閉，整個(gè)JavaScript代碼就不會(huì)繼續(xù)運(yùn)行了。1.4CSS樣式表在開發(fā)中的用處樣式表CSS的英文全程為CascadingStyleSheets，又可翻譯為層疊式樣式表[18]，通過CSS樣式表的定義，可以很簡(jiǎn)單地定義一個(gè)整體網(wǎng)頁的樣式包括定位顯示、字體以及各種格式顯示大小、元素定位和超鏈接的各種樣式。既能大大減少網(wǎng)頁開發(fā)者在導(dǎo)航欄書寫的代碼和工作量，又甚至能夠大大增強(qiáng)導(dǎo)航欄設(shè)計(jì)的效果，使得設(shè)計(jì)的頁面也更靈活多變。通常的情況下，CSS腳本文件可以直接嵌入到自己的HTML的腳本頁面中，但是一般程序開發(fā)者常用的一種做法是首先生成一個(gè)文件后綴為.css的腳本文件，然后通過自己的HTML調(diào)用該.css的腳本文件,一般的方法為<linkhref="xxx.css"type="text/css"rel="stylesheet">[19]。在結(jié)構(gòu)上有以下幾點(diǎn)的優(yōu)勢(shì)：(1)設(shè)計(jì)手段靈活：通過調(diào)用CSS樣式表可實(shí)現(xiàn)效果與設(shè)計(jì)分離，網(wǎng)站建設(shè)形式更為靈活。開發(fā)者可以將頁面單獨(dú)進(jìn)行CSS設(shè)計(jì)，標(biāo)明文字顯示調(diào)用得當(dāng)即可展示效果[20]；(2)布局更規(guī)范、代碼更清晰易懂：當(dāng)網(wǎng)頁的某一部分需要改動(dòng)時(shí)，維護(hù)人員只需要找到該模塊所對(duì)應(yīng)的CSS樣式表就可以進(jìn)行修改，便捷而且不會(huì)出現(xiàn)錯(cuò)誤修改其他正常部分；(3)具備控制排版能力：開發(fā)者可以直接通過CSS樣式表修改結(jié)構(gòu)框架的定位[21]，只要提前規(guī)劃好各個(gè)模塊的位置便可以直接編寫樣式，從而更加便利的解決在傳統(tǒng)html中經(jīng)常會(huì)出現(xiàn)元素錯(cuò)位的情況。CSS樣式表在布局頁面樣式時(shí)，又有幾種常見的布局方式[22]：（1）float布局，這種布局方式的兼容性比較好；（2）absolute布局，該布局簡(jiǎn)單直接，兼容性好；（3）flex布局，布局簡(jiǎn)單、靈活，移動(dòng)端友好，但I(xiàn)E8以下不兼容；（4）table布局，兼容性好，有時(shí)候布局相對(duì)簡(jiǎn)單，但是它是對(duì)Table標(biāo)簽的不正規(guī)使用，一直以來被大家所詬病。當(dāng)需要內(nèi)容高度不一致時(shí)并不適應(yīng)。CSS樣式表又分為三種不同的使用樣式：（1）簡(jiǎn)單的一種行內(nèi)其他元素類型樣式：主要缺點(diǎn)：行內(nèi)元素樣式?jīng)]有很大的資源可用和復(fù)用性，僅僅能作用于當(dāng)前的一個(gè)行內(nèi)其他元素；主要優(yōu)點(diǎn)：這種行內(nèi)元素樣式具體寫法比較簡(jiǎn)單，適用范圍廣，使用優(yōu)先極高；（2）內(nèi)部的內(nèi)容樣式：主要缺點(diǎn)：內(nèi)部?jī)?nèi)容頁面間不能相互交換復(fù)用；主要優(yōu)點(diǎn)：基本上已經(jīng)實(shí)現(xiàn)了內(nèi)部?jī)?nèi)容樣式相互復(fù)用。復(fù)用的復(fù)雜程度不高但也不能在多個(gè)使用頁面之間復(fù)制使用；（3）外部樣式：缺點(diǎn)：編輯時(shí)需要頻繁切換；優(yōu)點(diǎn)：HTML和CSS完全分離，CSS得到最大程度復(fù)用。三種外部屬性樣式之間又因?yàn)椴煌念愋秃吞匦杂兄煌膬?yōu)先級(jí)一般的情況下可以采用就近的原則[23]，在正常的設(shè)計(jì)中引用樣式下優(yōu)先級(jí)的順序一般為：行內(nèi)屬性樣式>內(nèi)部屬性樣式>外部屬性樣式。本次樣式設(shè)計(jì)中因?yàn)椴捎玫氖遣⒉粡?fù)雜的樣式設(shè)計(jì)，所以直接選擇采用外部屬性樣式直接調(diào)用的方法來為開發(fā)者編寫CSS外部屬性樣式，也很好的避免了開發(fā)者在進(jìn)行樣式開發(fā)的過程和設(shè)計(jì)中的各種混淆。1.5本章小結(jié)本章主要描述網(wǎng)絡(luò)大環(huán)境下HTML5主要技術(shù)發(fā)展背景，國(guó)內(nèi)外目前的發(fā)展趨勢(shì)，也在本章詳細(xì)介紹了本項(xiàng)目使用到的包括JavaScript和CSS等技術(shù)各自的發(fā)展背景及其優(yōu)點(diǎn)。

2系統(tǒng)分析2.1需求分析隨著網(wǎng)絡(luò)科技的發(fā)展，人們也在追求更加更富有娛樂性的小游戲，在這種大環(huán)境下，現(xiàn)在已經(jīng)大火的網(wǎng)頁游戲HTML5游戲更是以其獨(dú)特的游戲跨平臺(tái)性和游戲輕量性優(yōu)勢(shì)獲得了很好的用戶和游戲體驗(yàn)[1]，已經(jīng)迅速的成為了近些年來互聯(lián)網(wǎng)游戲開發(fā)行業(yè)最熱門的網(wǎng)頁游戲關(guān)鍵詞之一。在目前這種市場(chǎng)需求下，本項(xiàng)目應(yīng)運(yùn)而生，目的就是為了滿足玩家既不想讓游戲占據(jù)過大內(nèi)存又想要進(jìn)行富有樂趣的游戲的需求。本款游戲?qū)?shí)現(xiàn)如下功能：防御塔的創(chuàng)建、售賣、攻擊；怪獸的攻擊、移動(dòng)；合理的金幣獲得設(shè)計(jì)、獲取量設(shè)計(jì)；道具的設(shè)計(jì)，仿照保衛(wèi)蘿卜的游戲理念，簡(jiǎn)化游戲中的圖形，著重突出其運(yùn)行的基本規(guī)則，同時(shí)進(jìn)行HTML5中標(biāo)簽和JavaScript腳本編寫的實(shí)踐測(cè)試，比較發(fā)現(xiàn)JavaScript腳本與Python語言開發(fā)的不同之處，并從實(shí)際開發(fā)中體驗(yàn)到明顯差異[24]。2.2問題分析大部分的網(wǎng)路游戲使用的都是安裝Flash插件來進(jìn)行游戲動(dòng)畫效果的實(shí)現(xiàn)，但對(duì)于環(huán)境要求十分嚴(yán)格，更要求服務(wù)器的承受能力優(yōu)越，對(duì)于一些小成本游戲顯然不劃算，所以在設(shè)計(jì)之初便設(shè)想使用技術(shù)來代替插件的使用、在分析需求之后，在整個(gè)設(shè)計(jì)過程主要圍繞以下兩個(gè)問題解決：（1）解決不使用第三方插件問題：以前的第三方插件都是專用插件，而非公共標(biāo)準(zhǔn)，安裝這些插件，往往會(huì)限制在一個(gè)特定的范圍內(nèi)構(gòu)建游戲，只能在Web瀏覽器的方框中玩Flash游戲，所以這次的設(shè)計(jì)決定采用常見的簡(jiǎn)單算法來進(jìn)行動(dòng)作設(shè)計(jì)，避免使用插件；（2）解決畫面跳轉(zhuǎn)卡頓，動(dòng)作銜接不流暢問題：為了用戶的使用體驗(yàn)良好，本次設(shè)計(jì)過程中為解決該卡頓不流暢問題打算進(jìn)行一個(gè)細(xì)致的設(shè)計(jì)，減少跳轉(zhuǎn)鏈接的使用，盡可能采用js固有的算法模塊進(jìn)行設(shè)計(jì)動(dòng)作和畫面背景，簡(jiǎn)化人物動(dòng)作，使畫面簡(jiǎn)單化。2.3流程設(shè)計(jì)游戲?yàn)楹?jiǎn)化流程避免造成卡頓等不良好的游戲體驗(yàn)，故而將流程簡(jiǎn)化，用戶打開界面即開始游戲，玩家根據(jù)初始金幣數(shù)選擇炮臺(tái)進(jìn)行擺放，放置有效攻擊建筑后怪獸開始按照預(yù)先系統(tǒng)設(shè)計(jì)的軌跡開始行動(dòng)，擊殺怪獸獲得金幣繼而購(gòu)買更高級(jí)的炮臺(tái)，持續(xù)游戲直至玩家生命值為0。設(shè)計(jì)整體流程圖如圖2.1所示。圖2.1游戲流程圖2.3功能分析本次系統(tǒng)主要設(shè)計(jì)的是一款塔防策略型游戲，主要實(shí)現(xiàn)的大功能點(diǎn)有以下幾個(gè)：玩家放置建筑、釋放怪物使其按照軌跡行動(dòng)、建筑物進(jìn)行攻擊和建筑物升級(jí)或出售。開發(fā)者與玩家可使用的功能不同。目前項(xiàng)目暫時(shí)開放的玩家功能有限，為了簡(jiǎn)化玩家進(jìn)行游戲時(shí)的操作步驟，設(shè)置了如下幾個(gè)功能，玩家用戶可以選擇開始游戲、選擇建筑物并放置于地圖中某一位置、升級(jí)建筑物、出售建筑物、暫停、繼續(xù)或者重新開始游戲，玩家的用例圖如圖2.2所示：圖2.2玩家用例圖開發(fā)者是可以通過更改后臺(tái)數(shù)據(jù)來更改游戲數(shù)據(jù)，比如游戲初始金錢數(shù)和生命值、怪物的屬性包括攻擊力和移動(dòng)速度以及移動(dòng)的軌跡、建筑物的屬性包括攻擊力、攻擊速度和攻擊范圍、建筑物升級(jí)所需的金錢數(shù)、出售建筑物的收入以及游戲地圖的設(shè)計(jì)，用例圖如2.3所示：圖2.3開發(fā)者用例圖同時(shí)本系統(tǒng)設(shè)計(jì)保有一定的可拓展性與可維護(hù)性。由于系統(tǒng)處理能力的需求不是一成不變的，隨著功能的不斷拓展，對(duì)系統(tǒng)處理能力的要求也會(huì)越來越高。而本項(xiàng)目的可拓展性就是在日后數(shù)據(jù)的不斷更新中，為開發(fā)者留有一定升級(jí)數(shù)據(jù)的空間，可以根據(jù)將來的變化進(jìn)行實(shí)時(shí)的更新與升級(jí)。維護(hù)管理是指為了保證維護(hù)質(zhì)量、提高維護(hù)效率、控制維護(hù)成本而進(jìn)行的維護(hù)過程管理，要求對(duì)項(xiàng)目的每次“修改”均需經(jīng)過申請(qǐng)、評(píng)估、批準(zhǔn)、實(shí)施、驗(yàn)證等步驟。維護(hù)的核心是維護(hù)評(píng)估和維護(hù)驗(yàn)證。而針對(duì)本游戲的可維護(hù)性就是指在日后一旦出現(xiàn)某一些玩家無法克服的問題那么這時(shí)候就需要后臺(tái)人員對(duì)該系統(tǒng)進(jìn)行一個(gè)定時(shí)定期的維護(hù)以保證用戶良好的使用體驗(yàn)。2.4本章小結(jié)本章主要介紹了關(guān)于系統(tǒng)的需求分析以及用例分析，結(jié)合圖示進(jìn)行分別介紹，對(duì)系統(tǒng)中的不同角色也就是玩家與開發(fā)者可以使用的不同功能點(diǎn)進(jìn)行分析介紹，同時(shí)介紹了系統(tǒng)保有的可拓展性和可維護(hù)性。

3系統(tǒng)界面設(shè)計(jì)與優(yōu)化3.1技術(shù)支持初步設(shè)計(jì)游戲考慮到技術(shù)支持方面的問題，有些瀏覽器可能會(huì)出現(xiàn)不兼容的問題，為了減少開發(fā)者前期設(shè)計(jì)框架的麻煩，故而游戲目前只支持在IE9和Chrome瀏覽器中進(jìn)行[13]，使用Canvas標(biāo)簽的屬性提示用戶當(dāng)前瀏覽器不支持，其代碼設(shè)計(jì)如下：<divid="td-wrapper"><h1>HTML5塔防游戲</h1><divid="td-loading">加載中...</div><divid="td-board"> <canvasid="td-canvas">抱歉，您的瀏覽器不支持HTML5Canvas標(biāo)簽，請(qǐng)使用IE9/Chrome等瀏覽器瀏覽本頁以獲得最佳效果。</canvas></div></div>3.2初始數(shù)據(jù)設(shè)計(jì)在游戲剛剛開始，為了使玩家有一定的基礎(chǔ)儲(chǔ)備能夠進(jìn)行第一輪的防守，玩家將會(huì)獲得最初始設(shè)定的基礎(chǔ)獎(jiǎng)勵(lì)，主要體現(xiàn)為系統(tǒng)給予玩家一定量足夠購(gòu)買建筑的金錢，也會(huì)顯示玩家初始的生命值、當(dāng)前怪物波數(shù)、當(dāng)前積分和目前所在關(guān)卡的難度系數(shù)，這些開發(fā)者都可以在js腳本中可進(jìn)行更改，目前暫定數(shù)據(jù)如表3.1所示：表3.1初始游戲數(shù)據(jù)表名稱含義設(shè)定數(shù)據(jù)difficulty難度系數(shù)1.0wave怪物波數(shù)0max_wave生命100max_monsters_per_wave最大怪物波數(shù)100money金錢500score積分03.3炮臺(tái)屬性設(shè)計(jì)炮臺(tái)采用最基礎(chǔ)的圓圈形狀來渲染描繪建筑物和怪物的形狀，通過聲明不同變量來設(shè)定不同建筑物的屬性，通過更改不同的變量來實(shí)現(xiàn)不同的難度設(shè)定，同時(shí)也為后期開發(fā)者修改數(shù)據(jù)提供便利，用變量的形式也使得各種元素清晰可見，例如攻擊力、攻擊范圍、子彈發(fā)射速度和建造所花費(fèi)的金錢數(shù)等等，如表3.2中所示：表3.2炮臺(tái)屬性表名稱攻擊力初級(jí)攻擊范圍最大攻擊范圍攻擊速度子彈發(fā)射速度建造金額cannon104826300LMG351036100HMG303535800laser_gun256102002000若炮臺(tái)被放置在界面中，通過定義并調(diào)用不同屬性變量例如is_selected、level等來顯示當(dāng)前已放置建筑屬性，比如level變量聲明的是當(dāng)前等級(jí)，killed聲明的是當(dāng)前擊殺怪物的數(shù)量等等其他變量，當(dāng)鼠標(biāo)放置在建筑物上時(shí)顯示當(dāng)前屬性。3.4怪獸屬性設(shè)計(jì)在腳本td-cfg-monsters中定義怪獸不同的級(jí)別以及它們分別的屬性，設(shè)定其初始生命值以及攻擊力，通過defaultMonsterRender函數(shù)來渲染怪物的默認(rèn)屬性，包括顯示怪物的名稱、移動(dòng)速度生命值和攻擊力等等，通過設(shè)置不同的數(shù)值來實(shí)現(xiàn)區(qū)分不同的怪物，是游戲更加的具有娛樂性，增加玩家參與感，具體的設(shè)計(jì)如表3.3所示，以中等怪物為例：表3.3怪物屬性表名稱含義設(shè)定數(shù)據(jù)name名稱monster2speed移動(dòng)速度6max_speed最快移動(dòng)速度20life怪物生命值50damage攻擊力5score積分0前十波的怪物設(shè)定為開發(fā)者設(shè)計(jì)，由于每個(gè)玩家的游戲進(jìn)程不定所以后續(xù)怪物設(shè)計(jì)不再使用人為設(shè)定，均由系統(tǒng)設(shè)定自動(dòng)生成，開發(fā)者設(shè)定好既定算法進(jìn)行有規(guī)律生成，同時(shí)也會(huì)根據(jù)玩家游戲的進(jìn)程來自動(dòng)更改游戲難度，增加娛樂性，具體設(shè)計(jì)代碼如下：newWave:function(cfg){ cfg=cfg||{}; varmap=cfg.map, wave=cfg.wave||1, //difficulty=TD.difficulty||1.0, wave_damage=TD.wave_damage||0; if(wave==1){ //pass }elseif(wave_damage==0){ if(wave<5){ TD.difficulty*=1.05; }elseif(TD.difficulty>20){ TD.difficulty*=1.05; }elseif(TD.difficulty>10){ TD.difficulty*=1.1; }else{ TD.difficulty*=1.2; } }elseif(TD.wave_damage>=20){ TD.difficulty*=0.8; }elseif(TD.wave_damage>=10){ TD.difficulty*=0.9; }else{ if(wave>=10) TD.difficulty*=1.05; } TD.log("wave"+wave+",lastwavedamage="+wave_damage+",difficulty="+TD.difficulty); }3.5游戲初始設(shè)定設(shè)計(jì)游戲的是當(dāng)用戶打開網(wǎng)頁的時(shí)候就啟動(dòng)，為了避免出現(xiàn)玩家未及時(shí)操作導(dǎo)致游戲還未開始就宣告失敗，故設(shè)計(jì)使用算法系統(tǒng)自動(dòng)檢查地圖中是否有武器（具備攻擊性的建筑）[13]。調(diào)用has_weapon函數(shù)來檢測(cè)當(dāng)前地圖是否有攻擊性武器，如果有則啟動(dòng)出動(dòng)第一波怪物，具體算法如下設(shè)計(jì)：checkHasWeapon:function(){ this.has_weapon=(this.anyBuilding(function(obj){ returnobj.is_weapon; })!=null);},3.6游戲選項(xiàng)指令設(shè)定本游戲并未設(shè)置結(jié)束游戲按鈕，只設(shè)定暫停、繼續(xù)與重新開始[14]，用戶可選擇關(guān)閉窗口來結(jié)束游戲，，通過定義button按鈕的不同函數(shù)調(diào)用來讀取用戶當(dāng)前動(dòng)作，使用如下算法設(shè)計(jì)選項(xiàng)：this.btn_pause=newTD.Button("panel-btn-pause",{ scene:this.scene, x:this.x, y:this.y+260, text:TD._t("button_pause_text"), //desc:TD._t("button_pause_desc_0"), step_level:this.step_level, render_level:this.render_level+1, onClick:function(){ if(this.scene.state==1){ this.scene.pause(); this.text=TD._t("button_continue_text"); this.scene.panel.btn_upgrade.hide(); this.scene.panel.btn_sell.hide(); //this.desc=TD._t("button_pause_desc_1"); }elseif(this.scene.state==2){ this.scene.start(); this.text=TD._t("button_pause_text"); this.scene.panel.btn_restart.hide(); if(this.scene.map.selected_building){ this.scene.panel.btn_upgrade.show(); this.scene.panel.btn_sell.show(); } //this.desc=TD._t("button_pause_desc_0"); } } });3.7游戲失敗設(shè)計(jì)當(dāng)怪獸抵御住炮臺(tái)的攻擊并脫離攻擊范圍后將到達(dá)終點(diǎn)，當(dāng)終點(diǎn)生命值耗盡時(shí)則游戲失敗，界面將顯示“GAMEOVER”的字提示用戶，定義ctx字段來檢測(cè)當(dāng)前游戲進(jìn)程，當(dāng)滿足變量條件時(shí)提示游戲失敗，具體設(shè)計(jì)如下：varctx=TD.ctx; ctx.textAlign="center"; ctx.textBaseline="middle"; ctx.fillStyle="#ccc"; ctx.font="bold62px'Verdana'"; ctx.beginPath(); ctx.fillText("GAMEOVER",this.width/2,this.height/2);3.8本章小結(jié)本章主要對(duì)系統(tǒng)的功能點(diǎn)設(shè)計(jì)進(jìn)行分模塊介紹，介紹了功能實(shí)現(xiàn)的具體方法，通過代碼介紹將功能點(diǎn)實(shí)現(xiàn)的核心展現(xiàn)出來，通過項(xiàng)目抓圖將預(yù)期實(shí)現(xiàn)的效果清晰的展示出來，讓用戶明確效果。

4系統(tǒng)實(shí)現(xiàn)4.1功能實(shí)現(xiàn)效果4.1.1打開游戲界面在玩家打開網(wǎng)頁游戲界面的時(shí)候，游戲啟動(dòng)，顯示當(dāng)前初始設(shè)定數(shù)據(jù)，玩家根據(jù)初始的金錢來選擇建筑物放在合適的位置進(jìn)行游戲前的準(zhǔn)備，當(dāng)前狀態(tài)設(shè)定為當(dāng)玩家放置有攻擊型建筑時(shí)才算真正開始游戲，初始界面如圖4.1所示：圖4.1初始界面圖4.1.2放置建筑物當(dāng)玩家選擇并放置好第一個(gè)具備攻擊力的建筑時(shí)，第一波怪獸來臨，建筑會(huì)自動(dòng)識(shí)別怪獸來的方向，確定在攻擊范圍內(nèi)就會(huì)自動(dòng)發(fā)射炮彈。怪物也會(huì)根據(jù)之前系統(tǒng)中設(shè)置好的算法計(jì)算的特定軌跡進(jìn)行移動(dòng)，實(shí)現(xiàn)效果如圖4.2所示：圖4.2放置建筑物在系統(tǒng)的設(shè)置中，玩家可以選擇通過擺放不同的路障來將怪物的軌跡固定，由于設(shè)計(jì)中將路障設(shè)定為怪物不能通過，所以如果玩家大面積布置路障，就會(huì)產(chǎn)生類似保衛(wèi)蘿卜的效果，固定怪物的行動(dòng)軌跡，也變相的相當(dāng)于是一種減小難度的手段，也可以算是一種趣味玩法，具體實(shí)現(xiàn)效果如圖4.3、4.4所示：圖4.3趣味玩法圖4.4游戲中4.1.3升級(jí)建筑物當(dāng)玩家擁有足夠的金錢時(shí)玩家可以選擇某一建筑升級(jí)，點(diǎn)擊想要升級(jí)的建筑，會(huì)出現(xiàn)該建筑目前的屬性，將鼠標(biāo)放置在升級(jí)按鈕上就會(huì)顯示升級(jí)當(dāng)前建筑所需要的金錢，選擇升級(jí)則該建筑升一級(jí)，隨之屬性增強(qiáng)，攻擊范圍增大，具體實(shí)現(xiàn)效果如圖4.5、4.6所示：圖4.5游戲中升級(jí)建筑圖4.6升級(jí)成功4.1.4游戲失敗當(dāng)玩家布置的建筑并未將所有怪物清除時(shí)，怪物將會(huì)移動(dòng)到終點(diǎn)，終點(diǎn)將會(huì)減少一定量的生命值，當(dāng)玩家生命值為零時(shí)，游戲結(jié)束，頁面提示GAMEOVER，這時(shí)玩家可以選擇關(guān)閉游戲或者是重新開始，具體實(shí)現(xiàn)效果如圖4.7所示：圖4.7游戲中怪獸屬性圖4.2本章小結(jié)本章主要通過運(yùn)行項(xiàng)目，獲取界面截圖的方式向用戶展示各功能實(shí)現(xiàn)的效果，為用戶詳細(xì)介紹每一個(gè)功能點(diǎn)所能觸發(fā)的事件效果，通過圖文結(jié)合的方式更加直觀的讓用戶了解整體的運(yùn)行效果。

5系統(tǒng)測(cè)試5.1模塊功能測(cè)試在整體設(shè)計(jì)完成之后，采用整體運(yùn)行的方式對(duì)本次項(xiàng)目進(jìn)行模塊功能測(cè)試，通過完整運(yùn)行并嘗試各個(gè)模塊功能是否正常，是否能夠達(dá)到預(yù)期效果，并將數(shù)據(jù)記錄下來，記錄結(jié)果如表5.1：表5.1項(xiàng)目功能測(cè)試用例表測(cè)試編號(hào)測(cè)試功能實(shí)現(xiàn)函數(shù)操作步驟期望結(jié)果實(shí)際結(jié)果1購(gòu)買布置建筑building_type函數(shù)計(jì)算放置位置1：選擇某一建筑2：將其放置于地圖某位置建筑放置在固定位子建筑被放置在選定位置2怪物屬性定義monster_attributes來改變怪物不同屬性怪物出現(xiàn)時(shí)將鼠標(biāo)放置在其身上顯示設(shè)定屬性顯示當(dāng)前選中怪物屬性3建筑屬性定義building_attributes設(shè)計(jì)建筑物屬性將光標(biāo)放置在建筑物身上顯示設(shè)定屬性顯示當(dāng)前建筑屬性4建筑發(fā)射子彈攻擊怪物定義bullet_type函數(shù)不同建筑子彈發(fā)出當(dāng)怪物出現(xiàn)時(shí)建筑自動(dòng)識(shí)別并發(fā)射子彈怪物生命下降怪物生命值明顯下降5建筑升級(jí)getUpgradeCost函數(shù)定義升級(jí)建筑花費(fèi)當(dāng)選中建筑，將鼠標(biāo)放置在升級(jí)上顯示當(dāng)前建筑升級(jí)所需金錢顯示當(dāng)前建筑升級(jí)所需金錢6建筑出售getSellMoney函數(shù)定義出售建筑收入當(dāng)選中建筑，將鼠標(biāo)放置在升級(jí)上會(huì)顯示當(dāng)前建筑出售所收入金錢顯示當(dāng)前建筑出售所收入金錢7暫停、繼續(xù)、重新開始游戲Stage變量定義當(dāng)前游戲狀態(tài)點(diǎn)擊不同的選項(xiàng)改變當(dāng)前游戲進(jìn)程實(shí)現(xiàn)游戲暫停、繼續(xù)或者重新開始流暢運(yùn)行暫停、繼續(xù)或者重新開始5.2性能測(cè)試本次測(cè)試為HTML5塔防游戲的性能測(cè)試，目的在于測(cè)試游戲整體是否符合最初設(shè)計(jì)以及時(shí)候能否完整運(yùn)行。本次測(cè)試采用單人多次測(cè)試以期望達(dá)到最佳測(cè)試結(jié)果測(cè)試結(jié)果如表5.2所示：表5.2項(xiàng)目測(cè)試統(tǒng)計(jì)表任務(wù)開始時(shí)間結(jié)束時(shí)間總時(shí)長(zhǎng)（天）計(jì)劃2020年5月13日2020年5月13日1實(shí)際2020年5月13日2020年5月13日1數(shù)據(jù)性能測(cè)試：根據(jù)各個(gè)模塊所能實(shí)現(xiàn)的功能，按游戲流程進(jìn)行不限時(shí)連續(xù)游戲，期間并未出現(xiàn)數(shù)據(jù)崩潰的情況，流程未被打亂，未出現(xiàn)不明BUG，此次測(cè)試操作流程簡(jiǎn)單，所以并未對(duì)服務(wù)器造成高度負(fù)載，系統(tǒng)承受能力良好，整體運(yùn)行正常。本次測(cè)試總結(jié)出來，項(xiàng)目整體運(yùn)行良好，效果能夠達(dá)到預(yù)期結(jié)果，系統(tǒng)運(yùn)行流暢不卡頓，玩家使用感良好，并未出現(xiàn)非法指令。同時(shí)也總結(jié)出了以下可以在后續(xù)進(jìn)行改進(jìn)的兩點(diǎn)：目前游戲進(jìn)程較慢，可調(diào)整游戲節(jié)奏；難度無法調(diào)整，可增加闖關(guān)功能。5.3本章小結(jié)本章主要是運(yùn)行項(xiàng)目后的整體測(cè)試，包括對(duì)設(shè)計(jì)的所有功能模塊的測(cè)試，例如對(duì)建筑物放置及升級(jí)等功能的測(cè)試，以及對(duì)項(xiàng)目整體性能的測(cè)試，經(jīng)過測(cè)試，系統(tǒng)能夠達(dá)到設(shè)計(jì)之初想要達(dá)到的效果。

結(jié)論通過以上分析，本項(xiàng)目是一次對(duì)基于HTML5網(wǎng)頁游戲開發(fā)的嘗試和實(shí)踐。從項(xiàng)目最終的研究結(jié)果獲悉，只要能夠有效地利用HTML5、CSS、JavaScript這三門語言，就可以開發(fā)出很多可玩性強(qiáng)且邏輯簡(jiǎn)單的游戲，而HTML5在移動(dòng)終端的開發(fā)與應(yīng)用也會(huì)在后續(xù)的不斷發(fā)展中迅速成長(zhǎng)直至成熟[15]。本次設(shè)計(jì)中使用使用到的像Canvas標(biāo)簽也是HTML5在以后的發(fā)展中所常用的標(biāo)簽之一，同時(shí)本此設(shè)計(jì)中也使用到了例如head標(biāo)簽等等常用的基礎(chǔ)標(biāo)簽，由于是簡(jiǎn)單的程序設(shè)計(jì)，所以在css樣式表中并未設(shè)計(jì)過多的樣式，以最基礎(chǔ)樣式的來實(shí)現(xiàn)效果，本次著重設(shè)計(jì)的是js腳本，在js腳本中也是使用到了很多例如定義函數(shù)變量從而使調(diào)用函數(shù)方式簡(jiǎn)化，也是筆者首次在設(shè)計(jì)中嘗試自主設(shè)計(jì)變量控制建筑和怪物的屬性，根據(jù)找尋到的資料進(jìn)行一個(gè)學(xué)習(xí)和模仿，根據(jù)已學(xué)的知識(shí)和以往的實(shí)際經(jīng)驗(yàn)進(jìn)行整合，爭(zhēng)取到在本次項(xiàng)目中完成實(shí)現(xiàn)。通過本次項(xiàng)目的實(shí)踐研究得出，在一些對(duì)環(huán)境要求并不是很高的游戲開發(fā)情況下，使用HTML5來進(jìn)行設(shè)計(jì)編寫的難度會(huì)降低不少，同時(shí)安全性也將大大提升，也方便了開發(fā)者在撰寫過程中進(jìn)行隨時(shí)的測(cè)試修改，總體項(xiàng)目運(yùn)行下來也會(huì)比使用插件的游戲消耗的資源小，這樣就起到了對(duì)一些配置并不完備的機(jī)器的損失，并且在書寫函數(shù)調(diào)用的過程中，筆者也得出結(jié)論如果想要不混淆繁多的變量最好在設(shè)定之初就根據(jù)想要實(shí)現(xiàn)的功能進(jìn)行命名，避免后續(xù)出現(xiàn)重復(fù)或者不知道用途的廢變量。通過本次的游戲設(shè)計(jì)，筆者除了在技術(shù)上有些理解之外，在邏輯思維方面也有了很大的提升，也明白了嚴(yán)謹(jǐn)?shù)倪壿嬎季S能力是開發(fā)人員必須要擁有的一項(xiàng)能力，例如很多小小的變量，如果不加以注意那么有可能最后它就是導(dǎo)致系統(tǒng)崩盤的關(guān)鍵因素，這也提醒在以后的的開發(fā)生活中一定要以嚴(yán)謹(jǐn)?shù)乃季S來面對(duì)每一次設(shè)計(jì)。

致謝大學(xué)四年學(xué)習(xí)時(shí)光已經(jīng)接近尾聲，在此我想對(duì)我的母校，我的父母、親人們，我的老師和同學(xué)們表達(dá)我由衷的謝意。感謝我的家人對(duì)我大學(xué)三年學(xué)習(xí)的默默支持；感謝我的母校沈陽城市學(xué)院給了我在大學(xué)四年深造的機(jī)會(huì)，讓我能繼續(xù)學(xué)習(xí)和提高；感謝計(jì)算機(jī)系的老師和同學(xué)們四年來的關(guān)心和鼓勵(lì)。老師們課堂上的激情洋溢，課堂下的諄諄教誨；同學(xué)們?cè)趯W(xué)習(xí)中的認(rèn)真熱情，生活上的熱心主動(dòng)，感謝我的校外指導(dǎo)老師聶菲老師在我實(shí)習(xí)期間對(duì)我的幫助和引導(dǎo)，所有這些都讓我的四年充滿了感動(dòng)。這次畢業(yè)論文設(shè)計(jì)我得到了很多老師和同學(xué)的幫助，其中我的論文指導(dǎo)老師高麗老師對(duì)我的關(guān)心和支持尤為重要。每次遇到難題，我最先做得就是向高麗老師尋求幫助，而老師每次不管忙或閑，總會(huì)抽空來和我一起商量解決的辦法。我做畢業(yè)設(shè)計(jì)的每個(gè)階段，從選題到查閱資料，論文提綱的確定，中期論文的修改，后期論文格式調(diào)整等各個(gè)環(huán)節(jié)中都給予了我悉心的指導(dǎo)。這幾個(gè)月以來，老師不僅在學(xué)業(yè)上給我以精心指導(dǎo)，同時(shí)還在思想給我以無微不至的關(guān)懷，在此謹(jǐn)向老師致以誠(chéng)摯的謝意和崇高的敬意。同時(shí)，本篇畢業(yè)論文的寫作也得到了學(xué)長(zhǎng)學(xué)姐們的熱情幫助。感謝在整個(gè)畢業(yè)設(shè)計(jì)期間和我密切合作的同學(xué)，和曾經(jīng)在各個(gè)方面給予過我?guī)椭幕锇閭?，在此，我再一次真誠(chéng)地向幫助過我的老師和同學(xué)便是感謝！

參考文獻(xiàn)[1]董春俠,司占軍.基于HTML5技術(shù)的五子棋游戲的設(shè)計(jì)與開發(fā)[J].微型機(jī)與應(yīng)用,2007,36(11)：12-14[2]陽曉霞,譚衛(wèi).基于HTML5技術(shù)的游戲開發(fā)與實(shí)現(xiàn)[J].信息與電腦(理論版),2019,(09)：69-71[3]馮科融,王和興.HTML5網(wǎng)頁游戲分析[J].電腦編程技巧與維護(hù),2012,(24)：71-72[4]衛(wèi)少林,衛(wèi)文學(xué).基于JavaScript的人機(jī)五子棋游戲的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代計(jì)算機(jī)(專業(yè)版),2016,(25)：58-62[5]朱桂林,周凌翱.基于HTML5的漢字拼裝游戲[J].電子世界,2019,(15)：48-49+52[6]RobHawkes.HTML5Canvas基礎(chǔ)教程[M].北京:人民郵電出版社,2012.5：277-278[7]JeanineMeyer.HTML5游戲開發(fā)[M].北京:人民郵電出版社,2011.3：329-330[8]PRNewswire.High5GamesDoublesDownonHTML5Library[J].PRNewswireUS,2018,(12)：66-69[9]KevinJ,Theisen.Programminglanguagesinchemistry:areviewofHTML5/JavaScript[J].JournalofCheminformatics,2019,(19)：1-19[10]BerkanUslu,EcirU?urKü?üksille.ArtificialintelligencelibraryforHTML5basedgames:DignityAI[J].SAüFenBilimleriEnstitüsüDergisi,2017,21(1)：23-25[11]陳青云.HTML5與CSS3技術(shù)在網(wǎng)頁制作中的應(yīng)用及發(fā)展前景[J].信息與電腦(理論版),2018,(16)：1-2[12]葛藍(lán).基于HTML5+CSS3的網(wǎng)頁布局[J].數(shù)字技術(shù)與應(yīng)用,2017,(10)：91-92[13]施瑤.基于HTML5的貪吃蛇游戲設(shè)計(jì)與實(shí)現(xiàn)[J].福建電腦,2018,34(07)：118-119[14]黎志雄,黃彥湘,陳學(xué)中.基于HTML5游戲開發(fā)的研究與實(shí)現(xiàn)[J].東莞理工學(xué)院學(xué)報(bào),2014,21(05)：48-53[15]張琳.淺析HTML5+CSS3在網(wǎng)頁設(shè)計(jì)中的新特性及優(yōu)勢(shì)[J].西安文理學(xué)院學(xué)報(bào)(自然科學(xué)版),2017,20(06)：82-84[16]明日科技.HTML5從入門到精通[M].HTML5從入門到精通[M],2017：68-72[17]王艷.探析HTML5與CSS3在網(wǎng)頁設(shè)計(jì)中的新特性和優(yōu)勢(shì)[J].電腦編程技巧與維護(hù),2016,(21)：70-71+88[18]王莉.關(guān)于HTML5應(yīng)用現(xiàn)狀與前景的思考[J].電腦迷,2018,(07)：100[19]McBroom,Kathleen.GetCoding!LearnHTML,CSS,andJavaScriptandBuildaWebsite,App,andGame[J].Booklist,2019,113(18)：106[20]AdamFreeman.HTML,JSX,andCSSPrimer[J].ProReact16,2019,(07)：37-59[21]辛子俊,林雪瑩.HTML5游戲開發(fā)技術(shù)EgretEngine[M].北京：中國(guó)水利水電出版社,2018：1-129[22]邵山歡.HTML與CSS網(wǎng)頁制作實(shí)戰(zhàn)教程[M].北京：高等教育出版社,2019.04：224-271[23]鐘聲,黎苗苗.基于HTML5的教育游戲設(shè)計(jì)與開發(fā)[J].報(bào)刊薈萃,2018,(05)：75-79[24]曹同雷.一款基于HTML5技術(shù)的游戲引擎的設(shè)計(jì)[J].科技展望,2017,(15)：37-39[25]沙茉.CSS樣式表在網(wǎng)頁制作的優(yōu)點(diǎn)與特效實(shí)現(xiàn)[J].企業(yè)科技與發(fā)展,2019,(04)：211-212

附錄源程序清單主界面td.html源代碼：<bodyid="tower-defense"><divid="wrapper"> <divid="td-wrapper"> <h1>HTML5塔防游戲</h1> <divid="td-loading">加載中...</div> <divid="td-board"> <canvasid="td-canvas">抱歉，您的瀏覽器不支持HTML5Canvas標(biāo)簽，請(qǐng)使用IE9/Chrome等瀏覽器瀏覽本頁以獲得最佳效果。</canvas> </div> </div> <divid="about"> <ahref="/article/HTML5-tower-defense/"target="_blank">關(guān)于</a>| <ahref="/oldj/HTML5-tower-defense"target="_blank">源碼</a>| <ahref="/">Rainy</a>© </div></div><scripttype="text/javascript"src="js/td.js"></script><scripttype="text/javascript"src="js/td-lang.js"></script><scripttype="text/javascript"src="js/td-event.js"></script><scripttype="text/javascript"src="js/td-stage.js"></script><scripttype="text/javascript"src="js/td-element.js"></script><scripttype="text/javascript"src="js/td-obj-map.js"></script><scripttype="text/javascript"src="js/td-obj-grid.js"></script><scripttype="text/javascript"src="js/td-obj-building.js"></script><scripttype="text/javascript"src="js/td-obj-monster.js"></script><scripttype="text/javascript"src="js/td-obj-panel.js"></script><scripttype="text/javascript"src="js/td-data-stage-1.js"></script><scripttype="text/javascript"src="js/td-cfg-buildings.js"></script><scripttype="text/javascript"src="js/td-cfg-monsters.js"></script><scripttype="text/javascript"src="js/td-render-buildings.js"></script><scripttype="text/javascript"src="js/td-msg.js"></script><scripttype="text/javascript"src="js/td-walk.js"></script><scripttype="text/javascript"> window.onload=function(){ _TD.init("td-board",true); document.getElementById("td-loading").style.display="none"; document.getElementById("td-board").style.display="block"; };</script></body>css樣式表c.css源代碼：html,body{margin:0;padding:0;font-size:12px;line-height:20px;font-family:Verdana,"TimesNewRoman",serif;background:#1A74BA;}h1{padding:0;margin:0;line-height:48px;font-size:18px;font-weight:bold;font-family:Verdana,"TimesNewRoman",serif;letter-spacing:0.12em;}#wrapper{margin:0auto;}#td-wrapper{padding:8px24px60px24px;background:#E0F4FC;}#td-board{display:none;font-size:16px;}#td-boardcanvas#td-canvas{position:relative;background:#fff;border:solid1px#cdf;}#td-loading{font-size:18px;line-height:48px;padding:60px0120px0;font-style:italic;}#about{color:#fff;padding:8px24px;}#abouta{color:#fff;}建筑屬性td-cfg-buildings.js源代碼：TD.getDefaultBuildingAttributes=function(building_type){ varbuilding_attributes={ //路障 "wall":{ damage:0, range:0, speed:0, bullet_speed:0, life:100, shield:500, cost:5 }, //炮臺(tái) "cannon":{ damage:10, range:4, max_range:8, speed:2, bullet_speed:6, life:100, shield:100, cost:300, _upgrade_rule_damage:function(old_level,old_value){ returnold_value*(old_level<=10?1.2:1.3); } }, //輕機(jī)槍 "LMG":{ damage:3, range:5, max_range:10, speed:3, bullet_speed:6, life:100, shield:50, cost:100 }, //重機(jī)槍 "HMG":{ damage:30, range:3, max_range:5, speed:3, bullet_speed:5, life:100, shield:200, cost:800, _upgrade_rule_damage:function(old_level,old_value){ returnold_value*1.3; } }, //激光槍 "laser_gun":{ damage:25, range:6, max_range:10, speed:20,// bullet_speed:10, life:100, shield:100, cost:2000 } }; returnbuilding_attributes[building_type]||{}; };怪獸屬性td-cfg-monsters.js源代碼：functiondefaultMonsterRender(){ if(!this.is_valid||!this.grid)return; varctx=TD.ctx; //畫一個(gè)圓代表怪物 ctx.strokeStyle="#000"; ctx.lineWidth=1; ctx.fillStyle=this.color; ctx.beginPath(); ctx.arc(this.cx,this.cy,this.r,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); ctx.stroke(); //畫怪物的生命值 if(TD.show_monster_life){ vars=Math.floor(TD.grid_size/4), l=s*2-2; ctx.fillStyle="#000"; ctx.beginPath(); ctx.fillRect(this.cx-s,this.cy-this.r-6,s*2,4); ctx.closePath(); ctx.fillStyle="#f00"; ctx.beginPath(); ctx.fillRect(this.cx-s+1,this.cy-this.r-5,this.life*l/this.life0,2); ctx.closePath(); } } TD.getDefaultMonsterAttributes=function(monster_idx){ varmonster_attributes=[ { //idx:0 name:"monster1", desc:"最弱小的怪物", speed:3, max_speed:10, life:50, damage:1, shield:0, money:5 }, { //idx:1 name:"monster2", desc:"稍強(qiáng)一些的小怪", speed:6, max_speed:20, life:50, damage:5, shield:1 }, { //idx:2 name:"monsterspeed", desc:"速度較快的小怪", speed:12, max_speed:30, life:50, damage:6, shield:1 }, { //idx:3 name:"monsterlife", desc:"生命值很強(qiáng)的小怪", speed:5, max_speed:10, life:500, damage:7, shield:1 }, { //idx:4 name:"monstershield", desc:"防御很強(qiáng)的小怪", speed:5, max_speed:10, life:50, damage:7, shield:50 }, { //idx:5 name:"monsterdamage", desc:"傷害值很大的小怪", speed:7, max_speed:14, life:50, damage:15, shield:2 }, { //idx:6 name:"monsterspeed-life", desc:"速度、生命都較高的怪物", speed:15, max_speed:30, life:100, damage:5, shield:3 }, { //idx:7 name:"monsterspeed-2", desc:"速度很快的怪物", speed:30, max_speed:40, life:30, damage:5, shield:1 } ]; if(typeofmonster_idx=="undefined"){ //如果只傳了一個(gè)參數(shù)，則只返回共定義了多少種怪物 returnmonster_attributes.length; } varattr=monster_attributes[monster_idx]||monster_attributes[0], attr2={}; TD.lang.mix(attr2,attr); if(!attr2.render){ //如果沒有指定當(dāng)前怪物的渲染方法 attr2.render=defaultMonsterRender } returnattr2; }; TD.makeMonsters=function(n,range){ vara=[],count=0,i,c,d,r,l; if(!range){ range=[]; for(i=0;i<TD.monster_type_count;i++){ range.push(i); } } l=range.length; while(count<n){ d=n-count; c=Math.floor(Math.random()*d)+1; r=Math.floor(Math.random()*l); a.push([c,range[r]]); count+=c; } returna; }初始數(shù)據(jù)td-data-stage-1.js源代碼：var_stage_main_init=function(){ varact=newTD.Act(this,"act-1"), scene=newTD.Scene(act,"scene-1"), cfg=TD.getDefaultStageData("scene_endless"); this.config=cfg.config; TD.life=this.config.life; TD.money=this.config.money; TD.score=this.config.score; TD.difficulty=this.config.difficulty; TD.wave_damage=this.config.wave_damage; //makemap varmap=newTD.Map("main-map",TD.lang.mix({ scene:scene, is_main_map:true, step_level:1, render_level:2 },cfg.map)); map.addToScene(scene,1,2,map.grids); scene.map=map; //makepanel scene.panel=newTD.Panel("panel",TD.lang.mix({ scene:scene, main_map:map, step_level:1, render_level:7 },cfg.panel)); this.newWave=cfg.newWave; this.map=map; this.wait_new_wave=this.config.wait_new_wave; }, _stage_main_step2=function(){ //TD.log(this.current_act.current_scene.wave); varscene=this.current_act.current_scene, wave=scene.wave; if((wave==0&&!this.map.has_weapon)||scene.state!=1){ return; } if(this.map.monsters.length==0){ if(wave>0&&this.wait_new_wave==this.config.wait_new_wave-1){ //一波怪物剛剛走完 //獎(jiǎng)勵(lì)生命值 varwave_reward=0; if(wave%10==0){ wave_reward=10; }elseif(wave%5==0){ wave_reward=5; } if(TD.life+wave_reward>100){ wave_reward=100-TD.life; } if(wave_reward>0){ TD.recover(wave_reward); } } if(this.wait_new_wave>0){ this.wait_new_wave--; return; } this.wait_new_wave=this.config.wait_new_wave; wave++; scene.wave=wave; this.newWave({ map:this.map, wave:wave }); } }; TD.getDefaultStageData=function(k){ vardata={ stage_main:{ width:640,//px height:560, init:_stage_main_init, step2:_stage_main_step2 }, scene_endless:{ //scene1 map:{ grid_x:16, grid_y:16, x:TD.padding, y:TD.padding, entrance:[0,0], exit:[15,15], grids_cfg:[ { pos:[3,3], //building:"cannon", passable_flag:0 }, { pos:[7,15], build_flag:0 }, { pos:[4,12], building:"wall" }, { pos:[4,13], building:"wall" //},{ //pos:[11,9], //building:"cannon" //},{ //pos:[5,2