【cocos creator】旋转木马效果，旋转移动角色，选择角色效果

父节点代码

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        playerPic: cc.Prefab,//角色预制体
        nodeParent: cc.Node,//角色所放节点
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        this.startPosx = 0;
    },

    start() {
        //this.addEggs();
        //this.stopEggs();
    },


    setStart(id) {
        this.addEggs(id);//设置第一个显示的角色
        this.stopEggs();
    },

    // this.node 是需要移动的节点

    onLoad() {
        //节点初始位置,每次触摸结束更新
        this.nodePos = this.node.getPosition();
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
        this.startPosx = this.node.x;
        this.startPosx = this.node.y;
    },


    onTouchStart(event) {
        var self = this;
        var touches = event.getTouches();
        self.StartPos = self.node.convertToNodeSpaceAR(touches[0].getStartLocation());
    },

    //触摸移动；
    onTouchMove(event) {
        var self = this;
        var touches = event.getTouches();
        //触摸刚开始的位置
        var oldPos = self.node.convertToNodeSpaceAR(touches[0].getStartLocation());
        //触摸时不断变更的位置
        var newPos = self.node.convertToNodeSpaceAR(touches[0].getLocation());
        var subPos = oldPos.sub(newPos);
        if (this.turnStart === false) {
            for (let i = 0; i < this.mEggs.length; i++) {
                this.mEggs[i].getComponent('playPos').setMoveNext(-subPos.x / 2000);
            }
        }
        var top = 0;
        for (let i = 0; i < this.mEggs.length; i++) {
            if (this.mEggs[i].zIndex > this.mEggs[top].zIndex) {
                top = i;
            }
        }
        for (let i = 0; i < this.mEggs.length; i++) {
            if (i != top) {
                var color2 = new cc.Color(80, 80, 80);
                this.mEggs[i].color = color2;
            }
            else {
                var color2 = new cc.Color(255, 255, 255);
                this.mEggs[i].color = color2;
            }
        }
    },

    onTouchEnd() {
        this.turnStart = true;
        var self = this;
    },

    onTouchCancel: function () {
        this.nodePos = this.node.getPosition(); //获取触摸结束之后的node坐标；
        this.turnStart = true;
        var self = this;
    },


    update(dt) {
        if (this.turnStart) {
            this.stopEggs();
        }
    },


    setStartJurse(i, all) {

        return all - i;
    },


    addEggs(id) {
        this.nodeParent.removeAllChildren();
        this.mEggs = [];
        var count = 5;
        const N = 360 / count;
        for (let i = 0; i < count; i++) {
            let egg = cc.instantiate(this.playerPic);
            let js = egg.getComponent('playPos');

            //var id = this.setStartJurse(i);
            //var url = "";
            //url = "juesePic/player" + id;

            var Lid = i;
            if (i === 0) {
                Lid = (count - 1);
            }
            else {
                Lid = i + (count) - 1;
                if (Lid >= count) {
                    Lid = Lid - count;
                }
            }
            egg.name = (Lid + 1) + "";
            var Gname = id;
            var url = "guanqiaPic/0" + id;//角色图片地址
            js.setPic(Gname, url);
            js.setRadian(i * N * Math.PI / 180 - 1.55);
            js.updatePos();
            //egg.name = this.jueSes[i].name;
            egg.parent = this.nodeParent;

            this.mEggs.push(egg);
        }
        var top = 0;
        for (let i = 0; i < this.mEggs.length; i++) {
            if (this.mEggs[i].zIndex > this.mEggs[top].zIndex) {
                top = i;
            }
        }
        this.startPosx = this.mEggs[top].x;
        for (let i = 0; i < this.mEggs.length; i++) {
            if (i != top) {
                var color2 = new cc.Color(80, 80, 80);
                this.mEggs[i].color = color2;
            }
            else {
                var color2 = new cc.Color(255, 255, 255);
                this.mEggs[i].color = color2;
            }
        }
        //this.startPosx = this.mEggs[top].x;
    },

    moveEggs() {
        for (let i = 0; i < this.mEggs.length; i++) {
            this.mEggs[i].getComponent('playPos').setMove(true);
        }
    },

    stopEggs() {
        var top = 0;
        this.moveEggs();
        for (let i = 0; i < this.mEggs.length; i++) {
            if (this.mEggs[i].zIndex > this.mEggs[top].zIndex) {
                top = i;
            }
        }
        if (this.mEggs[top] && this.mEggs[top].x >= this.startPosx - 10 && this.mEggs[top].x <= this.startPosx + 10) {
            cc.log("选择了" + this.mEggs[top].name);
            //选择的角色
            //在这里做相应操作
            this.stopMove();
            this.mEggs[top].x = this.startPosx;
            this.turnStart = false;
        }
        for (let i = 0; i < this.mEggs.length; i++) {
            if (i != top) {
                var color2 = new cc.Color(80, 80, 80);
                this.mEggs[i].color = color2;
            }
            else {
                var color2 = new cc.Color(255, 255, 255);
                this.mEggs[i].color = color2;
            }
        }
    },

    stopMove() {
        for (let i = 0; i < this.mEggs.length; i++) {
            this.mEggs[i].getComponent('playPos').setMove(false);
        }
    },
    // update (dt) {},
});

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        radian: 0,// 弧度
        isMoving: false,// 是否要运动
        a: 300, // 长半径
        b: 50,// 短半径

        strL: cc.Label,
        pic: cc.Sprite,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},
    onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_START, event => {
            event.stopPropagation();
        });
    },

    start() {
        this.toRight = true;
    },

    update(dt) {

        if (this.isMoving) {
            if (this.toRight) {
                this.radian = this.radian + dt * 4;
            } else {
                this.radian = this.radian - dt * 4;
            }
            this.updatePos();
        }
    },

    setPic(str, url) {
        this.strL.string = str + "";
        var self = this;
        cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
            if (!err) {
                self.pic.getComponent(cc.Sprite).spriteFrame = spriteFrame;
            }
            else {
                cc.log("加载出错！ " + err);
            }
        });
    },

    /**
     * @description: 设置移动
     * @param {type} 
     * @return: 
     */
    setMove(isMoving) {
        this.isMoving = isMoving;
    },

    setMoveNext(n) {
        this.radian = this.radian + n;
        if (n > 0) {
            this.toRight = true;
        }
        else {
            this.toRight = false;
        }
        this.updatePos();
    },

    /**
     * @description: 设置弧度
     * @param {type} 
     * @return: 
     */
    setRadian(radian) {
        this.radian = radian;
    },

    /**
     * @description: 获取弧度
     * @param {type} 
     * @return: 
     */
    getRadian() {
        return this.radian;
    },

    /**
     * @description: 马上更新位置
     * @param {type} 
     * @return: 
     */
    updatePos() {
        this.node.x = this.a * Math.cos(this.radian);//可修改
        //this.node.y = this.b * Math.sin(this.radian);
        //this.node.x = this.a * this.radian;
        this.node.y = this.b;//可修改
        this.node.scale = 1 - Math.sin(this.radian) * 0.2;
        this.node.zIndex = this.node.scale * 100;
    },
    // update (dt) {},
});