畢業(yè)設計（論文）-基于android的avg類型游戲《歸途》的設計與實現(xiàn)

《畢業(yè)設計（論文）-基于android的avg類型游戲《歸途》的設計與實現(xiàn)》由會員分享，可在線閱讀，更多相關《畢業(yè)設計（論文）-基于android的avg類型游戲《歸途》的設計與實現(xiàn)（56頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、 太原理工大學畢業(yè)設計(論文)用紙 太　原　理　工　大　學 畢業(yè)設計（論文）任務書 第1頁 畢業(yè)設計（論文）題目： 基于android的avg類型游戲《歸途》的設計與實現(xiàn) 全套設計加扣 3012250582 畢業(yè)設計（論文）要求及原始數(shù)據(jù)（資料）： 1．綜述國內外手機游戲開發(fā)技術研究現(xiàn)狀； 2．深入了解android系統(tǒng)及其圖形界面開發(fā)的相關技術； 3．熟練掌握android相關api的應用，訓練編寫程序的能力； 4．設計并

2、實現(xiàn)一款avg類型的android平臺游戲； 5．深入分析游戲中界面開發(fā)的關鍵技術與編寫語言； 6．訓練實際內容向程序轉換的編程思維及能力； 7．訓練檢索文獻資料和利用文獻資料的能力； 8．訓練撰寫技術文檔與學位論文的能力。 第2頁 畢業(yè)設計（論文）主要內容： 1．綜述android相關技術在游戲開發(fā)中的應用； 2．了解android圖形化編程的相關技術； 3．熟練運用android開發(fā)涉及到的編程語言； 4．設計一組設計構思向游戲程序

3、轉化的模板流程； 5. 深入了解手機游戲的設計流程； 6．熟練掌握基于android平臺軟件的編寫； 7．設計與實現(xiàn)完整的一款android平臺avg類型游戲。 學生應交出的設計文件（論文）： 1．內容完整、層次清晰、敘述流暢、排版規(guī)范的畢業(yè)設計論文； 2．包括畢業(yè)設計論文、源程序等內容在內的畢業(yè)設計電子文檔及其它相關材料。 第3頁 主要參考文獻（資料）： [1] 董昆. 手機游戲的發(fā)展現(xiàn)狀及特點[J]. 數(shù)字技術與應用, 2011(0

4、1):120-120. [2] 陳林鋒, 張海翔, 陳純. 手機游戲的渲染引擎研究[J]. 計算機工程與設計, 2006(14):2606-2607. [3] 張鷹, 計時鳴, 張利等. 基于J2ME的手機游戲2D動畫的編程實現(xiàn)[J]. 計算機與數(shù)字工程, 2007, 35(2):134-137. [4] 楊帆. 基于J2ME的手機游戲設計[D]. 電子科技大學, 2006. [5] 李艷麗. Android事件處理過程剖析[J]. 長春理工大學學報:自然科學版, 2010, 33(3):159-162. [6] 宋國柱. Android圖形圖像處理技術研究[J]. 電腦知識與技術

5、, 2014(8):1800-1801. [7] 趙亮, 張維. 基于Android技術的界面設計與研究[J]. 電腦知識與技術, 2009(29). [8] Acosta K, Despain W. 100 Principles of Game Design[M]. NEW RIDERS PUBL, 2012. [9] Phillips B, Hardy B. Android Programming: The Big Nerd Ranch Guide[J]. Pearson Schweiz Ag, 2013. [10] Freeman E, Freeman E, Bates B, e

6、t al. Head First Design Patterns[J]. Oreilly Media, 2004. 專業(yè)班級 軟件1229班 學生 要求設計（論文）工作起止日期 2016年3月21日~2016年6月10日 指導教師簽字 日期 2016年3月21日 教研室主任審查簽字 日期 系主任批準簽字 日期 基于android的avg類型游戲《歸途》的設計與實現(xiàn) 摘 要 由于目前移動平臺的普及和游戲行業(yè)的逐步完善，越來越多的開發(fā)者開始在手機平臺上進行游戲開發(fā)，并且因為工具的完善和傳播的便捷性，手機平臺也越來越受獨立游戲開發(fā)者的關

7、注，但獨立游戲開發(fā)作為游戲開發(fā)最早卻最落后的形式讓很多開發(fā)者陷入了永遠無法完成作品的窘境，而軟件工程正是解決此類問題的良藥，這次畢業(yè)設計就是由此而生的。 獨立游戲開發(fā)的難點與一般軟件開發(fā)并不完全相同，所以本次畢業(yè)設計從實戰(zhàn)出發(fā)，結合學到的知識進行一次基于標題的游戲開發(fā)，模仿獨立游戲一般開始于某個突發(fā)奇想或想表達的某種觀點的現(xiàn)實情況，由標題開始進行設計，并根據(jù)設計先進行技術積累，根據(jù)技術的掌握情況評估修正已有設計，再進行開發(fā)并測試，在一般軟件開發(fā)流程上進行了對獨立游戲開發(fā)的優(yōu)化。 本次畢設就是以上述開發(fā)流程思想為基礎，設計并完成一個完整可玩的游戲，并且在保證游戲本身的一些基本質量要求的前提下

