論文-基于HTML5的消除類(lèi)游戲

1、-*大學(xué)本科生畢業(yè)論文設(shè)計(jì)基于HTML5的消除類(lèi)游戲 指導(dǎo)教師：所在學(xué)院：專(zhuān)業(yè)系：班級(jí)屆：二 * 年 * 月 * 日. z-目 錄中文摘要、關(guān)鍵字11 引言21.1 研究背景21.2 研究現(xiàn)狀21.3 研究目的31.4 本文主要容32 研究技術(shù)分析42.1 HTML5簡(jiǎn)介42.2. 游戲引擎42.3 開(kāi)發(fā)環(huán)境53 工程的設(shè)計(jì)與開(kāi)發(fā) 63.1 游戲玩法63.2 需求分析63.3 初步設(shè)計(jì)63.4 游戲開(kāi)場(chǎng)流程73.5 局部程序界面與實(shí)現(xiàn)94 總結(jié)144.1 工程學(xué)習(xí)階段總結(jié)144.2 工程實(shí)施階段總結(jié)154.3 擴(kuò)展知識(shí)15致 17參考文獻(xiàn)18英文摘要、關(guān)鍵字19. z-基于HTML5的消除類(lèi)游

2、戲 軟件學(xué)院 軟件工程專(zhuān)業(yè)指導(dǎo)教師 *作 者 *摘要：近幾年來(lái)社會(huì)不斷地快速開(kāi)展，也讓人們?cè)诠ぷ髦挟a(chǎn)生了很多這樣那樣的壓力，隨著科技的進(jìn)步，人們更希望通過(guò)網(wǎng)絡(luò)、通過(guò)游戲來(lái)釋放自己的壓力，以往的技術(shù)都只是讓游戲在筆記本或者移動(dòng)產(chǎn)品上單獨(dú)運(yùn)行，并不可以跨平臺(tái)操作，這也增加了開(kāi)發(fā)者的工作量，因此經(jīng)過(guò)人們不懈的努力，終于在原有根底上對(duì)html進(jìn)展了改革，這就是HTML5。HTML5具有很多新的特性，最主要的還是它具有跨平臺(tái)兼容性，不僅可以在電腦上運(yùn)行，還可以在移動(dòng)終端運(yùn)行，不僅如此HTML5中的Canvas元素可以使瀏覽器直接創(chuàng)立并處理圖像，減輕了開(kāi)發(fā)人員的負(fù)擔(dān)，而且使界面更加美觀，具有很好的用戶體驗(yàn)

3、。減少了用戶刷新頁(yè)面的時(shí)間，得到了更多人的認(rèn)可,因此基于HTML5所制作的游戲也就成了很多人的研究課題。本文通過(guò)介紹HTML5的一些特性，以及對(duì)游戲引擎的學(xué)習(xí)，比方cocos2d,unity3d等的認(rèn)識(shí)，并通過(guò)當(dāng)下比較流行的消除類(lèi)游戲的研發(fā)過(guò)程分析來(lái)使HTML5的容更加形象，并對(duì)HTML5的前景做了一些分析。 關(guān)鍵詞：HTML5 Canvas 游戲引擎 cocos2d unity3d. z-1 引言1.1 研究的背景當(dāng)今社會(huì)，隨著經(jīng)濟(jì)的不斷開(kāi)展，人們對(duì)精神領(lǐng)域的追求也在不斷加強(qiáng)，人們不再滿足于只在笨拙的臺(tái)式機(jī)上進(jìn)展工作，而是越來(lái)越傾向于使用移動(dòng)電子產(chǎn)品，并且人們對(duì)于網(wǎng)頁(yè)的設(shè)計(jì)，刷新的速度都有了

4、更高的要求，在這樣的一個(gè)時(shí)代要求下，以前的網(wǎng)頁(yè)制作語(yǔ)言HTML已經(jīng)不能滿足人們的要求，需要在移動(dòng)、跨平臺(tái)等新特性下研發(fā)更新html語(yǔ)言。1先前的幾個(gè)html版本，主要針對(duì)的是靜態(tài)的文本網(wǎng)頁(yè)，用于顯示文檔和共享一些數(shù)據(jù)，后來(lái)動(dòng)態(tài)和應(yīng)用程序的出現(xiàn)，使得網(wǎng)頁(yè)更具有靈動(dòng)性，但是這些都是基于第三方的插件或者Adobe Flash來(lái)完成的，這些插件可以使更加豐富，可以提供人機(jī)交互的功能。隨著網(wǎng)店和網(wǎng)頁(yè)游戲的不斷興起，Web早就不能只滿足于靜態(tài)的文檔，但是Web本身又不具備對(duì)視頻，音頻，圖像處理的開(kāi)發(fā)功能，想要在網(wǎng)頁(yè)中添加這些就必須借助第三方插件，另外有時(shí)還需要其他的技術(shù)來(lái)支持HTML，讓它支持多種媒體，這

