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

《畢業(yè)設(shè)計(jì)（論文）-基于android的avg類(lèi)型游戲《歸途》的設(shè)計(jì)與實(shí)現(xiàn)》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《畢業(yè)設(shè)計(jì)（論文）-基于android的avg類(lèi)型游戲《歸途》的設(shè)計(jì)與實(shí)現(xiàn)（56頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

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

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

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

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

5、, 2014(8):1800-1801. [7] 趙亮, 張維. 基于A(yíng)ndroid技術(shù)的界面設(shè)計(jì)與研究[J]. 電腦知識(shí)與技術(shù), 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. 專(zhuān)業(yè)班級(jí) 軟件1229班 學(xué)生 要求設(shè)計(jì)（論文）工作起止日期 2016年3月21日~2016年6月10日 指導(dǎo)教師簽字 日期 2016年3月21日 教研室主任審查簽字 日期 系主任批準(zhǔn)簽字 日期 基于android的avg類(lèi)型游戲《歸途》的設(shè)計(jì)與實(shí)現(xiàn) 摘 要 由于目前移動(dòng)平臺(tái)的普及和游戲行業(yè)的逐步完善，越來(lái)越多的開(kāi)發(fā)者開(kāi)始在手機(jī)平臺(tái)上進(jìn)行游戲開(kāi)發(fā)，并且因?yàn)楣ぞ叩耐晟坪蛡鞑サ谋憬菪裕謾C(jī)平臺(tái)也越來(lái)越受獨(dú)立游戲開(kāi)發(fā)者的關(guān)

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

8、盡可能的表達(dá)了主題的內(nèi)容。 關(guān)鍵字：游戲開(kāi)發(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 課題的來(lái)源及意義 1 1.2 與課題相關(guān)的行業(yè)發(fā)展現(xiàn)狀 2 1.2.1 html5游戲 2 1.2.2 獨(dú)立游戲 2 1.3 主要工作內(nèi)容 3 2 項(xiàng)目需求及關(guān)鍵技術(shù)分析 4 2.1 項(xiàng)目需求 4 2.2 cocos2d-js中的jav

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

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

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

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

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

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

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

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

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

23、端的內(nèi)容和向安卓原生的移植。所以主要工作內(nèi)容如下，學(xué)習(xí)cocos2d-js的基本工作流，設(shè)計(jì)并實(shí)現(xiàn)一個(gè)html5游戲，完成對(duì)游戲向原生安卓平臺(tái)的移植，最后的成果為一個(gè)安卓原生的完整游戲。 2 項(xiàng)目需求及關(guān)鍵技術(shù)分析 2.1 項(xiàng)目需求 獨(dú)立游戲開(kāi)發(fā)與大型軟件項(xiàng)目和大型游戲項(xiàng)目均不相同，因?yàn)椴皇枪δ苄缘某绦?，所以需求部分可以完全由自己完成，及不斷的探尋自己想要表達(dá)的內(nèi)容與自己開(kāi)發(fā)技能所能達(dá)到的一個(gè)重合點(diǎn)，同時(shí)快速的學(xué)習(xí)新的技術(shù)用來(lái)實(shí)現(xiàn)自己的想法。 本項(xiàng)目中準(zhǔn)備開(kāi)發(fā)一個(gè)表現(xiàn)鴿子回家過(guò)程的游戲，玩家控制一個(gè)飛鴿躲避障礙物并收集食物

24、，最終到達(dá)終點(diǎn)。 具體需求如下： ·開(kāi)始界面，提供聲音控制按鈕，開(kāi)始游戲按鈕及關(guān)于即游戲介紹界面跳轉(zhuǎn)按鈕。 ·游戲過(guò)程界面，提供聲音控制按鈕及暫停按鈕，顯示鴿子，滾動(dòng)的視差背景，隨機(jī)生成的食物，生命值，分?jǐn)?shù)及距離，同時(shí)提供游戲結(jié)束的提示彈出框及返回按鈕。 ·關(guān)于界面，游戲的內(nèi)容介紹及返回開(kāi)始界面的按鈕。 ·勝利界面，勝利的動(dòng)畫(huà)及最終分?jǐn)?shù)顯示。 ·食物相關(guān)，提供多種分布方式隨機(jī)選擇生成在游戲過(guò)程界面中。 ·障礙物相關(guān)，提供多種障礙物隨機(jī)類(lèi)型隨機(jī)位置出現(xiàn)，同時(shí)實(shí)現(xiàn)提前提醒出現(xiàn)位置的功能。 ·兩種正面效果道具，一種提供加速功能，可以無(wú)視障礙物，一種提供吸收周?chē)澄锏墓δ堋? 2.2