8、盡可能的表達了主題的內容。 關鍵字：游戲開發(fā)；安卓；cocos2dx-js The Design And Implementation of “Homeward Journey” based on Android Abstract Gradually improve due to the current popularity of mobile platforms and gaming industry, more and more developers to begin game development on mobile platfo

9、rms, and because of the complete and convenient, the mobile platform tools are increasingly spread by the independent game developer those concerns, but independent game development as a development of the first game, but the most backward form of so many developers caught in a dilemma never complet

10、ed the work, and software engineering is to solve such problems of medicine, this graduation is thus raw. Independent game developers and the general difficulty of software development are not the same, so this graduate from the actual design, combined with the knowledge acquired to develop a game

11、based on the title, imitating independent game typically begins a whim, or would like to express a certain point of view the reality, from the title to begin design and prior accumulation of technology is designed according to the technical assessment of amendments to grasp the situation existing de

12、sign, then developed and tested in the software development process is generally carried out independent game optimization of development. The complete set is to the above-mentioned development process based on the idea to design and complete a full playable game, and in ensuring the quality of the

13、 game itself, some of the basic requirements of the premise as expressed content topics. Key words: Game development; android; cocos2d-js 目 錄 1 緒論 1 1.1 課題的來源及意義 1 1.2 與課題相關的行業(yè)發(fā)展現(xiàn)狀 2 1.2.1 html5游戲 2 1.2.2 獨立游戲 2 1.3 主要工作內容 3 2 項目需求及關鍵技術分析 4 2.1 項目需求 4 2.2 cocos2d-js中的jav

14、ascript語言 4 2.3 cocos2d-js引擎 8 2.3.1 坐標系統(tǒng)及對象管理 8 2.3.2 動作系統(tǒng) 10 2.3.3 聲音系統(tǒng) 11 2.3.4 鼠標與觸摸事件 11 2.3.5 粒子系統(tǒng) 11 3 系統(tǒng)設計 14 3.1 場景列表 14 3.2 鴿子的設計 15 3.3 食物的設計 15 3.4 障礙物的設計 16 3.5 加速及收集圓環(huán)的設計 16 3.6 代碼架構 16 4 系統(tǒng)實現(xiàn) 18 4.1 素材準備 18 4.2 開始界面的實現(xiàn) 18 4.2.1 UI 18 4.2.2 動態(tài)效果 20 4.3 關于界面的實現(xiàn) 21

15、 4.3.1 UI 21 4.3.2 返回按鈕 22 4.4 游戲主界面的實現(xiàn) 23 4.4.1 UI 23 4.4.2 背景及結束畫面 25 4.5 游戲數(shù)據(jù)記錄及聲音統(tǒng)一管理 28 4.5.1 數(shù)據(jù)記錄 28 4.5.2 聲音管理 28 4.6 鴿子相關邏輯的實現(xiàn) 31 4.6.1 階段 31 4.6.2 操作 34 4.7 食物及光環(huán)相關邏輯的實現(xiàn) 35 4.7.1 四種食物分布類型的實現(xiàn)及光環(huán)作用的實現(xiàn) 35 4.7.2 碰撞檢測 37 4.8 障礙物的實現(xiàn) 38 4.9 特效 42 4.9.1 全屏抖動 42 4.9.2 粒子特效 43 5 游戲

16、發(fā)布及測試 44 5.1 測試及修正 44 5.1.1 測試記錄 44 5.1.2 解決問題 45 5.2 發(fā)布 45 5.2.1 屏幕適配 45 參考文獻 46 致 謝 47 外文文獻 48 中文翻譯 54 1 緒論 1.1 課題的來源及意義 電子游戲作為一個誕生于1952年的新興娛樂形式，經過半個多世紀的發(fā)展已經成為了年輕人的主要娛樂方式之一。并且隨著智能手機的普及，移動平臺的游戲更是將其影響力擴展到了各個年齡段的人群，從長到幼，填充著現(xiàn)代社會越來越碎片化的時間，從PC端到移動端，滿足著人們形形色色的想象和需求。 而正是因為其無所不包和無所不在的特性

17、，電子游戲從誕生以來就伴隨著無數(shù)的爭議，既創(chuàng)造著巨大的價值，同時也造成了很多不良的影響，因為其強大的影響力足以影響人的價值觀，其強大的沉浸感足以影響人的正常作息。但電子游戲作為一種載體本身是沒有任何傾向性的，作為一種仍在發(fā)展中的媒介仍有很大的發(fā)展空間。近年來如《Shadow Of the Colossus》（旺達與巨像），《journey》（風之旅人）幾乎已經踏入了藝術的殿堂，以電子游戲獨特的交互屬性給人帶來比單純的畫面音樂甚至電影更強的情感體驗與思考。但作為人類想象力的一種具現(xiàn)化，游戲開發(fā)的復雜度也是與日俱增，專業(yè)制作公司幾百人的團隊數(shù)年的開發(fā)時間仍舊會制作出并不完善的作品，而獨立游戲開發(fā)就

