本次引擎2.0.5
编辑工具VSCode
如遇不会某个步骤可以先过一遍之前教程，或者下方评论，感谢支持！
目标：单次点击角色移动与吃东西
还记得我们小时候拿着诺基亚之类的老手机玩着魔塔类游戏吗，我们按下方向键，角色就移动一格，然后碰到东西就吃了！今天我就来带大家实现这个小目标。
提前准备个图片（自己画的，没错，我是灵魂画手）
打开我们的项目文件夹：
别的我们先不管；看看这个熟悉的单词，我们好像在哪见过？
没错，相通的！我们把图片扔进去：
然后关闭文件夹，我们回到编辑器，看：是不是图片出现了？
好，接下来让我们布局一下：
第一步：白色背景（重命名bk）
第二步：红色小块（当主角，我重命名叫zhu_jiao）
第三步：把图片拖到场景中：
然后得到：
接下来，我们改变那个图片的大小（变得小一些，具体多少看你手多大），然后我们同样再拖过来3个：
然后我把他们改一下名字（上下左右），然后更改属性面板的：
旋转角度，最后是这样的：
怎么样，有没有红白机游戏的感觉了呢。
保存一下吧，我习惯性起名为game
接下来，我们开始写脚本，来监听那四个上下左右图片，然后对主角的位置进行更改。
诶？不是只有按钮可以监听点击事件吗？关于这个问题：按钮其实只是一个组件，它也可以绑定在别的节点上。
比如Sprite单色，Sprite图片（其实我们拖进来图片就会自动生成Sprite图片类型节点，可以再附加Buttom组件）
我们看图：
同理，我们给上下左右都加上Button组件。
然后：
我们写个脚本就叫zhujiaojs吧（博主懒到不愿意起名字，console.log(滑稽)）；
删掉注释让脚本可爱起来！
然后我们声明一个step来表示主角移动一格的距离：
然后写出上下左右对应的四个函数：
this.node这个东东就是指绑定该脚本的节点；可以通过它对绑定该脚本的节点进行操作。
this.node.x就是x轴上的位置，同理y为y轴上位置；
（Cocos有两个坐标系：对于游戏内，坐标原点在最中间：而对于手指触摸则中心点在最左下角。）
好，我们把这个脚本绑定在zhu_jiao上;
然后在上下左右四个节点上把点击事件改为1，把主角节点拖过去，选脚本，选函数；
注意函数要选对应了！
然后我们运行一下看一看。
怎么样，是不是动起来了呢。
O(∩_∩)O~~
进阶：吃东西；
我们首先添加一个要被吃的对象（我改成了蓝色，改名字为food）。
然后在脚本里加入这个节点（因为我们需要检测它的位置，所以标注类型为Node）；
好，然后我们把碰撞算法写进去：
（注：使用到了碰撞算法的知识,isGet函数是封装过的，传入两个节点和距离，可以判断它们是不是碰撞上了。就是利用了勾股定理的知识）
（注：这里我贴出代码，略微复杂，注意在脚本里写完函数，如果不在一个作用域（也就是一个｛｝）内的话，调用时记得加this）
cc.Class({
extends: cc.Component,
properties: {
step:30,
food:cc.Node,
},
start () {
},
Click_shang(){
this.node.y += this.step;
//每点击一次判断是否碰撞上了
this.isGet(this.node,this.food, 100);
//因为是正方形，100是正碰撞距离，100 X 1.414 是对角线碰撞距离，
//这里我用100
},
Click_xia(){
this.node.y -= this.step;
this.isGet(this.node,this.food, 100);
},
Click_zuo(){
this.node.x -= this.step;
this.isGet(this.node,this.food, 100);
},
Click_you(){
this.node.x += this.step;
this.isGet(this.node,this.food, 100);
},
isGet(node_1 , node_2 , r){
//简单的勾股定理
var dy = node_2.y - node_1.y ;
var dx = node_2.x - node_1.x ;
if( r*r >= (dy*dy + dx*dx))
{
node_2.destroy();
//销毁这个节点
}
},
});
然后不要忘记把food节点拖过去。
OK！让我们来运行一下试一试：
在这里，只要我再点击一下上，food就会消失。
怎么样，学会了吗？
不过，这么写代码，目标是实现了，但是后续会报错，因为节点销毁后，再次运行函数就会得不到节点的x,y
怎么办呢，我们不销毁不就可以了吗！随机一个其他位置(好比贪吃蛇游戏)
因为画布是960*640的， food是100*100的正方形
因为最中间是坐标原点：所以最左边是 -480，最右边是 +480
而我们的food是正方形，也就是边长100，但是中心点在中间，所以刚好边缘时，坐标为-480+100/2 = -430
也就是说food只能在-430到430之间才不算出界；
所以我们让node_2.x = -430 + 860*Math.random()
同理写出y吧！
去试试吧！
留个思考题:
如果随机的位置跟主角重合了呢？？？（答案在最下面）
O(∩_∩)O~~
。。
。。
答案：
isGet(node_1 , node_2 , r){
//简单的勾股定理
var dy = node_2.y - node_1.y ;
var dx = node_2.x - node_1.x ;
if( r*r >= (dy*dy + dx*dx))
{
node_2.x = -430 + 860 * Math.random();
node_2.y = -270 + 540 * Math.random();
//如果随机到的位置还是处于碰撞位置，会再随机一次。
this.isGet(node_1,node_2,r);
}
},因为isGet函数内有if判断了，所以只要随机到重合位置，还会再运行一次函数，直到不重合为止。