5、就加重了開(kāi)發(fā)人員的工作量，不僅如此，人們?cè)偎⑿戮W(wǎng)頁(yè)時(shí)由于容過(guò)多，消耗時(shí)間較長(zhǎng)，用戶體驗(yàn)差。因此通過(guò)不懈的努力，HTML5終于應(yīng)運(yùn)而生。1.2 研究的現(xiàn)狀HTML5對(duì)舊的Web網(wǎng)頁(yè)制作技術(shù)做了大量的改進(jìn)、創(chuàng)新。它增加了很多新的元素，將一些模塊動(dòng)態(tài)化，另外HTML5的核心目標(biāo)是增加了比方<audio>、<video>等新的媒體元素，這樣就可以不用第三方插件來(lái)播放多媒體，操作更加簡(jiǎn)單方便。不僅如此新增加的Canvas元素，可以使瀏覽器直接創(chuàng)立并處理圖形，使得網(wǎng)頁(yè)布局更加美觀大方，也方便了開(kāi)發(fā)人員，代碼更加簡(jiǎn)潔。HTML5不僅是對(duì)互聯(lián)網(wǎng)的改革，它更增加跨平臺(tái)性，兼容性更好，它將

6、互聯(lián)網(wǎng)帶向了一個(gè)更加成熟的平臺(tái)，使用HTML5開(kāi)發(fā)的程序，不僅可以在電腦上運(yùn)行，同樣人們也可以在移動(dòng)產(chǎn)品上使用程序，人們獲取信息更加方便，快捷。大大的滿足了人們對(duì)了解各種信息的迫切要求，無(wú)論是查看文檔信息，還是加載動(dòng)畫(huà)、視頻，都增加了頁(yè)面的刷新速度，具有良好的用戶體驗(yàn)。HTML5新增加的這些功能，也為網(wǎng)頁(yè)游戲提供了開(kāi)發(fā)上的便利條件，不再需要第三方插件來(lái)支持游戲的音效，動(dòng)畫(huà)，給網(wǎng)頁(yè)游戲開(kāi)創(chuàng)了一個(gè)新的時(shí)代。在國(guó)外也掀起了一股學(xué)習(xí)開(kāi)發(fā)HTML5游戲的熱潮，之前的網(wǎng)頁(yè)游戲開(kāi)發(fā)本錢(qián)高，即需要效勞器端有需要客戶端的支持，而現(xiàn)在HTML5可以跨平臺(tái)操作，可以在更多的移動(dòng)產(chǎn)品上進(jìn)展操作，更能滿足人們對(duì)于便捷的

7、要求。同時(shí)開(kāi)發(fā)者只需要在原有根底上了解一下增加的新的HTML5和JS語(yǔ)言，當(dāng)然對(duì)于游戲少不了的還有各種引擎，這些會(huì)在后面的文章中有所涉及。1.3 研究的目的由當(dāng)前的游戲開(kāi)發(fā)趨勢(shì)來(lái)看，以后將會(huì)是HTML5的時(shí)代，當(dāng)刷新HTML5的游戲時(shí)會(huì)像刷新頁(yè)面那樣簡(jiǎn)單，而且它的所有技術(shù)都是開(kāi)放性的，方便開(kāi)發(fā)者學(xué)習(xí)和應(yīng)用。為使用者提供了更加精巧的動(dòng)畫(huà)效果，這對(duì)有游戲的設(shè)計(jì)來(lái)說(shuō)至關(guān)重要，很多游戲能夠得到人們的廣泛關(guān)注除了玩法新穎意外，那就是畫(huà)風(fēng)優(yōu)美，讓人賞心悅目，這也是HTML5游戲的獨(dú)特之處。但是畢竟HTML5是基于瀏覽器的語(yǔ)言，所以由此開(kāi)發(fā)的游戲也是輕量級(jí)的小游戲，隨著移動(dòng)電子產(chǎn)品的多元化，人們更希望通過(guò)游

8、戲來(lái)釋放自己在工作學(xué)習(xí)中的壓力，雖然HTML5不能制作大型游戲，也因此游戲種類(lèi)千變?nèi)f化，豐富了人們的生活，不至于再長(zhǎng)時(shí)間萬(wàn)同一款游戲時(shí)覺(jué)得枯燥無(wú)味。這也為游戲開(kāi)發(fā)者和供應(yīng)商提供了更多的時(shí)機(jī)。此外HTML5還提供了諸如重力感應(yīng)，離線地圖、多點(diǎn)觸控等其他的交互應(yīng)用功能。無(wú)論是對(duì)于游戲還是來(lái)說(shuō)都是一次質(zhì)的飛越，而作為一個(gè)具有探索，好奇心的軟件學(xué)生來(lái)說(shuō)，學(xué)習(xí)HTML5必將對(duì)自己以后進(jìn)入社會(huì)，對(duì)自己以后的工作有所幫助，不斷學(xué)習(xí)新的技術(shù)，跟上時(shí)代的潮流，這是我們當(dāng)代大學(xué)生的重要職責(zé)。本文通過(guò)對(duì)HTML5進(jìn)展短暫的學(xué)習(xí)之后，完成了對(duì)HTML5的小型的實(shí)踐游戲，來(lái)穩(wěn)固對(duì)學(xué)習(xí)容的理解，找到了網(wǎng)頁(yè)與游戲的相當(dāng)好的

9、契合。1.4 本文主要容首先使用了HTML5新添加的<audio>元素標(biāo)簽，對(duì)音頻進(jìn)展添加，不再借助第三方軟件，方便了我們的編程，只需添加相應(yīng)的聲音文件即可，代碼減少了很多，也表達(dá)了在各瀏覽器中的兼容性。而且我們還可以隱藏播放時(shí)的界面，這樣就不會(huì)影響界面的美觀了。音頻功能是有了新的標(biāo)簽，則人們更多的是注重視頻的添加不再則麻煩，針對(duì)這一點(diǎn)HTML5也為此創(chuàng)立了<video>元素標(biāo)簽，使得視頻的添加不再過(guò)于繁瑣，代碼也不再過(guò)于臃腫。很多人認(rèn)為視頻要比音頻的添加困難，因?yàn)橐曨l還包括了圖像，但是對(duì)于HTML5來(lái)說(shuō)只需要一個(gè)標(biāo)簽而已，與音頻的添加完全相似。對(duì)于游戲來(lái)說(shuō)最主要的就是