18、更像是一場永不完結的馬拉松，最近的獨立游戲話題作品《Stardew Valley》（星露谷物語）就是作者Concerned Ape單人持續(xù)開發(fā)四年的成果。顯而易見，獨立游戲開發(fā)是一種需要投入大量精力而在完成前沒有任何收入且在完成后收益未知的，極大的冒險行為[1]。 而軟件工程正是削減冒險性和不確定性的科學手段，所以，本次課程設計將根據(jù)個人開發(fā)的獨特性綜合已有軟件工程方法和自我管理知識，在限期開發(fā)一個完整游戲作品的過程中嘗試搭建一套從快速學習再到進度保證的高效工作流。 再到作品本身，Avg類型游戲是Adventure Game的縮寫，冒險游戲，作為幾乎在電子游戲誕生時就存在的游戲類型，因其扮

19、演和冒險這兩大特性它經久不衰的持續(xù)到現(xiàn)在仍舊是一種重要的游戲類型，本次作品選擇這種游戲類型是因為它的包容性，可以實踐游戲開發(fā)方方面面的技術盡快熟悉游戲開發(fā)流和所使用的游戲引擎的各種特性。 1.2 與課題相關的行業(yè)發(fā)展現(xiàn)狀 1.2.1 html5游戲 隨著html5技術規(guī)范的逐步推廣，現(xiàn)在大部分主流瀏覽器已經開始支持html5技術標準，同時作為前一段時間業(yè)界認為將顛覆native app存在的web app的主要技術來源，雖然現(xiàn)在native app仍舊占據(jù)著主要市場地位，但是混合開發(fā)技術已經越來越受到重視，web下開發(fā)的跨平臺特性也是其不斷流行的關鍵之一。雖然各路瀏覽器難以統(tǒng)一一直是

20、web開發(fā)的一大難題，但在html5標準下瀏覽器的標準化已經可以期待，同時很多廠家也在努力的構建html5應用開發(fā)的生態(tài)圈，如cocos2dx引擎的html5分支，白鷺時代的egret引擎等等[1]。 目前html5游戲的典型成功案例就是由上面提到的egret引擎開發(fā)的《圍住神經貓》，由一名程序一名美術耗時一天半完成，但上線3天訪問量便過億，雖然熱度減退也十分迅速，但是從這個案例可以看出html5游戲目前幾個特點，那就是成本低，易推廣。而至于留存時間當然是看游戲本身的耐玩程度，但在大廠廣告和ip封鎖下，html5游戲的道路顯然是獨立游戲開發(fā)者一條比較適合的選擇，尤其是目前很多廠商仍舊在用原生

21、應用的那一套做html5應用的情況下。 雖然是一種趨勢，但是目前為止html5游戲的現(xiàn)狀其實并沒有想象中那么美好，目前html5游戲的典型代表《古龍群俠傳》和《愚公移山》的用戶量和收入相對于原生應用手游還是相去甚遠，商業(yè)化的html5之路并不好走，甚至更加依賴渠道。但是對于獨立游戲開發(fā)卻不同，意在表達自我的獨立游戲相對于商業(yè)化的游戲更適合以html5作為載體，和急著變現(xiàn)的html5商業(yè)游戲不同，html5獨立游戲更像是一種微博或者博客的升級版，簡單的學習成本和低廉的發(fā)布成本將會成為創(chuàng)意與思想表達的優(yōu)秀載體。 1.2.2 獨立游戲 獨立游戲制作，即不以商業(yè)發(fā)行為目的，獨立制作完成的游戲。雖

22、然由于媒體的渲染，獨立游戲中的幾個獲得了巨大利益的例子似乎成為了獨立游戲的代表，但是本質上來講，獨立游戲更多的還是一種對于自身見解或情感的基于游戲這種表達形式的非商業(yè)化創(chuàng)作。在一些游戲制作者眼中游戲承擔著部分媒體的屬性，如著名的游戲制作人陳星漢就直接把游戲稱為一種新媒體，同時貫穿陳星漢游戲設計的一個理念則是情感的表達，這和html5易于傳播的特性一拍即合，隨著制作工具的不斷完善，制作成本和流程的不斷完善，作為一種表達媒介擁有廣闊的前景。 1.3 主要工作內容 基于html5技術開發(fā)獨立游戲是本次課題的主要工作內容，同時也將探索混合開發(fā)的方式，即利用cocos2d-js的跨平臺特性完成web

23、端的內容和向安卓原生的移植。所以主要工作內容如下，學習cocos2d-js的基本工作流，設計并實現(xiàn)一個html5游戲，完成對游戲向原生安卓平臺的移植，最后的成果為一個安卓原生的完整游戲。 2 項目需求及關鍵技術分析 2.1 項目需求 獨立游戲開發(fā)與大型軟件項目和大型游戲項目均不相同，因為不是功能性的程序，所以需求部分可以完全由自己完成，及不斷的探尋自己想要表達的內容與自己開發(fā)技能所能達到的一個重合點，同時快速的學習新的技術用來實現(xiàn)自己的想法。 本項目中準備開發(fā)一個表現(xiàn)鴿子回家過程的游戲，玩家控制一個飛鴿躲避障礙物并收集食物

