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

先體驗一下這個游戲，然后方便下面的閱讀和理解：

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

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

1.頁面布局

小游戲的頁面布局是通過畫布場景來實現的，有點像前端。

首先要有一個場景，然后才能往里面放入一些靜態文件，比如游戲背景圖，人物角色圖等等。

這個游戲是圍繞這個game這個畫布來進行的，（只有一個場景）

然后主要的靜態文件，就存放在了textures文件夾里。到這一步還是比較簡單的，就是把這些靜態文件拖到場景里，然后可以在里面設置一些位置參數等，另外他們在層級管理器中的層次也要注意下：

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

頁面布局完之后是下面這個樣子：

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

二、腳本思路

為什么要寫腳本？

讓游戲動起來。

要怎么寫腳本？

我們來思考一下這個游戲，我們需要哪些動作：

1.首先，讓這個小人物跳起來；

2.其次，按a、d鍵能讓它左右運動起來；

3.然后，動態生成星星；

4.還有，觸碰到星星會消去；

5.而且，分數動態更新。

一個個js腳本其實就是一個個后臺，正確的設計思路是一個js分管一個模塊的動作集，而不是不管具體意義就把所有的后臺塞進一個js里，他是要有意義的。

以這個為例，可以分為三個后臺：

一個統一管理整個小游戲的后臺，

一個小星星的相關動作的后臺，

一個人物的相關動作的后臺。

這個是比較合理的，得分其實也是一個動作模塊，但是它的內容比較小，可以放進第一個后臺里統一管理。

我們來看看這三個后臺是怎么聯系和分別作用的。

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

1.統一管理整個小游戲的腳本：Game.js：

既然是統一管理的腳本，它必然包含了對其他腳本的調用：

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

圖中的ground是對靜態節點的調用，因為中間會用到這個地面節點的高度參數。

圖中的scoreDisplay則是展示分數節點的調用，與他相關的還有分數的動態顯示動作。

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

確實是統一管理所有資源。

2.Star.js：

對于星星他只有一個屬性，就是設置主角和星星的距離，小于這個距離，就相當于角色吃到了星星。

3.Player:

與角色有關的屬性有哪些？那得看這個主角干了嘛：跳，左右移動，對應什么屬性？高度、速度。所以，如下圖所示：

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

橫向比較之onLoad：

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

1.統一管理整個小游戲的腳本：Game.js：

生成一個星星；初始化計時器（牽扯到星星的消失）；初始化評分。

onLoad: function () {// 獲取地平面的 y 軸坐標//節點下的 y 屬性對應的是錨點所在的 y 坐標，因為錨點默認在節點的中心，所以需要加上地面高度的一半才是地面的 y 坐標this.groundY = this.ground.y + this.ground.height/2;// 初始化計時器this.timer = 0;this.starDuration = 0;// 生成一個新的星星this.spawnNewStar();// 初始化計分this.score = 0;},

2.Star.js：

暫無

3.Player:

初始化跳越；初始化鍵盤監聽；

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

?

橫向比較之各種動作：

……這個模塊我不想寫了。

因為寫這篇博客的目的不是解釋這個小游戲的代碼，而是它的設計思路，畢竟我之前沒怎么涉及過游戲的制作，這里是記錄一下感悟。

總結而言：應該先在心里有個數要做一個什么游戲，然后設計寫哪幾個場景，每個場景后臺怎么分。有了底，剩下的就是設計圖片、音樂等靜態文件了。

?

?

?

?

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。