CocosCreator之KUOKUO带你用递归函数实现物体连续运动到指定位置

本次引擎2.0.5

编辑工具VSCode

如遇不会某个步骤可以先过一遍之前教程，或者下方评论，感谢支持！

 

目标：递归连续运动到点

在游戏中，有时候我们会设置好某几个地方让怪物不断的移动或者移动一次，怎么做呢？

CocosCreator给我们提供了sequence这个顺序函数，但是不够灵活。

我们可以用callFunc与递归的组合来实现灵活的runAction配置。

 

好了，熟悉的教学流程，我们新建个项目然后给个白色单色背景；

然后我们再弄个红色单色快快当主角：

然后我们弄个zhujue.js脚本绑在主角上。

假如我们想让它运动到（0,0）再到（200,200）；

通常我们会这么写：

cc.Class({
    extends: cc.Component,

    properties: {
    },
    
    onLoad () {
        var act_1 = cc.moveTo(2,0,0);
        var act_2 = cc.moveTo(2,200,200);
        this.node.runAction(cc.sequence(act_1,act_2));
    },

});

这样：

但是假如我想运动很多点，或者说不固定次数，sequence就很难做到。

怎么办呢？

我们先了解一下递归！！

递归就是函数调用自身实现嵌套的这种。

这样：

cc.Class({
    extends: cc.Component,

    properties: {
    },
    
    onLoad () {
        // 调用递归函数
        // 参数给了5
        this.diguiFun(5);
    },

    diguiFun(max) {
        // 如果这个数到了0   我们退出递归
        if (max <= 0) {
            return;
        }
        else {
            // 打印一下值便于观察
            console.log(max)
            // 再次调用  参数减去1
            this.diguiFun(max - 1);
        }
    },

});

注意：

其中的max - 1 传递参数是很重要的，这样它才可以减去1，不然会死循环。

我们看看结果：

从5到1；

我们把函数升级一下，从几到几。

cc.Class({
    extends: cc.Component,

    properties: {
    },
    
    onLoad () {
        // 调用递归函数
        // 从2 到 5
        this.diguiFun(2 , 5);
    },

    diguiFun(min , max) {
        // 如果这个数到了max   我们退出递归
        if (min == max) {
            return;
        }
        else {
            // 打印一下值便于观察
            console.log(max)
            // 再次调用  参数减去1
            this.diguiFun(min , max - 1);
        }
    },

});

怎么样，这样就可以实现从几到几的控制：

如果从小往大加呢？？

很简单，吧max不变加min就行：

我们看一下min

好了，有点小伙伴可能会问：这跟动作系统有啥关系？

嘿嘿，因为动作里可以有回调函数呀！

我贴出代码，你理解一下：

cc.Class({
    extends: cc.Component,

    properties: {
    },
    
    onLoad () {   
        // 定义一个数组    
        this.map = [];
        // 给上5个点
        this.map[0] = cc.v2(0,0);
        this.map[1] = cc.v2(-100,200);
        this.map[2] = cc.v2(200,0);
        this.map[3] = cc.v2(-300,-100);
        this.map[4] = cc.v2(20,200);
        // 从0 走到 4 ，在递归函数中判断退出那里加上1就可以改成到5
        this.diguiFun(0 , 5);
    },

    diguiFun(min , max) {
        // 如果这个数到了max   我们退出递归
        // 如果改成max + 1     就匹配了
        if (min == max) {
            return;
        }
        else {
            var call = cc.callFunc(function(){
                // 回调函数是再次递归
                this.diguiFun(min + 1 , max);
            },this);
            // 运行一个动作，然后call
            // this.map中已经存放了坐标点
            var act = cc.sequence(cc.moveTo(1,this.map[min]),call);
            this.node.runAction(act);
        }
    },

});

跟着注释理解一下，是不是不难。

看看效果：

嗯，zhujue在一个点一个点的走！

O(∩_∩)O~~