畢業(yè)論文-基于html5的消除類游戲-在線瀏覽
2024-08-05 14:56本頁面
【正文】 分為2D引擎和3D引擎，其中2D的引擎又有不同的種類比如cocos2d、Box2D、gamemark、untiy2d等，3D的游戲引擎包括Unity3D、away3D、wolfenstein3D engine、Panda3D等各種各樣的引擎可以寫出風(fēng)格各異的游戲，豐富了人們的精神世界。導(dǎo)演是整個引擎或者是整個游戲的總指揮，它控制著其他的控件，比如人物該有什么樣的動作，有什么樣的語言等等，總之其他的事物都要服從導(dǎo)演的指揮；場景和布景主要是負(fù)責(zé)游戲的背景以及各關(guān)卡之間的轉(zhuǎn)換作用，是人們對于一個游戲的第一印象；攝像機是將人物或場景的轉(zhuǎn)換記錄下來，連成一段合理的故事；人物和動作也是游戲的靈魂，這里的人物又叫做精靈，其實并不是單純的指人，也可以是方塊等其他的物體，就是給這些精靈附上了動作，才使游戲有了動態(tài)的效果。[4]Cocos2dhtml5還支持跨平臺操作，這也符合了HTML5的新的特性，不僅支持瀏覽器使用，還可以支持移動應(yīng)用，讓人們隨時隨地盡情玩耍，現(xiàn)在隨處可見拿著移動產(chǎn)品不斷玩游戲的人們，不過現(xiàn)在大部分游戲還是用android或Ios語言來寫的，我相信隨著HTML5的不斷發(fā)展，將來會有更多的游戲是可以跨平臺的，更能滿足人們對不同游戲的渴望。WebStorm是一款基于javascript語言的開發(fā)工具，被稱為“最強的HTML5編輯神器”，它集成了多種模板方便人們開發(fā)，還具有拼寫檢查，重復(fù)代碼檢查，語言分析，智能補全代碼，它不僅可以支持不同的瀏覽器，還支持自定義函數(shù)，代碼格式化，聯(lián)想查詢，代碼調(diào)試，代碼結(jié)構(gòu)調(diào)試、重疊等功能?；窘缑嫒缦聢D： 界面所使用javascript框架是Jquery,Jquery是一款輕量級的語言框架，它不僅兼容CSS3，而且還兼容各種瀏覽器（如火狐，IE，opera），它有一個比其他框架更好的特點，那就是它的文檔說明非常全，便于開發(fā)者自己學(xué)習(xí)，同時也提供了很多成熟的插件，還可以將程序代碼和html內(nèi)容分開來寫，不至于看起來很混亂。[2]在游戲調(diào)試過程中，采用的是火狐瀏覽器，因為這是一款主流瀏覽器，這樣也方便了開發(fā)者的調(diào)試，一般經(jīng)過調(diào)試后，再在其他瀏覽器上運行時也不會有什么大的問題。 需求分析游戲用戶包括開發(fā)者和游戲玩家。根據(jù)游戲提示的玩法開始游戲，并且隨時查看自己的得分情況。前臺負(fù)責(zé)游戲的界面與接受玩家發(fā)出的指令，前臺還負(fù)責(zé)游戲音效，游戲初始化以及將玩家的單擊雙擊觸發(fā)事件發(fā)送給后臺，并接受后臺所發(fā)送的分?jǐn)?shù)數(shù)據(jù)。模塊功能圖如下： 功能設(shè)計游戲界面設(shè)計是一個10*10的方塊矩陣，這個矩陣可以根據(jù)自己的喜好自定義更改矩陣的數(shù)量，當(dāng)游戲玩家消除方塊后，在游戲引擎的控制下，方塊會自動下落，更改自己的位置；前臺的界面還提供了音效控制按鈕，因為并不是每一個人都喜歡玩游戲的時候有音樂，可以根據(jù)個人喜好控制背景音效，不同的事件觸發(fā)會產(chǎn)生不同音效。 游戲開始流程前臺部分用戶使用瀏覽器打開游戲，既可以開始游戲，游戲開始流程如下圖： 流程圖后臺流程包括數(shù)據(jù)的接收與發(fā)送，以及與數(shù)據(jù)庫的交互行為，將前臺檢測到的行為進行處理。對于首頁，我們既可以使用CSS來美化頁面，也可以使用HTML5最新的標(biāo)簽Canvas來渲染界面，最終首頁部分代碼： = function () { ((, ))。}//開始界面的場景創(chuàng)建 = function (x, y, n) { var background = (Resources/bg/ + n + .png)。 ((x, y))。 (background)。 var stars = 。//隨機產(chǎn)生星星 var starSprite = (randomStar)。//設(shè)置星星的位置 ((36 + colIndex * , 1300))。//布置星星群 (100)。 var fallAction = (flowTime, (36 + col * , 36 + row * ))。 return starSprite。然后再在已有位置上繪制一個10*10的星星群，for (var i = 0。 i++) { var sprites = new Array()。 j 。 if (pSprite0 != null) { (pSprite0)。 }//添加星星群。游戲中的算法分析，每一顆星星添加單擊事件，在此部分需要判斷一下碰撞檢測，當(dāng)點擊任何一個星星時，第一次單擊是選中星星，并判斷一下，與它相鄰的周圍是否有與它相同的星星，如果有則全部選中，并進行第二次單擊消除星星，如果它的值小于1，那就表示是第一次單擊事件，就檢測一下是否有顏色相同的區(qū)域；如果它的值大于1，那就表示是第二次單擊事件，這時候就要判斷是否點擊的是同一個星星，如果是那就進行消除操作，()，當(dāng)消除星星時，還應(yīng)該添加上聲音，().playEffect(, false)。在這只舉一個例子，比如左面：var fourSideSpriteList = []。 var color = 。if (col 0) { var left = [col 1][row]。amp。 } }//判斷左邊的相鄰星星是否顏色一致。當(dāng)將上述語句判斷完成后，就是要進行消除工作了，不僅要讓星星消除，還應(yīng)該加上一些動畫效果，有助于用戶體驗，主要語句var simpleStar = [k]。var row = 。//邊界星星位置(simpleStar)。在游戲中人們最關(guān)注的莫過于分?jǐn)?shù)了，星星消除的記分規(guī)則如下，在主函數(shù)中創(chuàng)建一個Score變量，開始值為0，當(dāng)你只能消除2顆星星時獲得20分，消除3顆星星時獲得45分，消除4顆星星時獲得80分，以此類推，消除的星星數(shù)越多，得到的分?jǐn)?shù)就越多，當(dāng)最后沒有可以消除的星星時，剩余的星星會自動消除，如果剩余星星數(shù)小于10，則會有額外的加分，所得分?jǐn)?shù)是將這兩者相加，判斷最后是否超過目標(biāo)分?jǐn)?shù)，目標(biāo)分?jǐn)?shù)也會隨著關(guān)數(shù)的增加而增加，這樣也挑戰(zhàn)著人們的極限，促使人們不斷的刷新自己記錄。HTML5將網(wǎng)頁開發(fā)帶入了一個新的時代，摒棄了一些其他版本中
畢業(yè)設(shè)計相關(guān)推薦
鄂ICP備17016276號-1