10、界面要美觀，這就要說(shuō)到我們HTML5最主要的新元素<Canvas>了，通過(guò)Canvas你可以創(chuàng)立絢麗的圖形和游戲界面，不僅如此你還可以通過(guò)JavaScript API來(lái)控制Canvas進(jìn)展交互應(yīng)用，產(chǎn)生動(dòng)態(tài)的圖畫(huà)，動(dòng)態(tài)的更新數(shù)據(jù)。不再借助第三方的Flash軟件來(lái)顯示動(dòng)畫(huà)，還可以自定義動(dòng)畫(huà)容，方便快捷。HTML5還可以進(jìn)展本地存儲(chǔ)，這個(gè)新的功能可以用來(lái)存儲(chǔ)分?jǐn)?shù)或者是玩家的排行榜。盡可能的使用新的特性標(biāo)簽來(lái)設(shè)計(jì)實(shí)現(xiàn)游戲的根本功能。2 研究技術(shù)分析2.1 HTML5簡(jiǎn)介HTML5是萬(wàn)維網(wǎng)html語(yǔ)言的第五個(gè)版本，目前比較流行的版本是HTML4.01，雖然相較先前的版本有了很大的改善，但是

11、隨著移動(dòng)應(yīng)用的開(kāi)展，以前的那些版本已經(jīng)遠(yuǎn)遠(yuǎn)達(dá)不到人們對(duì)于科學(xué)技術(shù)的要求，Html需要在包括語(yǔ)言方面，語(yǔ)法方面和UI、API等各方面的更新，因此就產(chǎn)生了現(xiàn)在這個(gè)新的版本。在HTML5之前人們更注重用html來(lái)制作一些靜態(tài)的網(wǎng)頁(yè)，那時(shí)候人們通過(guò)網(wǎng)絡(luò)的交互還不是則興旺，從網(wǎng)絡(luò)上了解外界信息的心情也不是則迫切，博客，網(wǎng)店也沒(méi)有興起。但是近幾年隨著科技和經(jīng)濟(jì)的不斷開(kāi)展，人們更傾向于從網(wǎng)上獲取信息，在網(wǎng)上購(gòu)置商品，節(jié)省了人們很多的時(shí)間與精力。因此再2021年HTML5正式被大家所認(rèn)可，實(shí)現(xiàn)了Web領(lǐng)域近十幾年來(lái)質(zhì)的飛躍，將Web推向了一個(gè)更高、更成熟、更穩(wěn)定的平臺(tái)。3在此根底上HTML5將音頻，視頻，動(dòng)畫(huà)

12、等容融為一體，更是增加了很多新的元素標(biāo)簽，去除了一些繁瑣，冗長(zhǎng)的標(biāo)簽，將一些相似標(biāo)簽融為一體，比方增加了表單驗(yàn)證標(biāo)簽，節(jié)省了表單輸入時(shí)的麻煩，這些新的標(biāo)簽是網(wǎng)頁(yè)構(gòu)造更加緊湊合理。比方hgroup可以將標(biāo)題進(jìn)展分組，合成一個(gè)個(gè)的整體，使開(kāi)發(fā)頁(yè)面也更加整潔；還有新添加的導(dǎo)航標(biāo)簽nav，有利于搜索引擎的結(jié)果整理。HTML5相較其他版本的以大亮點(diǎn)就是將audio和video引入到標(biāo)簽中，這樣網(wǎng)頁(yè)播放音頻和視頻時(shí)就不必借助第三方插件，本身就可以做到了。當(dāng)然對(duì)于游戲來(lái)說(shuō)最主要的還是圖形動(dòng)畫(huà)的界面要美觀，這樣才可以吸引更多的人來(lái)玩，對(duì)于這方面不得不提的就是Canvas標(biāo)簽了，它與其他元素不同，不像audio

13、等元素直接將現(xiàn)有元素插到網(wǎng)頁(yè)中，而是可以獨(dú)立的處理或創(chuàng)立2D圖形，不僅如此，還可以通過(guò)JavaScript語(yǔ)言來(lái)控制Canvas的圖形來(lái)響應(yīng)與用戶交互的動(dòng)態(tài)圖形與動(dòng)畫(huà)。2.2 游戲引擎介紹完了主要的開(kāi)發(fā)語(yǔ)言平臺(tái)，那開(kāi)發(fā)過(guò)游戲的人都應(yīng)該了解，開(kāi)發(fā)一款游戲最重要的莫過(guò)于引擎了，下面我將介紹一下本次研究課題中所使用到的引擎。游戲引擎是整款游戲的核心，是游戲的心臟，它提供很多種模板供開(kāi)發(fā)者使用，使游戲設(shè)計(jì)者不必從零開(kāi)場(chǎng)，就已經(jīng)有可用的人物，工具等，減輕了開(kāi)發(fā)者的工作量，也降低了學(xué)習(xí)游戲開(kāi)發(fā)的門(mén)檻。一般的游戲引擎包括渲染、場(chǎng)景、攝像、腳本、物理因素重力、摩擦等、碰撞檢測(cè)、音效等系統(tǒng)，游戲玩家所體驗(yàn)到的關(guān)

