CocosCreator第一个小游戏范例总结

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

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

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);  
    },

 

横向比较之各种动作：

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

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

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