25、 cocos2d-js中的javascript語(yǔ)言 cocos2d-js使用的語(yǔ)言為javascript語(yǔ)言，掌握javascript的基本概念也是十分重要的一部分，下面來(lái)簡(jiǎn)單介紹一下cocos2d-js中javascript語(yǔ)言的應(yīng)用。 首先javascript是一種基于原型的語(yǔ)言，最新的標(biāo)準(zhǔn)為ES6，javascript的應(yīng)用十分普遍，作為一種腳本語(yǔ)言廣泛應(yīng)用在web領(lǐng)域，而cocos2d-js由于作為游戲引擎，需要用到面向?qū)ο蟮囊恍┨匦詠?lái)組織代碼結(jié)構(gòu)，所以采用了jquery之父john resig的繼承方案，封裝了new，extend等方法來(lái)實(shí)現(xiàn)類(lèi)與繼承。示例代碼如下: 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); 上述代碼在瀏覽器控制臺(tái)會(huì)輸出obj1、obj2，這個(gè)例子利用了function的Prototype來(lái)實(shí)現(xiàn)了不同的對(duì)象。 并定義了Class作為基類(lèi)。代碼清單如下： cc.Class = function(){}; cc.Class.extend = function(props){ va

27、r _super = this.prototype; ... //是本類(lèi)可繼承 Class.extend = cc.Class.extend; //增加實(shí)現(xiàn)方法 Class.implement = function(prop){ For(var name in prop){ prototype[name] =prop[name]; } }; ... 如上，cocos2d-js引擎中的CCClass.js中封裝了extend和implements方法，實(shí)現(xiàn)了面向?qū)ο蟮墓δ?，可以讓開(kāi)發(fā)者方面的在js中應(yīng)用面向?qū)ο蟮奶匦?。使用時(shí)的示例如下: 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為構(gòu)造函數(shù)，與c++的構(gòu)造函數(shù)類(lèi)似，上面的TestScene類(lèi)新建時(shí)傳入一個(gè)顏色參數(shù)即可創(chuàng)建出一個(gè)單色背景的scene。 最后需要深入理解一下js中的this關(guān)鍵字，在面向?qū)ο蟮娘L(fēng)格中this常見(jiàn)但js的this與java和c++中的th

29、is有一些不同之處。 this在函數(shù)中隨著使用場(chǎng)合的不同而代表著不同的值，即指向調(diào)用這個(gè)函數(shù)的對(duì)象。 首先是全局函數(shù)下的this所指向的對(duì)象，如下列代碼所示： 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指向的對(duì)象為全局對(duì)象。 然后是作為對(duì)象的方法,示例代碼如下: funct

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

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中的第一個(gè)參數(shù)。 所以綜上所述，在cocos2d-js中使用this時(shí)要注意全局函數(shù)下的情況，帶特定情況下需要使用bind()函數(shù)來(lái)手動(dòng)綁定對(duì)象。 bind可以手動(dòng)來(lái)改變function的上下文環(huán)

32、境，所以說(shuō)雖然javascript是一門(mén)比較混亂的語(yǔ)言但是同時(shí)也是一門(mén)非常靈活和實(shí)用的語(yǔ)言。 2.3 cocos2d-js引擎 2.3.1 坐標(biāo)系統(tǒng)及對(duì)象管理 cocos2d-js是一個(gè)典型的2d游戲引擎，坐標(biāo)系為以左下角為(0,0)點(diǎn)x從左往右遞增，y從下往上遞增。那么要理解cocos2x-js中對(duì)象的管理機(jī)制首先要從兩個(gè)概念說(shuō)起，首先是節(jié)點(diǎn)，在cocos2d-js中被封裝為Node類(lèi)。 部分代碼如下 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, ...... 可以從名字看出一些基本功能，如縮放，坐標(biāo)，透明度等等，其中對(duì)于對(duì)象管理很重要的屬性就是_children,在cocos2d-js中對(duì)象是通過(guò)樹(shù)結(jié)構(gòu)進(jìn)行管理的，這樣帶來(lái)的特性就是整體性，可是實(shí)現(xiàn)對(duì)父節(jié)點(diǎn)添加效果時(shí)影響全部子節(jié)點(diǎn)，如透明度坐標(biāo)等，理解了這個(gè)結(jié)構(gòu)，那么在坐標(biāo)系下錨點(diǎn)等概念就十分容易理解了。 首先cocos2d-js通過(guò)封裝的導(dǎo)演類(lèi)Director來(lái)控制Scene場(chǎng)景載入與變換，再通過(guò)節(jié)點(diǎn)來(lái)管理與顯示每個(gè)場(chǎng)景

35、中的各個(gè)物體。 其中為了便于管理與組織顯示的物體，cocos2d-js的js庫(kù)中封裝了兩個(gè)類(lèi)，一個(gè)為L(zhǎng)ayer一個(gè)為Sprite，Layer繼承了節(jié)點(diǎn)并增加了一些功能如背景顏色等等，作為一個(gè)輔助的類(lèi)可以將同一場(chǎng)景中的各個(gè)節(jié)點(diǎn)分層管理，如簡(jiǎn)單的分為背景層，人物層，敵人層等等。而精靈類(lèi)cc.Sprite則是游戲中經(jīng)常出現(xiàn)的一個(gè)類(lèi)，繼與Node，一般用于表示游戲內(nèi)的人物或者npc，但是由于封裝了很多常用功能如加載圖片播放動(dòng)畫(huà)等等，時(shí)常也用作一些加載動(dòng)態(tài)的背景內(nèi)容等等。 有了上述概念后通過(guò)一段示例代碼來(lái)具體展現(xiàn)上面概念在實(shí)際中的應(yīng)用，示例代碼如下: 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); 上面三個(gè)對(duì)象的錨點(diǎn)分別為bg左下角，ball1，ball2中

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

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

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

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

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