14、卡、劇情、玩法等都由引擎來(lái)控制，它在整個(gè)游戲中扮演著發(fā)動(dòng)機(jī)的角色，為整個(gè)游戲提供動(dòng)力，也扮演著幕后角色，在后臺(tái)指揮者游戲的進(jìn)程。一款完整的游戲包括游戲資源如聲音、圖片等和游戲引擎共同組成，缺一不可。隨著游戲種類(lèi)的不斷增加，游戲引擎也是多種多樣，一般分為2D引擎和3D引擎，其中2D的引擎又有不同的種類(lèi)比方cocos2d、Bo*2D、gamemark、untiy2d等，3D的游戲引擎包括Unity3D、away3D、wolfenstein3D engine、Panda3D等各種各樣的引擎可以寫(xiě)出風(fēng)格各異的游戲，豐富了人們的精神世界。本文所列舉的實(shí)例游戲采用的是cocos2d-html5的游戲引擎，

15、這款引擎主要針對(duì)用HTML5來(lái)編寫(xiě)的游戲，cocos2d-html5包括了導(dǎo)演、場(chǎng)景、布景、攝像機(jī)、人物、動(dòng)作等主要的概念。導(dǎo)演是整個(gè)引擎或者是整個(gè)游戲的總指揮，它控制著其他的控件，比方人物該有什么樣的動(dòng)作，有什么樣的語(yǔ)言等等，總之其他的事物都要服從導(dǎo)演的指揮；場(chǎng)景和布景主要是負(fù)責(zé)游戲的背景以及各關(guān)卡之間的轉(zhuǎn)換作用，是人們對(duì)于一個(gè)游戲的第一印象；攝像機(jī)是將人物或場(chǎng)景的轉(zhuǎn)換記錄下來(lái)，連成一段合理的故事；人物和動(dòng)作也是游戲的靈魂，這里的人物又叫做精靈，其實(shí)并不是單純的指人，也可以是方塊等其他的物體，就是給這些精靈附上了動(dòng)作，才使游戲有了動(dòng)態(tài)的效果。這些概念相互依存，相互關(guān)聯(lián)、必不可少，少了任何一項(xiàng)

16、整個(gè)游戲都會(huì)坍塌。4Cocos2d-html5還支持跨平臺(tái)操作，這也符合了HTML5的新的特性，不僅支持瀏覽器使用，還可以支持移動(dòng)應(yīng)用，讓人們隨時(shí)隨地盡情玩耍，現(xiàn)在隨處可見(jiàn)拿著移動(dòng)產(chǎn)品不斷玩游戲的人們，不過(guò)現(xiàn)在大局部游戲還是用android或Ios語(yǔ)言來(lái)寫(xiě)的，我相信隨著HTML5的不斷開(kāi)展，將來(lái)會(huì)有更多的游戲是可以跨平臺(tái)的，更能滿足人們對(duì)不同游戲的渴望。2.3 開(kāi)發(fā)環(huán)境綜合開(kāi)發(fā)工具，網(wǎng)上對(duì)于cocos2D的開(kāi)發(fā)工具有很多種，我所選擇的開(kāi)發(fā)工具是webstorm,這款工具使用方便，只需要將下載好的cocos2D引擎加載到工具中即可。WebStorm是一款基于javascript語(yǔ)言的開(kāi)發(fā)工具，被

17、稱(chēng)為“最強(qiáng)的HTML5編輯神器，它集成了多種模板方便人們開(kāi)發(fā)，還具有拼寫(xiě)檢查，重復(fù)代碼檢查，語(yǔ)言分析，智能補(bǔ)全代碼，它不僅可以支持不同的瀏覽器，還支持自定義函數(shù)，代碼格式化，聯(lián)想查詢，代碼調(diào)試，代碼構(gòu)造調(diào)試、重疊等功能。使用和安裝過(guò)程相當(dāng)方便。根本界面如以下圖：圖2.3 界面所使用javascript框架是Jquery,Jquery是一款輕量級(jí)的語(yǔ)言框架，它不僅兼容CSS3，而且還兼容各種瀏覽器如火狐，IE，opera，它有一個(gè)比其他框架更好的特點(diǎn)，那就是它的文檔說(shuō)明非常全，便于開(kāi)發(fā)者自己學(xué)習(xí)，同時(shí)也提供了很多成熟的插件，還可以將程序代碼和html容分開(kāi)來(lái)寫(xiě)，不至于看起來(lái)很混亂。Jquery是

18、一款免費(fèi)，開(kāi)放的javascript框架，它的語(yǔ)法設(shè)計(jì)方便了人們的開(kāi)發(fā)與學(xué)習(xí)，同時(shí)它還提供了API，開(kāi)發(fā)者可以自己編寫(xiě)自己想要的插件，主要的是它可以為游戲提供動(dòng)態(tài)特效。2在游戲調(diào)試過(guò)程中，采用的是火狐瀏覽器，因?yàn)檫@是一款主流瀏覽器，這樣也方便了開(kāi)發(fā)者的調(diào)試，一般經(jīng)過(guò)調(diào)試后，再在其他瀏覽器上運(yùn)行時(shí)也不會(huì)有什么大的問(wèn)題。3 工程的設(shè)計(jì)與開(kāi)發(fā)3.1 游戲的玩法現(xiàn)在有很多的消除類(lèi)游戲，而我們所實(shí)現(xiàn)的這類(lèi)游戲應(yīng)該是玩法最簡(jiǎn)單的一種，這款消除類(lèi)游戲是當(dāng)下比較流行的星星消除，是一款很容易讓人著迷的游戲，點(diǎn)擊開(kāi)場(chǎng)后，通過(guò)快速點(diǎn)擊兩個(gè)或者兩個(gè)以上的靠在一起的方塊，實(shí)現(xiàn)快速消除，每消除一次方塊就會(huì)得到相應(yīng)的分?jǐn)?shù)，

