cocos2d-js自定义CheckBox

这是我自定义CheckBox的效果图：

整个CheckBox不复杂、就是继承于Sprite然后由三个精灵、加上一些动作跟监听组成

代码如下：

var CheckBox = cc.Sprite.extend({
    sliderFrame:null,       //外框
    sliderBar:null,         //  内框
    sliderThumb:null,       //  按钮
    maskLength:null,        //slider的长度
    movePosition:null,      //按钮移动的位置
    clickListener: null,    //点击的监听
    isChecked: true,        //选中状态  默认选中
    ctor: function () {
        this._super();
        winSize = cc.winSize;
        var self = this;
        //框
        var position = cc.p(winSize.width/2,winSize.height/2);
        self.sliderFrame = new cc.Sprite(res.sliderMask);
        self.sliderFrame.setPosition(position.x,position.y);
        self.movePosition = self.sliderFrame.getPosition();
        self.sliderFrame.setAnchorPoint(0,0.5);
        self.maskLength = self.sliderFrame.getContentSize().height;
        self.addChild(self.sliderFrame);

        //内框
        self.sliderBar = new cc.Sprite(res.sliderMask);
        self.sliderBar.setPosition(position.x + self.maskLength+2,position.y);
        self.sliderBar.scaleX = 0.9;
        self.sliderBar.scaleY = 0.8;
        self.addChild(self.sliderBar);
        var tint = cc.tintTo(0,113,255,57);
        self.sliderBar.runAction(tint);

        //按钮
        self.sliderThumb = new cc.Sprite(res.sliderThumb);
        self.sliderThumb.setScale(1.5);
        self.sliderThumb.setAnchorPoint(0,0.5);
        self.sliderThumb.setPosition(position.x + self.maskLength,position.y );
        self.addChild(self.sliderThumb);
    },
    onEnter: function () {
        this._super();
        var self = this;

        if (!self.isChecked){   //判断是哪种状态
            var move = new cc.moveTo(0,self.movePosition.x,self.movePosition.y);
            var fadeIn = new cc.fadeIn(0);
            self.sliderThumb.runAction(move);
            self.sliderBar.runAction(fadeIn.reverse());
        }

        self.createListener();
        cc.eventManager.addListener(self.clickListener,self.sliderFrame);
    },
    createListener: function () {
        var self = this;
        var rect;
        var fadeIn = new cc.fadeIn(0.2);
        self.clickListener= cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches:false,
            onTouchBegan: function (touche,event) {
                var point = touche.getLocation();
                rect = event.getCurrentTarget().getBoundingBoxToWorld();
                return cc.rectContainsPoint(rect, point);
            },
            onTouchEnded: function (touche) {
                var point = touche.getLocation();
                if (cc.rectContainsPoint(rect,point)){
                    //让按钮发生移动 //判断按钮在哪个位置 在左边则向右移动 在右边则向左边
                    self.sliderThumb.stopAllActions();
                    if (self.sliderThumb.getPosition().x > self.sliderFrame.getPosition().x){      // 未选中时候 在右边 向左移动
                        self.isChecked = false;   //未选中状态
                        var move = new cc.moveTo(0.2,self.movePosition.x,self.movePosition.y);
                        self.sliderBar.runAction(fadeIn.reverse());
                    }else {
                        self.isChecked = true;    //选中状态  在左边 向右移动
                        move = new cc.moveTo(0.2,self.movePosition.x + self.maskLength,self.movePosition.y);
                        self.sliderBar.runAction(fadeIn);
                    }
                    self.sliderThumb.runAction(move);
                    return true;
                }
                return false;
            }
        });
    },
    /**
     * 得到选中状态
     */
    getChecked: function () {
        return this.isChecked;
    },
    /**
     * 设置选中状态
     */
    setChecked: function (isChecked) {
        this.isChecked = isChecked;
    }
});