24、，最終到達終點。 具體需求如下： ·開始界面，提供聲音控制按鈕，開始游戲按鈕及關于即游戲介紹界面跳轉按鈕。 ·游戲過程界面，提供聲音控制按鈕及暫停按鈕，顯示鴿子，滾動的視差背景，隨機生成的食物，生命值，分數(shù)及距離，同時提供游戲結束的提示彈出框及返回按鈕。 ·關于界面，游戲的內容介紹及返回開始界面的按鈕。 ·勝利界面，勝利的動畫及最終分數(shù)顯示。 ·食物相關，提供多種分布方式隨機選擇生成在游戲過程界面中。 ·障礙物相關，提供多種障礙物隨機類型隨機位置出現(xiàn)，同時實現(xiàn)提前提醒出現(xiàn)位置的功能。 ·兩種正面效果道具，一種提供加速功能，可以無視障礙物，一種提供吸收周圍食物的功能。 2.2

25、 cocos2d-js中的javascript語言 cocos2d-js使用的語言為javascript語言，掌握javascript的基本概念也是十分重要的一部分，下面來簡單介紹一下cocos2d-js中javascript語言的應用。 首先javascript是一種基于原型的語言，最新的標準為ES6，javascript的應用十分普遍，作為一種腳本語言廣泛應用在web領域，而cocos2d-js由于作為游戲引擎，需要用到面向對象的一些特性來組織代碼結構，所以采用了jquery之父john resig的繼承方案，封裝了new，extend等方法來實現(xiàn)類與繼承。示例代碼如下: var o