19、每一關(guān)都會(huì)有一個(gè)通過(guò)本關(guān)的目標(biāo)分?jǐn)?shù)，當(dāng)你的分?jǐn)?shù)大于或等于目標(biāo)分?jǐn)?shù)，并且沒(méi)有可以再在進(jìn)展消除的方塊時(shí)，本關(guān)游戲通過(guò)，最后如果剩余的星星數(shù)小于10的話，則可以得到額外的獎(jiǎng)勵(lì)，所以要爭(zhēng)取賺的更高的分?jǐn)?shù)，才可以一直進(jìn)展下去，如果有一關(guān)，你并未到達(dá)目標(biāo)分?jǐn)?shù)，那游戲就完畢了。3.2 需求分析游戲用戶包括開(kāi)發(fā)者和游戲玩家。游戲玩家通過(guò)瀏覽器翻開(kāi)游戲，點(diǎn)擊開(kāi)場(chǎng)按鈕，開(kāi)場(chǎng)游戲。根據(jù)游戲提示的玩法開(kāi)場(chǎng)游戲，并且隨時(shí)查看自己的得分情況。玩家用例分析如以下圖：圖3.1 用例分析3.3 初步設(shè)計(jì)首先先設(shè)計(jì)游戲界面，界面是游戲給玩家的第一印象，對(duì)于本工程實(shí)例來(lái)說(shuō)大致可以分為游戲前臺(tái)和游戲后臺(tái)。前臺(tái)負(fù)責(zé)游戲的界面與承受玩家

20、發(fā)出的指令，前臺(tái)還負(fù)責(zé)游戲音效，游戲初始化以及將玩家的單擊雙擊觸發(fā)事件發(fā)送給后臺(tái)，并承受后臺(tái)所發(fā)送的分?jǐn)?shù)數(shù)據(jù)。后臺(tái)則負(fù)責(zé)處理數(shù)據(jù)，將數(shù)據(jù)反響給前臺(tái)，還負(fù)責(zé)將玩家的得分情況排行情況輸入數(shù)據(jù)庫(kù)中。模塊功能圖如下：圖3.2 功能設(shè)計(jì)游戲界面設(shè)計(jì)是一個(gè)10*10的方塊矩陣，這個(gè)矩陣可以根據(jù)自己的喜好自定義更改矩陣的數(shù)量，當(dāng)游戲玩家消除方塊后，在游戲引擎的控制下，方塊會(huì)自動(dòng)下落，更改自己的位置；前臺(tái)的界面還提供了音效控制按鈕，因?yàn)椴⒉皇敲恳粋€(gè)人都喜歡玩游戲的時(shí)候有音樂(lè)，可以根據(jù)個(gè)人喜好控制背景音效，不同的事件觸發(fā)會(huì)產(chǎn)生不同音效。開(kāi)發(fā)游戲最重要的一項(xiàng)就是游戲引擎，在前臺(tái)進(jìn)展碰撞檢測(cè)，以及其他的物理引擎檢測(cè)

21、，將數(shù)據(jù)或者事件的接口傳回后臺(tái)，后臺(tái)進(jìn)展處理后，將結(jié)果返回前臺(tái)，前臺(tái)根據(jù)處理結(jié)果，改變場(chǎng)景。3.4 游戲開(kāi)場(chǎng)流程前臺(tái)局部用戶使用瀏覽器翻開(kāi)游戲，既可以開(kāi)場(chǎng)游戲，游戲開(kāi)場(chǎng)流程如以下圖：圖3.3 流程圖后臺(tái)流程包括數(shù)據(jù)的接收與發(fā)送，以及與數(shù)據(jù)庫(kù)的交互行為，將前臺(tái)檢測(cè)到的行為進(jìn)展處理。簡(jiǎn)易流程圖如下：圖3.4 后臺(tái)流程圖3.5 局部程序界面與實(shí)現(xiàn)開(kāi)場(chǎng)界面只需要接收按鈕的點(diǎn)擊事件，游戲首頁(yè)最主要的應(yīng)該是有好的用戶體驗(yàn)，有一個(gè)美觀大方的頁(yè)面，現(xiàn)在玩游戲的不僅是兒童，更多的是那些忙碌了一天的白領(lǐng)用來(lái)釋放壓力，放松身心的最有效的方法，所以界面要美觀大方。對(duì)于首頁(yè)，我們既可以使用CSS來(lái)美化頁(yè)面，也可以使用H

