CocosCreator第一个小游戏范例总结

忘是亡心i 2022-02-02 06:19 306阅读 0赞

### 按照官方文档操作了一波，也算是初步完成了这个小游戏，由于是第一次接触小游戏，有一些感悟和体会，在这里记录下。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70][]

先体验一下这个游戏，然后方便下面的阅读和理解：

[http://fbdemos.leanapp.cn/star-catcher/][http_fbdemos.leanapp.cn_star-catcher]

### 我想从页面布局和脚本两个方面来说。 ###

### 1.页面布局 ###

小游戏的页面布局是通过画布场景来实现的，有点像前端。

首先要有一个场景，然后才能往里面放入一些静态文件，比如游戏背景图，人物角色图等等。

这个游戏是围绕这个game这个画布来进行的，（只有一个场景）

![20190510210835830.png][]

然后主要的静态文件，就存放在了textures文件夹里。到这一步还是比较简单的，就是把这些静态文件拖到场景里，然后可以在里面设置一些位置参数等，另外他们在层级管理器中的层次也要注意下：

![20190510211034193.png][]

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

页面布局完之后是下面这个样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 1][]

到这里整个小游戏还是死的，要通过脚本动起来，而这个脚本就需要我们写代码了。

### 二、脚本思路 ###

**为什么要写脚本？**

让游戏动起来。

**要怎么写脚本？**

我们来思考一下这个游戏，我们需要哪些动作：

1.首先，让这个小人物跳起来；

2.其次，按a、d键能让它左右运动起来；

3.然后，动态生成星星；

4.还有，触碰到星星会消去；

5.而且，分数动态更新。

**一个个js脚本其实就是一个个后台，正确的设计思路是一个js分管一个模块的动作集，而不是不管具体意义就把所有的后台塞进一个js里，他是要有意义的。**

以这个为例，可以分为三个后台：

**一个统一管理整个小游戏的后台，**

**一个小星星的相关动作的后台，**

**一个人物的相关动作的后台。**

这个是比较合理的，得分其实也是一个动作模块，但是它的内容比较小，可以放进第一个后台里统一管理。

我们来看看这三个后台是怎么联系和分别作用的。

## 横向比较之需要用到的属性： ##

### **1.统一管理整个小游戏的脚本：Game.js：** ###

既然是统一管理的脚本，它必然包含了对其他脚本的调用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 2][]

图中红框分别是其他两个脚本Star.js和Player.js的引用。

图中的ground是对静态节点的调用，因为中间会用到这个地面节点的高度参数。

图中的scoreDisplay则是展示分数节点的调用，与他相关的还有分数的动态显示动作。

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

确实是统一管理所有资源。

### 2.Star.js： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 3][]

对于星星他只有一个属性，就是设置主角和星星的距离，小于这个距离，就相当于角色吃到了星星。

### 3.Player: ###

与角色有关的属性有哪些？那得看这个主角干了嘛：跳，左右移动，对应什么属性？高度、速度。所以，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 4][]

加入了跳越音效，所以多了个属性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);  
        },

## 横向比较之各种动作： ##

……这个模块我不想写了。

### **因为写这篇博客的目的不是解释这个小游戏的代码，而是它的设计思路，毕竟我之前没怎么涉及过游戏的制作，这里是记录一下感悟。** ###

**总结而言：应该先在心里有个数要做一个什么游戏，然后设计写哪几个场景，每个场景后台怎么分。有了底，剩下的就是设计图片、音乐等静态文件了。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70]: /images/20220202/780ba55df9cd43ecb928604a4630d7f2.png
[http_fbdemos.leanapp.cn_star-catcher]: http://fbdemos.leanapp.cn/star-catcher/
[20190510210835830.png]: /images/20220202/4aa4599085e54acfb2d94094dfde3243.png
[20190510211034193.png]: /images/20220202/ad2962b052124c7ea6221a4b10fe8d1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 1]: /images/20220202/5eb2e227c2e54292a13d102e07dfd495.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 2]: /images/20220202/12503283f94e4fe1b0009db2145f55c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 3]: /images/20220202/11c02face9324583a99b374aee22e516.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDc2Nzk3_size_16_color_FFFFFF_t_70 4]: /images/20220202/bd3202f705cc4e049729a491ec5f8e1b.png