26、bject = function(){}; var obj1 = new object(); obj1.name = “obj1”; var obj2 = new object(); obj2.name = “obj2”; Console.log(obj1.name,obj2.name); 上述代碼在瀏覽器控制臺會輸出obj1、obj2，這個例子利用了function的Prototype來實現(xiàn)了不同的對象。 并定義了Class作為基類。代碼清單如下： cc.Class = function(){}; cc.Class.extend = function(props){ va

27、r _super = this.prototype; ... //是本類可繼承 Class.extend = cc.Class.extend; //增加實現(xiàn)方法 Class.implement = function(prop){ For(var name in prop){ prototype[name] =prop[name]; } }; ... 如上，cocos2d-js引擎中的CCClass.js中封裝了extend和implements方法，實現(xiàn)了面向對象的功能，可以讓開發(fā)者方面的在js中應用面向對象的特性。使用時的示例如下: var TestScene=

28、cc.Scene.extend{( ctor: function (color){ this._super(); var layer = new cc.Layer(color); this.addChild(layer); } )}; var scene = new TestScene(cc.color(0,0,0)); 上面代碼中的ctor為構造函數(shù)，與c++的構造函數(shù)類似，上面的TestScene類新建時傳入一個顏色參數(shù)即可創(chuàng)建出一個單色背景的scene。 最后需要深入理解一下js中的this關鍵字，在面向對象的風格中this常見但js的this與java和c++中的th

29、is有一些不同之處。 this在函數(shù)中隨著使用場合的不同而代表著不同的值，即指向調用這個函數(shù)的對象。 首先是全局函數(shù)下的this所指向的對象，如下列代碼所示： var x = 0; function test(){ console.log(this.x); } test(); var x = 0; function test(){ this.x = 1; } test(); console.log(this.x); 上述代碼中第一次輸出的值為0，第二次輸出的值為1，證明了在全局函數(shù)中this指向的對象為全局對象。 然后是作為對象的方法,示例代碼如下: funct

30、ion test(){ console.log(this.x); } var x = 0; var arr = {}; arr.x = 1; arr.m = test; arr.m(); 上述代碼最后的輸出結果為1，證明此時this指向的是對象。 然后是在是用new關鍵字時，示例代碼如下: function test(){ console.log(this.x); } var obj = new test(); console.log(obj.x); 上述代碼輸出值為1，證明其中this指向的是新創(chuàng)建的對象。 最后一種情況是在apply/call調用時，示例

31、代碼如下: function test(){ console.log(this.x); } var obj = {}; obj1.x = 1; obj1.m = test; var obj2 = {}; obj2.x = 2; obj1.m.apply(obj2); obj1.m.call(obj2); 上述代碼兩次輸出值均為2，證明了this指向的是apply/call中的第一個參數(shù)。 所以綜上所述，在cocos2d-js中使用this時要注意全局函數(shù)下的情況，帶特定情況下需要使用bind()函數(shù)來手動綁定對象。 bind可以手動來改變function的上下文環(huán)

32、境，所以說雖然javascript是一門比較混亂的語言但是同時也是一門非常靈活和實用的語言。 2.3 cocos2d-js引擎 2.3.1 坐標系統(tǒng)及對象管理 cocos2d-js是一個典型的2d游戲引擎，坐標系為以左下角為(0,0)點x從左往右遞增，y從下往上遞增。那么要理解cocos2x-js中對象的管理機制首先要從兩個概念說起，首先是節(jié)點，在cocos2d-js中被封裝為Node類。 部分代碼如下 cc.Node = cc.Class.extend(/** @lends cc.Node# */{ _localZOrder: 0,

33、 _globalZOrder: 0, _vertexZ: 0.0, _rotationX: 0, _rotationY: 0.0, _scaleX: 1.0, _scaleY: 1.0, _position: null, _normalizedPosition:null, _usingNormalizedPosition: false, _normalized

34、PositionDirty: false, _skewX: 0.0, _skewY: 0.0, _children: null, ...... 可以從名字看出一些基本功能，如縮放，坐標，透明度等等，其中對于對象管理很重要的屬性就是_children,在cocos2d-js中對象是通過樹結構進行管理的，這樣帶來的特性就是整體性，可是實現(xiàn)對父節(jié)點添加效果時影響全部子節(jié)點，如透明度坐標等，理解了這個結構，那么在坐標系下錨點等概念就十分容易理解了。 首先cocos2d-js通過封裝的導演類Director來控制Scene場景載入與變換，再通過節(jié)點來管理與顯示每個場景

35、中的各個物體。 其中為了便于管理與組織顯示的物體，cocos2d-js的js庫中封裝了兩個類，一個為Layer一個為Sprite，Layer繼承了節(jié)點并增加了一些功能如背景顏色等等，作為一個輔助的類可以將同一場景中的各個節(jié)點分層管理，如簡單的分為背景層，人物層，敵人層等等。而精靈類cc.Sprite則是游戲中經常出現(xiàn)的一個類，繼與Node，一般用于表示游戲內的人物或者npc，但是由于封裝了很多常用功能如加載圖片播放動畫等等，時常也用作一些加載動態(tài)的背景內容等等。 有了上述概念后通過一段示例代碼來具體展現(xiàn)上面概念在實際中的應用，示例代碼如下: var bg = new LayerColor

36、(cc.color(255,0,0),200,200); bg.x = 100; bg.y = 100; this.addChild(bg,1); var ball1 = new cc.Sprite(“#ball”); ball1.x = 100; ball2.y = 300; this.addChild(ball1,2); var ball2 = new cc.Sprite(“#ball”); ball2.x = 100; ball2.y = 100; bg.addChild(ball2,1); 上面三個對象的錨點分別為bg左下角，ball1，ball2中

37、心點，全局坐標分別為(100,100),(100,300),(200,200),可以看出，ball2成為bg的子節(jié)點后坐標也是相對于bg產生的，即嵌套的子節(jié)點都已父節(jié)點左下角作為原點坐標設置自己的位置。 最后談談導演類，導演類Director負責切換場景和提供一些信息，如窗口尺寸，全局定時器，暫停和恢復等等。 2.3.2 動作系統(tǒng) 這部分來簡單分析一下cocos2d-js中的動作系統(tǒng)，要了解游戲的動作系統(tǒng)先要了解一下幀這個概念，計算機播放的所謂動畫其實是由屏幕不斷重新繪制顯示內容產生的，而幀就是動畫或影像最基本的單位，每一幀就是一個畫面，而連續(xù)的幀畫面播放就形成了動畫或者影像。而常見的f

38、ps(Frames Per Second)一般就是指一秒內幀的數(shù)量。那么在這個基礎上，實現(xiàn)動作就是借助Node節(jié)點的scheduleUpdate借口和update接口，這兩個函數(shù)的功能為通知當前節(jié)點在每次重繪之前調用update函數(shù)，那么結合上面節(jié)點的屬性，每幀改變位置及角度大小顯然就可以完成任何動畫的繪制。當然這是基本的方法也是底層的實現(xiàn)，cocos2d-js引擎也提供了一些封裝好的動作方法供開發(fā)者使用，這里來終點了解一下封裝好的各個動作的用法。 cocos2d-js的節(jié)點Node中提供了一個接口runAction用于執(zhí)行已經封裝好的動作類，使用方法也非常簡單，新建一個封裝好的action

39、類，作為參數(shù)傳入action方法即可。下面就來介紹一下常用的基本動作及執(zhí)行方式。 首先最基本的當然就是位移，游戲引擎提供了兩個action類實現(xiàn)這一動作，分別是moveTo和moveBy，moveTo為移動到某個位置，moveBy為以當前為(0,0)移動相應距離，兩個都需要至少傳入兩個參數(shù)，移動的時間和一個cc.p對象，cc.p是封裝好的point對象。 然后就是放大與縮小，scaleTo與scaleBy方法，和前面的移動一樣，第一個為絕對的即以原始圖片大小按比例縮放，而scaleBy則根據(jù)已經縮放的比例繼續(xù)縮放，雖然是縮放，但是也可以作為翻轉來使用，當傳入值為負值時會實現(xiàn)為反轉。 再介

40、紹一下淡入淡出效果，fadeTo，fadeIn，fadeOut，fadeTo接受兩個參數(shù)，第一個和前面的動作一樣為時間，第二個為目標透明值，從0到255,0為不可見，255位完全不透明，而fadeIn與fadeOut則只需傳入是時間值，顧名思義，一個為淡入，一個為淡出。 最后介紹兩個也很常用的動作，閃爍及變色，閃爍為blink，傳入兩個參數(shù)，第一個為總時間，第二個為閃爍次數(shù)，色調變化為tintTo，傳入4個參數(shù)，第一個為時間，后三個為RGB值。當然還有很多動作，可以繼續(xù)觀看api或者直接查看CCActionInterval.js觀看源碼進行學習。 2.3.3 聲音系統(tǒng) cocos2d-j

41、s的聲音系統(tǒng)是非常方便的，整個聲音引擎封裝在cc.audioEngine中，調用相應的方法即可，背景音樂的播放使用playMusic并傳入音樂的url即可，停止使用stopMusic方法，不需要任何參數(shù)。音效則使用playEffect即可，和播放背景音樂一樣傳入url，播放背景音樂和音效的第二個參數(shù)為一個布爾變量，表示是否重復播放音效。音量的控制也非常簡單，直接使用setEffectsVolume()傳入數(shù)值即可，范圍為0到1,0為靜音。 2.3.4 鼠標與觸摸事件 鼠標與觸摸事件在cocos2d-js引擎中的處理基本相同，不同的是觸摸時間分為單點和多點，這里因為開發(fā)手機游戲，直接介紹觸摸

42、事件。 觸摸的處理cocos2d-js中一樣使用的是監(jiān)聽事件模型，監(jiān)聽單點觸摸事件通過cc.eventManager.addListener添加信息，示例代碼如下: cc.eventManager.addListener({ event : cc.EventListener.TOUCH_ONE_BY_ONE, // 單點觸摸事件 onTouchBegan: function(touch,event){}, onTouchMoved: function(touch,event){}, onTouchEnded: function(touch,event){}, onTo

43、uchCancelled: function(touch,event){}, },node); 其中event : cc.EventListener.TOUCH_ONE_BY_ONE聲明了事件的類型，后面的函數(shù)根據(jù)需求進行實現(xiàn)即可。 多點觸摸的處理類似，其中touch參數(shù)變?yōu)閠ouches，傳入一個觸摸點數(shù)組，可以利用循環(huán)來分別處理。 2.3.5 粒子系統(tǒng) 粒子系統(tǒng)是計算機圖形學中用于模擬特定模糊現(xiàn)象的系統(tǒng)，如火焰，煙霧，煙花，雨雪等等。粒子系統(tǒng)通過設定生成由色塊或圖片表示的粒子的生成速度和生成周期，位置，速度，生命周期等等來模擬實際的物理規(guī)律[2]。 cocos2d-js中粒子系

44、統(tǒng)封裝為ParticleSystem，但因為粒子系統(tǒng)涉及的屬性過多，所以引擎提供了一些通用的效果，如煙花，火焰，太陽，雪，流星等等，通過替換其中的紋理即可完成大部分通用的建議效果。 例如煙花的示例代碼如下: var ParticleDemoLayer = cc.Layer.extand({ ctor:function(){ this._super(); var particleSystem = new cc.ParticleFireworks(); particleSystem.texture = cc.textureCache.addImage(“#fireworkDemo”

45、); this.addChild(particleSysyem); var winSize = cc.director.getWinSize(); particleSystem.x = winSize.width / 2; particleSystem.y = winSize.height / 2; } }) 如上ParticleFireworks類即為封裝好的煙花類型。 當然，想要實現(xiàn)自己需要的粒子效果還是要經過自己的調試，粒子效果的可視化工具也很多，如ParticleEditor和ParticleBuilder，通過可視化界面輸入?yún)?shù)調整需要的效果，導出plist參數(shù)文

46、件與png紋理文件即可在cocos2d-js引擎中加載使用，示例代碼如下: var ParticleDemoLayer = cc.Layer.extend({ ctor:function(){ this._super(); var particleSystem = new cc.ParticleSystem(“res/test.plist”); this.addChild(particleSystem); particleSystem.duration = 5; var winSize = cc.director.getWinSize(); particleSystem.x =

47、 size.width / 2; particleSystem.y = size.height / 2; } }) 其中duration表示播放次數(shù)，本示例代碼將會把粒子效果在屏幕正中間播放5次。停止方法也非常直觀，對于無限循環(huán)的粒子系統(tǒng)使用stopSystem方法，對于播放次數(shù)有限則使用setAutoRemoveOnFinish方法，設置自動銷毀。因為粒子系統(tǒng)將產生大量的節(jié)點占用資源，所以使用粒子系統(tǒng)時注意及時停止時十分必要的優(yōu)化工作。 3 系統(tǒng)設計 3.1 場景列表 首先是開始界面，眾所周知

48、第一印象十分重要，能否在一開始就抓住玩家的興趣對于一個游戲而言意味著它后續(xù)的內容是否有機會向玩家展示，同時作為初始頁面也要提供相應的基礎功能，所以在本游戲的設計中開始界面添加一段鴿子入場的簡單動畫，同時搭配漂亮的背景圖及歡快的背景音樂營造氛圍，同時提供開始按鍵與關于按鍵，實現(xiàn)最基本的開始游戲功能和介紹游戲的界面的跳轉。同時雖然音樂能夠更好的代入氛圍，但是有些特殊環(huán)境下音樂開關也是必要的，所以在本界面的左上角也添加一個音樂開關按鈕并添加動態(tài)效果使整個開始界面呈現(xiàn)方式為動態(tài)且立體的。 游戲過程界面，游戲過程界面是游戲的主要部分，大部分的邏輯處理都在這個場景中，首先將場景中的對象分為ui層和背景層

49、，背景來實現(xiàn)一個視差場景滾動，ui部分顯示得分生命值及飛行距離，同時還要控制顯示鴿子，食物，障礙物以及正面效果道具。 關于界面，比較簡單，字體足夠大描述清楚游戲的由來和玩法即可，然后提供一個返回主界面的按鈕。 勝利界面，顯示一張今天背景及最終得分還有一個返回按鈕。 圖3.1 場景切換狀態(tài)圖 3.2 鴿子的設計 鴿子的設計參考游戲設計中常用的狀態(tài)機，設計簡單的四種狀態(tài)來處理鴿子飛行，及正常狀態(tài)，加速狀態(tài)，被撞擊狀態(tài)及失敗狀態(tài)。 正常狀態(tài)：即鴿子處于正常飛行的狀態(tài)，沒有遇到障礙物也沒有得到加速的增益效果，此時鴿子會按照正常飛行的參數(shù)執(zhí)行幀動畫，同時跟隨操作在屏幕上下垂直移動，在遇到障礙

50、物時進入被撞擊狀態(tài)，與加速增益圓圈接觸進入加速狀態(tài)。 加速狀態(tài)：從正常狀態(tài)進入加速狀態(tài)后，動畫的播放頻率加快，背景滾動速度加快，在畫面中增加風的特效，同時鴿子在與障礙物接觸時將破壞障礙物，在固定時間后重新返回正常狀態(tài)。 被撞擊狀態(tài)：從正常狀態(tài)與障礙物接觸后進入此狀態(tài)，此時鴿子執(zhí)行一段翻轉的動畫同時向屏幕中央移動，速度降低到最低速度，生命值減一，如果生命值為0則進入失敗狀態(tài)。 失敗狀態(tài)：被撞擊后生命值為0執(zhí)行一段鴿子下落的動畫，同時執(zhí)行游戲失敗相關的邏輯。 圖3.2 鴿子狀態(tài)圖 3.3 食物的設計 食物使用五種圖標來表示，都是谷物，隨機產生，在畫面中的排列則根據(jù)一定的規(guī)律生成，參考一

51、般游戲中的生成方式，本游戲中編寫四種食物的排列方式，水平排列，垂直排列，斜線排列，隨機分布。 圖3.3 食物分布的四種排布方式 通過這樣的設計可以引導玩家進行更多的操作增加可玩性和難度。 3.4 障礙物的設計 障礙物用四種圖標表示，飛機，飛碟等等，同時障礙物出現(xiàn)之前添加一個提醒的幀動畫在屏幕右側。 障礙物也提供在被加速狀態(tài)的鴿子接觸時被摧毀的動畫。 圖3.4 障礙物出現(xiàn)的提醒及被摧毀的動畫 3.5 加速及收集圓環(huán)的設計 在場景的隨機位置出現(xiàn)，一個藍色圓環(huán)一個綠色圓環(huán)，效果分別為讓鴿子進入加速狀態(tài)和吸引周圍的

52、食物。 加速后鴿子會進入無敵狀態(tài)。 而吸引狀態(tài)下周圍的食物都會在相同的時間內向鴿子移動。 兩者添加不同的粒子效果，同時加速狀態(tài)添加背景的風痕粒子效果。 3.6 代碼架構 首先將代碼進行組織，根據(jù)需求設計，首先建立elements文件夾并創(chuàng)建以下四個js類： GameBackground：游戲背景類，繼承自Layer，用于顯示游戲的背景。 Dove：鴿子類，繼承自Sprite，實現(xiàn)飛行動畫的播放及封裝一些屬性如鴿子當前狀態(tài)等等。 Food：食物類，繼承自Sprite，用于顯示食物圖片，并封裝食物的類型等屬性。 Obstacle：障礙物類，繼承自Sprite，用于顯示障礙物圖片并

53、封裝障礙物的類型，間隔距離，是否被碰撞等屬性。 然后建立scene文件夾管理上面設計的四個場景： MenuScene：開始場景。 AboutScene：關于場景。 GameScene：游戲場景。 VictoryScene：勝利場景。 ui目錄建立UI類： GameOverUI：實現(xiàn)游戲結束時在游戲場景中彈出的游戲失敗對話框。 GameSceneUI：實現(xiàn)游戲過程中的暫停按鈕，聲音播放按鈕及生命值距離及得分的顯示。 SoundButton：因為需要實現(xiàn)一個動態(tài)效果，且在開始場景和游戲場景中均存在，單獨封裝為一個類。 建立logic文件夾存放抽離出來的邏輯： FoodMana

54、ger：食物管理類，管理食物的生成邏輯。 ObstacleManager：障礙物管理類，管理障礙物的生成邏輯。 然后還有一些配置及數(shù)據(jù)文件 Game.js：存儲歸途游戲的全局數(shù)據(jù)。 Sound.js：封裝一個聲音播放的類。 CameConstants：全局常量數(shù)據(jù)的存儲。 共16個類。 4 系統(tǒng)實現(xiàn) 4.1 素材準備 作為一個軟件工程在獨立游戲開發(fā)上的實踐，主要關注點在程序，素材大部分來源于互聯(lián)網(wǎng)，但是作為基本的優(yōu)化，這里要簡單的提一下打包圖片的方式。 使用TexturePacker軟件可以將碎圖打包為一張大的SpriteSheet，減少初始化所用的時間提高運行效率。

55、調用方法如下： cc.spriteFrameCache.addSpriteFrames("res/graphics/texture.plist"); 上面的代碼即將打包好的整張圖片添加入緩存中，在使用時加#即可調用。 如新建一個Sprite對象時直接傳參”#+圖片名”即可。 4.2 開始界面的實現(xiàn) 4.2.1 UI 開始界面中的UI主要為聲音控制按鈕和兩個場景跳轉按鈕開始游戲與關于按鈕，菜單按鈕使用cocos2d-js中封裝好的類MenuItemImage來實現(xiàn)，菜單核心實現(xiàn)代碼如下： var MenuScene = cc.Scene.extend({ _dove:

56、null, // 鴿子對象 _playBtn:null, // 啟動按鈕 _aboutBtn:null, // 關于按鈕 ctor:function () { this._super(); var layer = new cc.Layer(); this.addChild(layer); var winSize = cc.director.getWinSize();

57、 var bgWelcome = new cc.Sprite("res/graphics/bgWelcome.jpg"); // 依次添加對象 bgWelcome.x = winSize.width/2; bgWelcome.y = winSize.height/2; layer.addChild(bgWelcome); var title = new cc.Sprite("#welcome_title.png"); title.x = 1300; title.y = 600;

58、 layer.addChild(title); this._dove = new cc.Sprite("#welcome_dove.png"); this._dove.x = -this._dove.width/2; this._dove.y = 400; layer.addChild(this._dove); this._playBtn = new cc.MenuItemImage("#welcome_playButton.png", "#welcome_playButton.png"

59、, this._play); this._playBtn.x = 1500; this._playBtn.y = 350; this._aboutBtn = new cc.MenuItemImage("#welcome_aboutButton.png", "#welcome_aboutButton.png", this._about, this); this._aboutBtn.x = 1300; this._aboutBtn.y = 250; var soundButton = new

60、 SoundButton(); soundButton.x = 45; soundButton.y = winSize.height - 45; var menu = new cc.Menu(this._playBtn, this._aboutBtn, soundButton); layer.addChild(menu); menu.x = menu.y = 0; Sound.playMenuBgMusic(); // 播放背景音樂 this

61、.scheduleUpdate(); return true; }, _play:function() { // 切換游戲到主場景 Sound.playspeed(); cc.director.runScene(new GameScene()); }, _about:function() { // 切換游戲到關于場景 Sound.playgetFood(); cc.director

62、.runScene(new AboutScene()); }, }); 如上述代碼，_dove,_playBtn,_aboutBtn分別為鴿子精靈，開始游戲按鈕和進入關于場景的按鈕，bgWelcome為背景圖片，MenuItemImage的第三個參數(shù)即為點擊按鈕后執(zhí)行的函數(shù)，使用director類的runScene方法來切換畫面，同時利用封裝好的sound類在切換場景前關閉當前場景的聲音，_play和_about分別負責切換到這兩個場景。 4.2.2 動態(tài)效果 在開始界面時添加鴿子從左邊屏幕飛入的動作效果，核心代碼如下： var move = cc.moveTo(2, cc

63、.p(this._dove.width/2 + 100, this._dove.y)).easing(cc.easeOut(2)); this._dove.runAction(move); 其中easeOut是一個由快到慢的過渡效果，表現(xiàn)飛入比較真實。 然后給除聲音播放按鈕外的三個對象增加搖擺的效果增加整個畫面的動感，核心代碼如下： update:function(dt) { var currentDate = new Date(); this._dove.y = 400 + (Math.cos(currentDate.getTim

64、e() * 0.002)) * 25; this._playBtn.y = 350 + (Math.cos(currentDate.getTime() * 0.002)) * 10; this._aboutBtn.y = 250 + (Math.cos(currentDate.getTime() * 0.002)) * 10; } 其中Math類是js中的數(shù)學函數(shù)庫，cos是大家熟悉的余弦函數(shù)，currentDate是封裝好的當前時間類，通過一個隨著時間變化的函數(shù)控制三個對象的y值實現(xiàn)上下的浮動。