22、TML5最新的標(biāo)簽Canvas來(lái)渲染界面，最終首頁(yè)局部代碼：Ltotype.onStartClicked = function () this.newGame.runAction(cc.ScaleTo.create(0.2, 1.3); cc.BuilderReader.runScene(", "MainLayer");/開(kāi)場(chǎng)界面的場(chǎng)景創(chuàng)立Ltotype.createBgParticle = function (*, y, n) var background = cc.ParticleSystem.create("Re

23、sources/bg/" + n + ".png");background.setAnchorPoint(cc.p(1, 0.5);background.setPosition(cc.p(*, y); background.setZOrder(10); this.rootNode.addChild(background);/初始化背景接下來(lái)進(jìn)入主場(chǎng)景界面，其中局部代碼如下：MainLtotype.getRandomStar = function (col, row) this.starSize = 75; var stars = PS_MAIN_T

24、E*TURE.STARS; var randomStar = starsgetRandom(stars.length);/隨機(jī)產(chǎn)生星星 var starSprite = cc.Sprite.createWithSpriteFrameName(randomStar); starSprite.setAnchorPoint(cc.p(0.5, 0.5);/設(shè)置星星的位置 starSprite.setPosition(cc.p(36 + colInde* * this.starSize, 1300); starSprite.starData = n: randomStar, inde*OfColumn

25、: col, inde*OfRow: row;/布置星星群 starSprite.setZOrder(100); var flowTime = row / 10; var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + col * this.starSize, 36 + row * this.starSize); starSprite.runAction(fallAction); return starSprite;/在這一局部主要是先建立一個(gè)主要場(chǎng)景，添加隨機(jī)掉落的星星的位置。然后再在已有位置上繪制一個(gè)10*10的星星群，for (var

26、i = 0; i < this.num*; i+) var sprites = new Array(this.numY); for (var j = 0; j < this.numY; j+) var pSprite0 = this.getRandomStar(i, j); if (pSprite0 != null) this.rootNode.addChild(pSprite0); spritesj = pSprite0; /添加星星群。到這里，這個(gè)游戲的根本雛形已經(jīng)完成，因?yàn)楸疚闹皇谴蟾诺慕榻B一下整個(gè)游戲制作過(guò)程中局部代碼，所以這里主要介紹的是JS的局部控制代碼。游戲中的算法分

27、析，每一顆星星添加單擊事件，在此局部需要判斷一下碰撞檢測(cè)，當(dāng)點(diǎn)擊任何一個(gè)星星時(shí)，第一次單擊是選中星星，并判斷一下，與它相鄰的周?chē)欠裼信c它一樣的星星，如果有則全部選中，并進(jìn)展第二次單擊消除星星，通過(guò)語(yǔ)句可以判斷出是第幾次單擊事件，如果它的值小于1，那就表示是第一次單擊事件，就檢測(cè)一下是否有顏色一樣的區(qū)域；如果它的值大于1，那就表示是第二次單擊事件，這時(shí)候就要判斷是否點(diǎn)擊的是同一個(gè)星星，如果是那就進(jìn)展消除操作，操作主要語(yǔ)句是this.removeSameColorStars()，當(dāng)消除星星時(shí)，還應(yīng)該添加上聲音，語(yǔ)句為cc.AudioEngine.getInstance().playEffect(

28、PS_MAIN_SOUNDS.broken, false)。第二步就是要檢測(cè)一下所選中的星星周?chē)遣皇怯幸粯拥念伾男切?，如果有，那就將它們放到同一個(gè)數(shù)組中去，如果數(shù)組的長(zhǎng)度大于1，則說(shuō)明周?chē)幸粯拥男切?。在這只舉一個(gè)例子，比方左面：var fourSideSpriteList = ;/創(chuàng)立數(shù)組變量。 var color = sprite.starData.color; var col = sprite.starData.inde*OfColumn;if (col > 0) var left = this.starTablecol - 1row; if (left != null &am

29、p;& left.starData.color = color) fourSideSpriteList.push(left); /判斷左邊的相鄰星星是否顏色一致。在玩游戲的過(guò)程中，你會(huì)發(fā)現(xiàn)，但你選中星星后，一樣顏色的會(huì)有一片，會(huì)自動(dòng)判斷每一顆選中的星星的一樣顏色，這就用到了this.sameColorList和newSameColorList這兩個(gè)數(shù)組，第一個(gè)數(shù)組判斷的是當(dāng)前選中的星星的相鄰一樣顏色，第二個(gè)數(shù)組判斷的是新選中的延伸出來(lái)的星星是否顏色一樣。當(dāng)將上述語(yǔ)句判斷完成后，就是要進(jìn)展消除工作了，不僅要讓星星消除，還應(yīng)該加上一些動(dòng)畫(huà)效果，有助于用戶體驗(yàn)，主要語(yǔ)句var simpleS

30、tar = this.sameColorListk;/K為顏色的變量小于顏色數(shù)組長(zhǎng)度var col = simpleStar.starData.inde*OfColumn;var row = simpleStar.starData.inde*OfRow;/創(chuàng)立行和列的變量this.starTablecol.splice(row, 1, null);/邊界星星位置this.rootNode.removeChild(simpleStar);/刪除顏色一樣的星星當(dāng)產(chǎn)生空余空間時(shí)，利用引擎的重力和碰撞檢測(cè)功能將剩余的臨近的星星填充到空余空間，重復(fù)這樣的動(dòng)作，只到最后不再有2個(gè)或2個(gè)以上的一樣星星存在時(shí)