42、事件。 觸摸的處理cocos2d-js中一樣使用的是監(jiān)聽(tīng)事件模型，監(jiān)聽(tīng)單點(diǎn)觸摸事件通過(guò)cc.eventManager.addListener添加信息，示例代碼如下: cc.eventManager.addListener({ event : cc.EventListener.TOUCH_ONE_BY_ONE, // 單點(diǎn)觸摸事件 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聲明了事件的類(lèi)型，后面的函數(shù)根據(jù)需求進(jìn)行實(shí)現(xiàn)即可。 多點(diǎn)觸摸的處理類(lèi)似，其中touch參數(shù)變?yōu)閠ouches，傳入一個(gè)觸摸點(diǎn)數(shù)組，可以利用循環(huán)來(lái)分別處理。 2.3.5 粒子系統(tǒng) 粒子系統(tǒng)是計(jì)算機(jī)圖形學(xué)中用于模擬特定模糊現(xiàn)象的系統(tǒng)，如火焰，煙霧，煙花，雨雪等等。粒子系統(tǒng)通過(guò)設(shè)定生成由色塊或圖片表示的粒子的生成速度和生成周期，位置，速度，生命周期等等來(lái)模擬實(shí)際的物理規(guī)律[2]。 cocos2d-js中粒子系

44、統(tǒng)封裝為ParticleSystem，但因?yàn)榱Ｗ酉到y(tǒng)涉及的屬性過(guò)多，所以引擎提供了一些通用的效果，如煙花，火焰，太陽(yáng)，雪，流星等等，通過(guò)替換其中的紋理即可完成大部分通用的建議效果。 例如煙花的示例代碼如下: 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類(lèi)即為封裝好的煙花類(lèi)型。 當(dāng)然，想要實(shí)現(xiàn)自己需要的粒子效果還是要經(jīng)過(guò)自己的調(diào)試，粒子效果的可視化工具也很多，如ParticleEditor和ParticleBuilder，通過(guò)可視化界面輸入?yún)?shù)調(diào)整需要的效果，導(dǎo)出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ù)，本示例代碼將會(huì)把粒子效果在屏幕正中間播放5次。停止方法也非常直觀(guān)，對(duì)于無(wú)限循環(huán)的粒子系統(tǒng)使用stopSystem方法，對(duì)于播放次數(shù)有限則使用setAutoRemoveOnFinish方法，設(shè)置自動(dòng)銷(xiāo)毀。因?yàn)榱Ｗ酉到y(tǒng)將產(chǎn)生大量的節(jié)點(diǎn)占用資源，所以使用粒子系統(tǒng)時(shí)注意及時(shí)停止時(shí)十分必要的優(yōu)化工作。 3 系統(tǒng)設(shè)計(jì) 3.1 場(chǎng)景列表 首先是開(kāi)始界面，眾所周知

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

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

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

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

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

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

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

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

