本次引擎2.0.5
编辑工具VSCode
如遇不会某个步骤可以先过一遍之前教程，或者下方评论，感谢支持！
目标：让不听话小方块听话
今天教大家CocosCreator的触摸监听函数；
（游戏内坐标是中心为原点，对于触摸是左下角为原点，需转换）
好了，我们新建一个项目：
然后建个白色背景（Sprite（单色））起名bk，
再建一个红色主角；
我们的主角是怎么不听话的呢？
你点它它就乱跑！
我们给它绑个脚本先：
新建个zhujuejs，哦，记得保存一下场景。
然后我们把脚本绑定在主角上：
打开脚本，让脚本可爱起来。
我们解开onLoad的封印（哈哈），脚本的运行顺序是：onLoad（），然后start（），然后update（dt）
随后update（dt）在游戏的每一帧都调用。
（我们声明一些东西都在onLoad，然后在start中处理。）
好，我们写下一个触摸监听函数：
在onLoad（）函数中写下了触摸监听函数，监听的是‘touchstart’，也就是点击开始
（触摸事件有4个：开始时（1次），移动时（n次），在节点中抬起手（1次），在节点外抬起手（1次））
对应的是：
懂了吧，我们来让小方块不听话：
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
this.node.on('touchstart',function(){
//x应该是在-430到430之间运动
this.node.x = -430 + 860*Math.random();
//y应该是在-270到270之间运动
this.node.y = -270 + 540*Math.random();
},this);
},
start () {
},
// update (dt) {},
});
鼠标点下去，它就跑啦~~不听话吧，滑稽！
但是它是瞬间过去的，我们结合动作系统让它飘逸起来。
第一步先加动作：
怎么样，当你点的时候，你会发现，它咻的一下飞出去了。
怎么样？但是不听话的小方块不是好方块。
我们让它听话：
我们改一下监听的动作，监听touchmove。
有的小伙伴问了：我们手指在屏幕上移动时，怎么得到触摸点呢？
这么得到，在function（这里加个event来接受）；
但是我们运行的时候会发现节点不在触摸点，这是因为我之前说的，Cocos有两个坐标系，一个触摸的，一个游戏内的。
我们转换一下：
成功是成功了，可是他为什么会抖动加闪烁呢？
哈哈，因为这个：
因为以本节点（主角）为参考，，但主角在动啊！！！！！
那怎么办，找个不动的呗！（主角的父节点是Canvas，不动）
（别告诉我你不会看子节点和父节点，好吧，我简单讲一下，在层级管理器中，默认Canvas是老大，点开它的下拉小三角，那都是它的父节点。同理）
好了，我们以主角的父节点为基准：
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
this.node.on('touchmove',function(event){
var touch_xy = event.getLocation();//获取当前触点位置
//以本节点父节点为参考，转换触摸坐标至游戏坐标
var game_xy = this.node.parent.convertToNodeSpaceAR(touch_xy);
this.node.x = game_xy.x;
this.node.y = game_xy.y;
},this);
},
start () {
},
// update (dt) {},
});
好了，我们的小方块可以听话的跟着触摸点走了呢！
那么下一个问题，怎么回去呢？？？
简单，加个变量储存就行了。
（给出代码）
cc.Class({
extends: cc.Component,
properties: {
//用于存储坐标
old_xy:null,
},
onLoad () {
//点击后把坐标存好
this.node.on('touchstart',function(){
//this.node.position的用处跟分别给x,y赋值是一样的
this.old_xy = this.node.position;
},this);
//移动
this.node.on('touchmove',function(event){
var touch_xy = event.getLocation();//获取当前触点位置
//以本节点父节点为参考，转换触摸坐标至游戏坐标
var game_xy = this.node.parent.convertToNodeSpaceAR(touch_xy);
this.node.x = game_xy.x;
this.node.y = game_xy.y;
},this);
//触摸结束时
this.node.on('touchend',function(){
//把节点的位置重新给回来
this.node.position = this.old_xy;
},this);
},
start () {
},
// update (dt) {},
});
怎么样，学会了吗？
O(∩_∩)O~~