31、，然后再判斷一下所得分?jǐn)?shù)是否已經(jīng)超過(guò)或等于目標(biāo)分?jǐn)?shù)，如果超出則進(jìn)入下一關(guān)，否則游戲完畢。在游戲中人們最關(guān)注的莫過(guò)于分?jǐn)?shù)了，星星消除的記分規(guī)則如下，在主函數(shù)中創(chuàng)立一個(gè)Score變量，開(kāi)場(chǎng)值為0，當(dāng)你只能消除2顆星星時(shí)獲得20分，消除3顆星星時(shí)獲得45分，消除4顆星星時(shí)獲得80分，以此類(lèi)推，消除的星星數(shù)越多，得到的分?jǐn)?shù)就越多，當(dāng)最后沒(méi)有可以消除的星星時(shí)，剩余的星星會(huì)自動(dòng)消除，如果剩余星星數(shù)小于10，則會(huì)有額外的加分，所得分?jǐn)?shù)是將這兩者相加，判斷最后是否超過(guò)目標(biāo)分?jǐn)?shù)，目標(biāo)分?jǐn)?shù)也會(huì)隨著關(guān)數(shù)的增加而增加，這樣也挑戰(zhàn)著人們的極限，促使人們不斷的刷新自己記錄。最終游戲界面如以下圖所示：圖4.1 開(kāi)場(chǎng)界面點(diǎn)擊

32、新游戲界面進(jìn)入初始化的星星群界面：圖4.2 星星群界面選中星星界面：圖4.3 選中界面游戲進(jìn)展中畫(huà)面：圖4.4 進(jìn)展中的界面4 總結(jié)4.1 工程學(xué)習(xí)階段總結(jié)經(jīng)過(guò)了一段時(shí)間的學(xué)習(xí)和時(shí)間之后，使我更加深入的了解了HTML5 的各個(gè)新的特性，通過(guò)使用HTML5和javascript語(yǔ)言編寫(xiě)的這個(gè)程序，我明白了如何獨(dú)立自主的學(xué)習(xí)一門(mén)新的語(yǔ)言，當(dāng)然只有理論知識(shí)還不夠，計(jì)算機(jī)軟件就是一個(gè)需要不斷探索，不斷實(shí)踐的科學(xué)，當(dāng)人們意識(shí)到先前的html語(yǔ)言已經(jīng)不能滿足人們的要求時(shí)，不斷創(chuàng)新，不斷進(jìn)取，不斷挑戰(zhàn)著自己的極限，也就有了HTML5的誕生。HTML5將網(wǎng)頁(yè)開(kāi)發(fā)帶入了一個(gè)新的時(shí)代，摒棄了一些其他版本中繁瑣的標(biāo)

33、簽，又為網(wǎng)頁(yè)注入了新的能量，HTML5所制作的不僅是支持多種瀏覽器，還具有跨平臺(tái)性，也為網(wǎng)絡(luò)游戲提供了更多的平臺(tái)，而且具有較高的平安性和良好的用戶體驗(yàn)。現(xiàn)在各大公司紛紛轉(zhuǎn)向了HTML5的研究方向，這也就預(yù)示著它將有一個(gè)良好的開(kāi)展前景，它將人們的視線從網(wǎng)絡(luò)瀏覽器帶向了移動(dòng)應(yīng)用，它將橫跨多個(gè)智能平臺(tái)。雖然HTML5剛剛問(wèn)世，一些資料還不健全，但是作為一個(gè)當(dāng)代大學(xué)生來(lái)說(shuō)，我們更應(yīng)該努力學(xué)習(xí)先進(jìn)的技術(shù)，將理論與實(shí)踐相結(jié)合，不能完全依賴(lài)與已有的資料，要通過(guò)自己的不斷摸索完善HTML5，因此才規(guī)定HTML5的技術(shù)要絕對(duì)開(kāi)源，供大家討論分享，提出更多的意見(jiàn)，使得HTML5更加強(qiáng)健。隨著移動(dòng)應(yīng)用的不斷增長(zhǎng)，移

34、動(dòng)游戲也越來(lái)越受到人們的追捧，游戲引擎也會(huì)越來(lái)越多，這樣人們?cè)匍_(kāi)發(fā)游戲時(shí)就會(huì)省去一大局部的時(shí)間，減少工作量，游戲的更新?lián)Q代速度也會(huì)增加。4.2 工程實(shí)施階段總結(jié)在工程實(shí)施階段，首先要做好游戲的分析工作，可以先借鑒一下別人成功的案例，具體情況具體分析，做好需求分析，如果遇到自己解決不了的問(wèn)題應(yīng)該及時(shí)向教師或他人請(qǐng)教，畢竟HTML5是一種新的語(yǔ)言形式，又加上從未接觸過(guò)的游戲引擎，雖然說(shuō)這次的任務(wù)難度有點(diǎn)大，但是只要用心學(xué)習(xí)，雖然稱(chēng)不上完整無(wú)缺的游戲，但是最終也是完成了任務(wù)。雖然游戲很小，但是也包含了兩大塊重要的容，不得不在原有根底上，給自己注入新的血液，觀看理論知識(shí)，覺(jué)得還可以，當(dāng)真正的開(kāi)場(chǎng)一個(gè)小

35、的Demo時(shí)，才發(fā)現(xiàn)原來(lái)實(shí)踐起來(lái)是則的困難。就拿HTML5的新增標(biāo)簽Canvas來(lái)說(shuō)，以前只使用過(guò)CSS來(lái)渲染頁(yè)面，當(dāng)時(shí)就覺(jué)得不太好用，因?yàn)椴煌臑g覽器會(huì)產(chǎn)生不同的效果，你需要在不同的瀏覽器上不停的調(diào)試，兼容性很不好。而且如果想要在頁(yè)面上播放視頻 、音頻你必須借助第三方的插件才可以，但是HTML5的Canvas本身就可以借助javascript語(yǔ)言來(lái)到達(dá)動(dòng)畫(huà)的效果，不需要任何的第三方插件，本來(lái)以為可以很輕松的搞定它，但是Canvas并不像flash那樣好控制，因?yàn)樗渴怯谜Z(yǔ)言來(lái)控制的，不像flash有一個(gè)友好的界面，方便調(diào)試。雖然有些小的問(wèn)題存在，但是這并不影響HTML5的實(shí)用性，使用HTM

