Cocos 需要用到的Javascript速成

打开Cocos creator 官方文档，找到第一个小游戏页面

下滑，略微一瞄（怎么瞄？想你的每一秒），

https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

发现使用的是Javascript，哦豁，我不会。

不慌，百度w3school，点到JavaScript，https://www.w3school.com.cn/js/index.asp，

我们的目的是用cocos写游戏，那我们就先看看官方示例中每一行代码使用了什么。

先给大家两个小时跟着官方文档走一遍小游戏。

 

--------两个小时分界线----------

 

在VS中打开game.js，star.js，player.js三个文件，相信在刚刚的制作游戏体验中大家已经理解了game.js就是游戏主逻辑，star.js就是控制星星的生成和销毁，player.js就是控制小怪物的行动（不知道龙族5断更一年多有没有更新了）

好吧，江南老贼还在抑郁症。

接下来继续说回代码问题，作为一个游戏，我们最关心的当然是我们能不能控制人物的行动了，上上下下，左右左右，BABA，

所以我们先看player.js，同时打开Cocos文档中的JavaScript速成页面

https://docs.cocos.com/creator/manual/zh/scripting/javascript-primer.html?h=javas

首先可以看到player.js中有以下一级结构。

cc.class({

});

这一步中cc指的是被封装的Cocos环境，后面定义的class类会在cocos这一环境下进行编译，什么叫环境呢？比如大家常说的政治正确，就是社会的环境之一，你在网上说啥话都要遵从这个环境，不然就会被关小黑屋（编译出错）。(能理解继承和派生的就忽略，这里只取速成要用的理解）

 

 

 

那么现在理解了环境这一概念，cc.class（{}）；就很好理解了，括号里写的东西必须遵从cc里规定的规范，不然就报错不给玩游戏。

接下来看二级目录（方法），

    extends: cc.Component, //cc.Component是一个制作好的组件，这句话的意思就是我接下来所有的行为会基于cc.Component来构建，也可以理解为头文件
    
    properties: {
        //定义基本参数
    },

    runJumpAction: function () {

       //反复横跳待机

       }，

    playJumpSound: function () {
       //播放声音
    },

    onKeyDown (event) {
       
       //监听键盘A,D是否按下
    },

    onKeyUp (event) {
       //监听键盘A,D是否松开 
    },

    onLoad: function() {
        //初始化加载界面，就是大家打开王者荣耀loading和loading完成的时候发生的事情，
    },

    onDestroy () {
       //关闭键盘输入监听，键盘操作无法被读取，不能对游戏做出改变
    },    

    update: function (dt) {
       //这个是重点，游戏开始后会不断调用这个函数，比如设置游戏60帧，那么就会在一秒钟里调用60次这个函数，只要你手速够快，一秒里按左右左右30个轮回，理论上就会产生30个在（-1，0）和（0，0）坐标的界面，所以这个函数承担的是游戏响应刷新的功能，把你的行为反馈到游戏逻辑并给出响应动作之后的界面
       
    },

其实严格上来说第一句extends: cc.Component,属于第二级，其他都属于第三级，属于对cc.Compoment属性的声明与配置。各个方法的含义见注释。

相信大家在游戏练手的时候也发现了，每个cocos creator创建的js文件都会有一些已经写好的代码，这是因为cocos已经给我们搭好了一个框架，而这些代码就是框架的大体描述。

在几个js文件中，都会有几个相同的函数，相信你一定很好奇为什么。

这是因为一个对象会有一定的生命周期

js对象概念https://www.w3school.com.cn/js/js_objects.asp

生命周期https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html?h=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

一个组件从初始化到激活，再到最终销毁的完整生命周期函数调用顺序为：onLoad -> onEnable -> start -> update -> lateUpdate -> onDisable -> onDestroy

接下来开始看3级目录，或许已经无法称它为目录了，因为接下来已经到了写函数的时候，应该叫三级内容（听起来怪怪的，我可没有说是毛片啊）。

   properties: {
        // 主角跳跃高度
        jumpHeight: 0,
        // 主角跳跃持续时间
        jumpDuration: 0,
        // 最大移动速度
        maxMoveSpeed: 0,
        // 加速度
        accel: 0,
      
        // 跳跃音效资源
        jumpAudio: {
            default: null,
            type: cc.AudioClip
        },
    },
这一部分负责组件基础属性的声明，与c++不同，在其他语言中取消了变量数值类型的声明，所以不需要 int a=0;而只需要a=0,就可以了。

我们可以看到在上面有两种不同的属性声明方式，

jumpHeight: 0,//找老婆：0，

jumpAudio: {                       //找老婆：{
            default: null,           //身材：36d,
            type: cc.AudioClip // 身高：168cm
        },                                //},

第一种是直接用键值对的方式进行定义赋值，第二种是类似于构造一个数据结构的方式进行定义，包括但不限于指明变量所使用的资源文件类型，默认状态。如上既第一种定义了一个变量赋值为0，第二种定义了一个叫jump Audio的东西，它必须是cc.AudioClip类型的文件，默认为null。

接下来我们看一个跳动方法

runJumpAction () {
        // 跳跃上升
        var jumpUp = cc.tween().by(this.jumpDuration, {y: this.jumpHeight}, {easing: 'sineOut'});
        // 下落
        var jumpDown = cc.tween().by(this.jumpDuration, {y: -this.jumpHeight}, {easing: 'sineIn'});

        // 创建一个缓动，按 jumpUp、jumpDown 的顺序执行动作
        var tween = cc.tween().sequence(jumpUp, jumpDown)
        // 不断重复
        return cc.tween().repeatForever(tween);
    },

 这里面涉及到了接口调用，对象定位，局部变量定义，

变量定义如下：

使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；
使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

接口调用：就是中使用this来定位当前组件或变量，类似于python中每个函数都带有一个self参数

this属性参见https://www.w3school.com.cn/js/js_this.asp

接下来解释这个方法，

var jumpUp = cc.tween().by(this.jumpDuration, {y: this.jumpHeight}, {easing: 'sineOut'});

var jumpup = null,//定义了一个局部变量jumpup，初始化为null。

tween缓动系统https://docs.cocos.com/creator/api/zh/classes/Tween.html

再看一下上面这一句代码：

 var jumpUp = cc.tween().by(this.jumpDuration, {y: this.jumpHeight}, {easing: 'sineOut'});

cc.tween指缓动模块

参数引入使用的是键值对模式，

 easing 可以用来使缓动更生动，singout是正弦曲线缓出函数，不太清楚是不是用傅里叶变换然后取侧实现的，下次再看

https://docs.cocos.com/creator/api/zh/classes/Easing.html

从cc中调用了tween模块，设计了一个y坐标上移jumpHeight，动作完成时间jumpDuration，对动作使用正弦曲线进行修饰的动作

总结一下现在学到的知识点：

我们需要控制一个角色或者物体，就可以给这个物体创建一个js脚本，然后在物体属性编辑器上添加用户脚本组件，接下来这个物体就会遵从脚本所制作的规则。

在js文件中，预设好了一个Cocos框架，在properties: {}，中定义基础属性变量采用的规则是键值对，可以随便赋值，之后在Cocos creator编辑器中可以随便更改赋值，接下来就可以写方法了，

js中写方法与c++类似，基本规则为

function func1([参数]){
/*函数体*/
}，
用逗号分隔各个函数

var func2=function([参数]){
/*函数体*/
}，
接下来学习变量定义
键值对：

name："不过是轮回"，

变量：

var name =  "不过是轮回”

到此，Cocos框架中所有的常用语法知识点已经分析完成。

接下来进行另一个知识点的分析，全局变量和局部变量。

注意：javascript代码的执行是从上到下的

通常情况下使用

var a = 0；

的方式进行变量声明，

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

https://www.w3school.com.cn/js/js_let.asp

使用 let 关键词声明拥有块作用域的变量，在块中重新声明变量不会重新声明块外的变量。

例如：

{ 
  var x = 10; 
}
// 此处可以使用 x

在函数外部可以看到这个变量x
{ 
 let x = 10;
}
// 此处不可以使用 x

在函数外部无法读取x，就跟没有出现过一样，称为隐藏变量，也可以理解为绝对性质的局部变量。

此外还有一个闭包概念，就是在一个函数中用var声明了一个变量x，接下来在函数内部会有其他行为调用x，但在整个类中x属于局部变量。

到此为止，已经足够看懂js文件并开始初步用Cocos写游戏了。