56、null, // 鴿子對(duì)象 _playBtn:null, // 啟動(dòng)按鈕 _aboutBtn:null, // 關(guān)于按鈕 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"); // 依次添加對(duì)象 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(); // 播放背景音樂(lè) this

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

62、.runScene(new AboutScene()); }, }); 如上述代碼，_dove,_playBtn,_aboutBtn分別為鴿子精靈，開(kāi)始游戲按鈕和進(jìn)入關(guān)于場(chǎng)景的按鈕，bgWelcome為背景圖片，MenuItemImage的第三個(gè)參數(shù)即為點(diǎn)擊按鈕后執(zhí)行的函數(shù)，使用director類(lèi)的runScene方法來(lái)切換畫(huà)面，同時(shí)利用封裝好的sound類(lèi)在切換場(chǎng)景前關(guān)閉當(dāng)前場(chǎng)景的聲音，_play和_about分別負(fù)責(zé)切換到這兩個(gè)場(chǎng)景。 4.2.2 動(dòng)態(tài)效果 在開(kāi)始界面時(shí)添加鴿子從左邊屏幕飛入的動(dòng)作效果，核心代碼如下： 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是一個(gè)由快到慢的過(guò)渡效果，表現(xiàn)飛入比較真實(shí)。 然后給除聲音播放按鈕外的三個(gè)對(duì)象增加搖擺的效果增加整個(gè)畫(huà)面的動(dòng)感，核心代碼如下： 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類(lèi)是js中的數(shù)學(xué)函數(shù)庫(kù)，cos是大家熟悉的余弦函數(shù)，currentDate是封裝好的當(dāng)前時(shí)間類(lèi)，通過(guò)一個(gè)隨著時(shí)間變化的函數(shù)控制三個(gè)對(duì)象的y值實(shí)現(xiàn)上下的浮動(dòng)。

65、 圖4.1 開(kāi)始界面實(shí)現(xiàn)效果 4.3 關(guān)于界面的實(shí)現(xiàn) 4.3.1 UI 關(guān)于界面非常簡(jiǎn)單，ui部分主要就是一段文字和返回按鈕，核心代碼如下： var aboutText = "歸途是一款表現(xiàn)鴿子回家的游戲。\n\n" + " 使用的引擎為cocos2d-js。\n\n" + " 游戲非常簡(jiǎn)單，在回家的途中搜集盡可能多的食物。\n\n" + " 注意當(dāng) \"Look out!\"出現(xiàn)時(shí)規(guī)避障礙物。\n\n" + " 玩家有五點(diǎn)生命值，碰到一次障礙物減少一點(diǎn)，生命值為0游戲結(jié)束。 \n\n" + " 嘗試堅(jiā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類(lèi)為文字顯示類(lèi)，是cocos2d-js的三種顯示文字的方法之一，其余兩種分別為L(zhǎng)abelBMFont和LabelAtlas，其中l(wèi)ableTTF因?yàn)樾实膯?wèn)題已經(jīng)在最新的引擎中不被推薦使用了，但由于本界面十分簡(jiǎn)單不涉及效率問(wèn)題所以使用了最簡(jiǎn)單的LabelTTF。 4.3.2 返回按鈕 返回按鈕和前面的開(kāi)始于關(guān)于按鈕一樣使用MenuItemImage類(lèi)來(lái)實(shí)現(xiàn)，相關(guān)核心代碼如下： // 封裝一個(gè)back按鈕 var backButton = new cc.MenuItemImage("#about_backButton.png", "#about_backButton.png", this._bac