cocos-creator学习笔记1（旋转，位置移动，键盘监控移动基础）游戏YSJ367635984的博客-

大一结束的寒假，我无意中发现了一款触碰科技公司开发的开源游戏引擎——cocos-creator，对于开发游戏本来就热爱的我怎么能错失这个机会的，对的起开源就要好好学习（手动滑稽）。由于网课占用时间比例高，而昨天是周六，顺带学习了一波cocos-creator里面相对基础的API及其他知识（当然语言是JavaScript）。
废话不多说，第一次学习，写个笔记纪念一下：（介绍cocos-creator软件组成我就不写了，官方cocos里面说的应该够清楚了）
1.this的理解： 在一个cocos-creator里面的JavaScript脚本里面，this基本上是无处不在的，我说说我个人的看法吧，我也是第一次学（别说我误导子弟，o(╥﹏╥)o）。this我一般把这个关键词看做指代这个你正在编辑的脚本，举个例子，比如还有什么this.maxnum=0，可能意思就是这个脚本 （this） 里面一个类似于全局的变量maxnum赋值为0.如下

在这两个脚本里面，这样子定义，maxnum只能在脚本一使用，在脚本二使用就会出现未声明的报错提示，对于脚本二也是一样的意思。而且在输出时不能仅仅写“输出maxnum”，要写“this.maxnum”，JavaScript是一门弱语言，你可以把它当小学生看，你要输出这个maxnum，相当于你还要喊它一下“嘿，脚本1，输出你里面的maxnum”，所以输出时就带了前缀this.（手动滑稽）。
2.在cocos-creator里面的输出语法是： cc.log()

cc.Class({ //cocos类库 extends: cc.Component,      properties: {         maxnum:0, }, onLoad () {}, update (dt) { //每一次更新是1/60s，也就是dt=0.01667s左右更新一次      cc.log(this.maxnum); }, }); 

2.图片旋转
我下面实现是按图片的中心点进行旋转的，因为一般你创建一个精灵后，其默认位置的锚点都是（0.5,0.5），也就是图片中心处。

cc.Class({ //cocos类库     extends: cc.Component,      properties: {         test:{          type:cc.Node, //创建一个名叫test的节点。 default:null, },         w:120, //设置角速度为120度/秒 },     onLoad () {},     update (dt) { //每一次更新是1/60s，也就是dt=0.01667s左右更新一次 this.test.angle += this.w * dt; //angle就是test节点上的一个属性（角度） // 乘于dt的意思是每次更新都要按照角速度进行叠加 }, }); 

3.位置移动
2d上就是精灵在二维坐标平面的移动。

cc.Class({ //cocos类库     extends: cc.Component,      properties: {         test:{          type:cc.Node, //创建一个名叫test的节点。 default:null, }, //w:120, //设置角速度为120度/秒 },     onLoad () {},     update (dt) { //每一次更新是1/60s，也就是dt=0.01667s左右更新一次 //this.test.angle += this.w * dt; //angle就是test节点上的一个属性（角度） // 乘于dt的意思是没次更新都要按照角速度进行叠加 this.test.x += 5*dt; this.test.y += 5*dt; //加多少完全取决于自己，主要注意一下这个x，y就是图片的 //坐标，（注意，这个坐标是相对于test这个节点父节点的坐标，而不是绝对坐标。） }, }); 

4.接受键盘控制
在cocos-creator里面，cocos库专门有一些API用于处理接受用户的键盘输入而达到控制所谓游戏英雄的移动。

1.首先开启键盘的监控功能，通过我们用的两类操作来实现，一个是我们按下键盘按键时做出的反应，还有一个是我们手指离开你所按的按键的反应，分别是KEY_DOWN和KEY_UP
上述过程实现的大致流程：首先调用cocos类库里面的systemEvent，并将其开关打开（也就是后面的on）现在开始你监控的类型（调用cocos类库里面的SystemEvent，再调用其内的EventType，也就是查找监控事件的类型——KEY_DOWN或者KEY_UP）括号内第一个逗号后面是一个自定义的函数，我这里将函数名分别定义为OnKeyDown和OnKeyUp，通过this关键词来索引调用这个函数（下面会写这两个函数的内容），最后一个this是对此脚本实现键盘监控。

2.我们来看第二类，与之相反，你既然可以打开键盘监控，那我也就可以关闭键盘监控

定义在onDestroy里面，上面on是打开监控，这个off是关闭监控。

3.定义一系列的移动判断变量，我将他们定义在onLoad里面，当然start里面也可以

默认移动变量是false，也就是说是关闭的。
5.接下来实现键盘移动
首先是当你的手将一个方向键按沉了，说明调用KEY_DOWN那行里面的OnKeyDown函数
event就是指代你这次监控的事件

相应的，如果你的手离开了键盘，此时的移动变量开关应该又变成false；

6.实现后在updat函数里面通过四个移动变量哪个为true来判断英雄移动的方向

贴上完整代码（其他代码可以不用理会）

  cc.Class({ extends: cc.Component,      properties: {         player:{             type:cc.Node, default:null, },         Bullent:{             type:cc.Prefab, default:null, },         ememy:{             type:cc.Prefab, default:null, }, }, onLoad () { this.isleft=false; this.isright=false; this.isup=false; this.isdown=false; this.kaihuo=false;         cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.OnKeyDown,this);         cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.OnKeyUp,this); this.jiage=0; this.jg=0; this.num=0; }, onDestroy(){         cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN,this.OnKeyDown,this);         cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP,this.OnKeyUp,this); },     CreateBullet:function(){ var bull = cc.instantiate(this.Bullent); this.node.addChild(bull);         bull.setPosition(this.player.x,this.player.y - this.player.height/2+15);         bull.getComponent('bullet').game = this; },     CreateEmemy:function(){ var EM = cc.instantiate( this.ememy ); this.node.addChild(EM); EM.setPosition((Math.random()-0.5)*2*460 , -325-EM.height/2); }, OnKeyDown(event){ switch(event.keyCode) { case cc.macro.KEY.a: this.isleft = true;                 cc.log("anxia"); break; case cc.macro.KEY.d: this.isright = true; break; case cc.macro.KEY.s: this.isdown = true; break; case cc.macro.KEY.w: this.isup = true; break; case cc.macro.KEY.space: this.kaihuo = true;                 cc.log("kaihuo"); break; } }, OnKeyUp(event){ switch(event.keyCode) { case cc.macro.KEY.a: this.isleft = false; break; case cc.macro.KEY.d: this.isright = false; break; case cc.macro.KEY.s: this.isdown = false; break; case cc.macro.KEY.w: this.isup = false; break; case cc.macro.KEY.space: this.kaihuo = false; break; } }, update (dt) {         cc.log(this.player.x); if(this.isleft){ this.player.x -= 4; } else if(this.isright){ this.player.x += 4; } else if(this.isdown){ this.player.y -= 4; } else if(this.isup){ this.player.y += 4; } this.jiage++;this.jg++; /*if(this.jiage>20)         {             this.CreateBullet();             this.jiage=0;         }         if(this.num<=6&&this.jg==240)         {             this.CreateEmemy();             this.num++;             this.jg=0;         }*/ }, }); 

第一次学习cocos-creator，也才刚刚进入大学半年，欢迎大家一起讨论学习！