36、L5開(kāi)發(fā)游戲更加方便快捷。4.3 擴(kuò)展知識(shí)HTML5最吸引游戲開(kāi)發(fā)者的地方就是，它具有跨平臺(tái)性，無(wú)論是PC還是Andoid系統(tǒng)，亦或是蘋(píng)果系統(tǒng)，使用HTML5開(kāi)發(fā)的游戲都可以運(yùn)行在這些平臺(tái)上，大大減少了開(kāi)發(fā)者的工作量，只要在一款平臺(tái)上制作的游戲，其他平臺(tái)可以直接使用一樣的代碼，方便游戲的及時(shí)更新。用戶無(wú)論是在電腦上還是在移動(dòng)電子產(chǎn)品上都可以玩到一樣的游戲，甚至是可以聯(lián)網(wǎng)操作。跨平臺(tái)的兼容性有好處也有害處，當(dāng)你設(shè)計(jì)了一款游戲開(kāi)場(chǎng)只打算在電腦上玩時(shí)，為這款有添加了漂亮的界面，完整的音效，如果你想把它轉(zhuǎn)移到其他平臺(tái)時(shí)，雖然可以轉(zhuǎn)移，但你必須根據(jù)不同的平臺(tái)，做一些相應(yīng)的調(diào)整，并不是說(shuō)可能是代碼的問(wèn)題，

37、只是你應(yīng)該也要考慮硬件，是否支持，如果你直接轉(zhuǎn)移應(yīng)用，或許效果并不會(huì)很好?，F(xiàn)在的HTML5還在開(kāi)展當(dāng)中，所以說(shuō)不可以以偏概全，雖然跨平臺(tái)是它的一大亮點(diǎn)，但目前技術(shù)還不是很興旺，會(huì)產(chǎn)生一些碎片，比方界面動(dòng)畫(huà)不完整，觸摸事件無(wú)法響應(yīng)等問(wèn)題。因此，跨平臺(tái)的研究還需要不斷創(chuàng)新，不斷改革，爭(zhēng)取早日實(shí)現(xiàn)真正的跨平臺(tái)操作，減輕開(kāi)發(fā)人員的工作量，為游戲玩家提供更多更好的游戲，讓人們隨時(shí)隨地都可以盡情的玩自己喜歡的游戲。致 四年的大學(xué)生活即將完畢，在最后這半年最重要的事情就是畢業(yè)設(shè)計(jì)和畢業(yè)論文的撰寫(xiě)，在我進(jìn)展畢業(yè)設(shè)計(jì)，撰寫(xiě)論文其間，我的指導(dǎo)教師*教師給予了我很大的幫助，在我遇到不懂得問(wèn)題時(shí)教師耐心的教導(dǎo)，指點(diǎn)我

38、，及時(shí)糾正我再設(shè)計(jì)和論文上的缺乏之處。大二時(shí)期*教師就給我上過(guò)課，那時(shí)候就覺(jué)得教師在治學(xué)上很?chē)?yán)謹(jǐn)，耐心的指導(dǎo)我們，直到將我們的問(wèn)題教會(huì)，在我編寫(xiě)論文期間，教師有為我提供了很多資料，也很熱心的和我探討不明白的地方。從開(kāi)場(chǎng)到論文的完成，教師都是不辭辛苦的為我解答，占用了教師很多珍貴的時(shí)間，在此我向*教師表示萬(wàn)分的感。您所教會(huì)我的不僅是知識(shí)，還有您待人接物的道理，作為您的學(xué)生讓我受益一生。還要感那些與我并肩作戰(zhàn)的同學(xué)們，是你們和我一起討論資料，研究課題，并且指出我再設(shè)計(jì)或者其他方面的缺乏，我們共同成長(zhǎng)，共同進(jìn)步。以及以前帶過(guò)我的教師們，您們用專(zhuān)業(yè)的知識(shí)教育我，有的教師有時(shí)甚至都顧不上吃飯，也在為我們

39、答疑解惑，您們這種精神感染著我，為我走進(jìn)社會(huì)奠定了良好的根底，在此向我的同學(xué)們和辛勤工作的教師們報(bào)以衷心的感，感你們成就了今天的我。當(dāng)然還有那些熱心的網(wǎng)友，雖然我們素不相識(shí)，但你們卻給予了我真誠(chéng)的幫助，在論壇上積極為我解答問(wèn)題，積極的給我提供各種各樣的資料，在我的論文完成之際，也向你們表達(dá)我真誠(chéng)的感。我相信有了大家的幫助，我以后一定可以很快的融入社會(huì)，在自己的領(lǐng)域上不斷創(chuàng)新，再次感大家的幫助。參考文獻(xiàn)1 Peter Lubbers美，Brian Albers 美，F(xiàn)rank Salim美著，杰，柳靖，淼譯.HTML5高級(jí)程序設(shè)計(jì)M.，人民郵電，2021.2 ChristianHeilmann德著.牛海彬譯.深入淺出JavaScriptM.,人民郵電,2021.3Rob Hawkes英著，周廣新，曾少寧，盛海艷譯.HTML5 Canvas根底教程M.，人民郵電, 2021.1.4滿碩泉著.Cocos2D-*權(quán)威指南M.，機(jī)械工業(yè)，2021.4. z-The elimination game