按照官方文檔操作了一波，也算是初步完成了這個(gè)小游戲，由于是第一次接觸小游戲，有一些感悟和體會(huì)，在這里記錄下。

先體驗(yàn)一下這個(gè)游戲，然后方便下面的閱讀和理解：

http://fbdemos.leanapp.cn/star-catcher/?

我想從頁面布局和腳本兩個(gè)方面來說。

1.頁面布局

小游戲的頁面布局是通過畫布場(chǎng)景來實(shí)現(xiàn)的，有點(diǎn)像前端。

首先要有一個(gè)場(chǎng)景，然后才能往里面放入一些靜態(tài)文件，比如游戲背景圖，人物角色圖等等。

這個(gè)游戲是圍繞這個(gè)game這個(gè)畫布來進(jìn)行的，（只有一個(gè)場(chǎng)景）

然后主要的靜態(tài)文件，就存放在了textures文件夾里。到這一步還是比較簡(jiǎn)單的，就是把這些靜態(tài)文件拖到場(chǎng)景里，然后可以在里面設(shè)置一些位置參數(shù)等，另外他們?cè)趯蛹?jí)管理器中的層次也要注意下：

下面的會(huì)展示在上面的前面，就像前端的z-index,下面的z-index更大。

頁面布局完之后是下面這個(gè)樣子：

到這里整個(gè)小游戲還是死的，要通過腳本動(dòng)起來，而這個(gè)腳本就需要我們寫代碼了。

二、腳本思路

為什么要寫腳本？

讓游戲動(dòng)起來。

要怎么寫腳本？

我們來思考一下這個(gè)游戲，我們需要哪些動(dòng)作：

1.首先，讓這個(gè)小人物跳起來；

2.其次，按a、d鍵能讓它左右運(yùn)動(dòng)起來；

3.然后，動(dòng)態(tài)生成星星；

4.還有，觸碰到星星會(huì)消去；

5.而且，分?jǐn)?shù)動(dòng)態(tài)更新。

一個(gè)個(gè)js腳本其實(shí)就是一個(gè)個(gè)后臺(tái)，正確的設(shè)計(jì)思路是一個(gè)js分管一個(gè)模塊的動(dòng)作集，而不是不管具體意義就把所有的后臺(tái)塞進(jìn)一個(gè)js里，他是要有意義的。

以這個(gè)為例，可以分為三個(gè)后臺(tái)：

一個(gè)統(tǒng)一管理整個(gè)小游戲的后臺(tái)，

一個(gè)小星星的相關(guān)動(dòng)作的后臺(tái)，

一個(gè)人物的相關(guān)動(dòng)作的后臺(tái)。

這個(gè)是比較合理的，得分其實(shí)也是一個(gè)動(dòng)作模塊，但是它的內(nèi)容比較小，可以放進(jìn)第一個(gè)后臺(tái)里統(tǒng)一管理。

我們來看看這三個(gè)后臺(tái)是怎么聯(lián)系和分別作用的。

橫向比較之需要用到的屬性：

1.統(tǒng)一管理整個(gè)小游戲的腳本：Game.js：

既然是統(tǒng)一管理的腳本，它必然包含了對(duì)其他腳本的調(diào)用：

圖中紅框分別是其他兩個(gè)腳本Star.js和Player.js的引用。

圖中的ground是對(duì)靜態(tài)節(jié)點(diǎn)的調(diào)用，因?yàn)橹虚g會(huì)用到這個(gè)地面節(jié)點(diǎn)的高度參數(shù)。

圖中的scoreDisplay則是展示分?jǐn)?shù)節(jié)點(diǎn)的調(diào)用，與他相關(guān)的還有分?jǐn)?shù)的動(dòng)態(tài)顯示動(dòng)作。

然后得分音效也寫在上面了。

確實(shí)是統(tǒng)一管理所有資源。

2.Star.js：

對(duì)于星星他只有一個(gè)屬性，就是設(shè)置主角和星星的距離，小于這個(gè)距離，就相當(dāng)于角色吃到了星星。

3.Player:

與角色有關(guān)的屬性有哪些？那得看這個(gè)主角干了嘛：跳，左右移動(dòng)，對(duì)應(yīng)什么屬性？高度、速度。所以，如下圖所示：

加入了跳越音效，所以多了個(gè)屬性jumpAudio。?

橫向比較之onLoad：

用戶什么都不操作的情況下，需要初始化什么內(nèi)容呢？

1.統(tǒng)一管理整個(gè)小游戲的腳本：Game.js：

生成一個(gè)星星；初始化計(jì)時(shí)器（牽扯到星星的消失）；初始化評(píng)分。

onLoad: function () {// 獲取地平面的 y 軸坐標(biāo)//節(jié)點(diǎn)下的 y 屬性對(duì)應(yīng)的是錨點(diǎn)所在的 y 坐標(biāo)，因?yàn)殄^點(diǎn)默認(rèn)在節(jié)點(diǎn)的中心，所以需要加上地面高度的一半才是地面的 y 坐標(biāo)this.groundY = this.ground.y + this.ground.height/2;// 初始化計(jì)時(shí)器this.timer = 0;this.starDuration = 0;// 生成一個(gè)新的星星this.spawnNewStar();// 初始化計(jì)分this.score = 0;},

2.Star.js：

暫無

3.Player:

初始化跳越；初始化鍵盤監(jiān)聽；

onLoad: function () {// 初始化跳躍動(dòng)作this.jumpAction = this.setJumpAction();this.node.runAction(this.jumpAction);// 加速度方向開關(guān)this.accLeft = false;this.accRight = false;// 主角當(dāng)前水平方向速度this.xSpeed = 0;// 初始化鍵盤輸入監(jiān)聽cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); },

?

橫向比較之各種動(dòng)作：

……這個(gè)模塊我不想寫了。

因?yàn)閷戇@篇博客的目的不是解釋這個(gè)小游戲的代碼，而是它的設(shè)計(jì)思路，畢竟我之前沒怎么涉及過游戲的制作，這里是記錄一下感悟。

總結(jié)而言：應(yīng)該先在心里有個(gè)數(shù)要做一個(gè)什么游戲，然后設(shè)計(jì)寫哪幾個(gè)場(chǎng)景，每個(gè)場(chǎng)景后臺(tái)怎么分。有了底，剩下的就是設(shè)計(jì)圖片、音樂等靜態(tài)文件了。

?

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的CocosCreator第一个小游戏范例总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。