65、 圖4.1 開始界面實現(xiàn)效果 4.3 關于界面的實現(xiàn) 4.3.1 UI 關于界面非常簡單，ui部分主要就是一段文字和返回按鈕，核心代碼如下： var aboutText = "歸途是一款表現(xiàn)鴿子回家的游戲。\n\n" + " 使用的引擎為cocos2d-js。\n\n" + " 游戲非常簡單，在回家的途中搜集盡可能多的食物。\n\n" + " 注意當 \"Look out!\"出現(xiàn)時規(guī)避障礙物。\n\n" + " 玩家有五點生命值，碰到一次障礙物減少一點，生命值為0游戲結束。 \n\n" + " 嘗試堅持到獲得10

66、000分使鴿子回家:-D"; var helloLabel = new cc.LabelTTF(aboutText, "Arial", 40); helloLabel.x = winSize.width/2; helloLabel.y = winSize.height/2 + 80; layer.addChild(helloLabel); 上出代碼中LabelTTF類為文字顯示類，是cocos2d-js的三種顯示文字的方法之一，其余兩種分別為LabelBMFont和LabelAtlas，其中l(wèi)ableTTF因為效率的問題已經在最新的引擎中不被推薦使用了，但由于本界面十分簡單不涉及效率問題所以使用了最簡單的LabelTTF。 4.3.2 返回按鈕 返回按鈕和前面的開始于關于按鈕一樣使用MenuItemImage類來實現(xiàn)，相關核心代碼如下： // 封裝一個back按鈕 var backButton = new cc.MenuItemImage("#about_backButton.png", "#about_backButton.png", this._bac