畢業(yè)論文-基于html5的消除類游戲(編輯修改稿)
2025-07-22 14:56 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 TML5的不斷發(fā)展，將來(lái)會(huì)有更多的游戲是可以跨平臺(tái)的，更能滿足人們對(duì)不同游戲的渴望。 開發(fā)環(huán)境綜合開發(fā)工具，網(wǎng)上對(duì)于cocos2D的開發(fā)工具有很多種，我所選擇的開發(fā)工具是webstorm,這款工具使用方便，只需要將下載好的cocos2D引擎加載到工具中即可。WebStorm是一款基于javascript語(yǔ)言的開發(fā)工具，被稱為“最強(qiáng)的HTML5編輯神器”，它集成了多種模板方便人們開發(fā)，還具有拼寫檢查，重復(fù)代碼檢查，語(yǔ)言分析，智能補(bǔ)全代碼，它不僅可以支持不同的瀏覽器，還支持自定義函數(shù)，代碼格式化，聯(lián)想查詢，代碼調(diào)試，代碼結(jié)構(gòu)調(diào)試、重疊等功能。使用和安裝過(guò)程相當(dāng)方便?；窘缑嫒缦聢D： 界面所使用javascript框架是Jquery,Jquery是一款輕量級(jí)的語(yǔ)言框架，它不僅兼容CSS3，而且還兼容各種瀏覽器（如火狐，IE，opera），它有一個(gè)比其他框架更好的特點(diǎn)，那就是它的文檔說(shuō)明非常全，便于開發(fā)者自己學(xué)習(xí)，同時(shí)也提供了很多成熟的插件，還可以將程序代碼和html內(nèi)容分開來(lái)寫，不至于看起來(lái)很混亂。Jquery是一款免費(fèi)，開放的javascript框架，它的語(yǔ)法設(shè)計(jì)方便了人們的開發(fā)與學(xué)習(xí)，同時(shí)它還提供了API，開發(fā)者可以自己編寫自己想要的插件，主要的是它可以為游戲提供動(dòng)態(tài)特效。[2]在游戲調(diào)試過(guò)程中，采用的是火狐瀏覽器，因?yàn)檫@是一款主流瀏覽器，這樣也方便了開發(fā)者的調(diào)試，一般經(jīng)過(guò)調(diào)試后，再在其他瀏覽器上運(yùn)行時(shí)也不會(huì)有什么大的問(wèn)題。3 項(xiàng)目的設(shè)計(jì)與開發(fā) 游戲的玩法現(xiàn)在有很多的消除類游戲，而我們所實(shí)現(xiàn)的這類游戲應(yīng)該是玩法最簡(jiǎn)單的一種，這款消除類游戲是當(dāng)下比較流行的星星消除，是一款很容易讓人著迷的游戲，點(diǎn)擊開始后，通過(guò)快速點(diǎn)擊兩個(gè)或者兩個(gè)以上的靠在一起的方塊，實(shí)現(xiàn)快速消除，每消除一次方塊就會(huì)得到相應(yīng)的分?jǐn)?shù)，每一關(guān)都會(huì)有一個(gè)通過(guò)本關(guān)的目標(biāo)分?jǐn)?shù)，當(dāng)你的分?jǐn)?shù)大于或等于目標(biāo)分?jǐn)?shù)，并且沒有可以再在進(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ù)，那游戲就結(jié)束了。 需求分析游戲用戶包括開發(fā)者和游戲玩家。游戲玩家通過(guò)瀏覽器打開游戲，點(diǎn)擊開始按鈕，開始游戲。根據(jù)游戲提示的玩法開始游戲，并且隨時(shí)查看自己的得分情況。玩家用例分析如下圖： 用例分析 初步設(shè)計(jì)首先先設(shè)計(jì)游戲界面，界面是游戲給玩家的第一印象，對(duì)于本項(xiàng)目實(shí)例來(lái)說(shuō)大致可以分為游戲前臺(tái)和游戲后臺(tái)。前臺(tái)負(fù)責(zé)游戲的界面與接受玩家發(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ù)中。模塊功能圖如下： 功能設(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)生不同音效。開發(fā)游戲最重要的一項(xiàng)就是游戲引擎，在前臺(tái)進(jìn)行碰撞檢測(cè)，以及其他的物理引擎檢測(cè)，將數(shù)據(jù)或者事件的接口傳回后臺(tái)，后臺(tái)進(jìn)行處理后，將結(jié)果返回前臺(tái)，前臺(tái)根據(jù)處理結(jié)果，改變場(chǎng)景。 游戲開始流程前臺(tái)部分用戶使用瀏覽器打開游戲，既可以開始游戲，游戲開始流程如下圖： 流程圖后臺(tái)流程包括數(shù)據(jù)的接收與發(fā)送，以及與數(shù)據(jù)庫(kù)的交互行為，將前臺(tái)檢測(cè)到的行為進(jìn)行處理。簡(jiǎn)易流程圖如下： 后臺(tái)流程圖 部分程序界面與實(shí)現(xiàn)開始界面只需要接收按鈕的點(diǎn)擊事件，游戲首頁(yè)最主要的應(yīng)該是有好的用戶體驗(yàn)，有一個(gè)美觀大方的頁(yè)面，現(xiàn)在玩游戲的不僅是兒童，更多的是那些忙碌了一天的白領(lǐng)用來(lái)釋放壓力，放松身心的最有效的方法，所以界面要美觀大方。對(duì)于首頁(yè)，我們既可以使用CSS來(lái)美化頁(yè)面，也可以使用HTML5最新的標(biāo)簽Canvas來(lái)渲染界面，最終首頁(yè)部分代碼： = function () { ((, ))。 (, MainLayer)。}//開始界面的場(chǎng)景創(chuàng)建 = function (x, y, n) { var background = (Resources/bg/ + n + .png)。 ((1, ))。 ((x, y))。 (10)。 (background)。 }//初始化背景接下來(lái)進(jìn)入主場(chǎng)景界面，其中部分代碼如下： = function (col, row) { = 75。 var stars = 。 var randomStar = stars[getRandom()]。//隨機(jī)產(chǎn)生星星 var starSprite = (randomStar)。 ((, ))。//設(shè)置星星的位置 ((36 + colIndex * , 1300))。 = {n: randomStar, indexOfColumn: col, indexOfRow: row}。//布置星星群 (100)。 var flowTime = row / 10。 var fallAction = (flowTime, (36 + col * , 36 + row * ))。 (fallAction)。 return starSprite。}//在這一部分主要是先建設(shè)一個(gè)主要場(chǎng)景，添加隨機(jī)掉落的星星的位置。然后再在已有位置上繪制一個(gè)10*10的星星群，for (var i = 0。 i 。 i++) { var sprites = new Array()。 for (var j = 0。 j 。 j++) { var pSprite0 = (i, j)。 if (pSprite0 != null) { (pSprite0)。 } sprites[j] = pSp
畢業(yè)設(shè)計(jì)相關(guān)推薦
鄂ICP備17016276號(hào)-1