cocos2d-js翻牌效果实现方式

var BattleLayer = cc.LayerColor.extend({
    _battleList: [], //存储章节列表
    ctor: function () {
        this._super(cc.color(220, 220, 220, 255));

        this.initCard();
    },
    initCard: function () {
        for (var i = 1; i < 5; i++) {
            var posX = 100 + 100 * i;
            var pos = cc.p(posX, GC.h_2);
            //选关正面
            var front = new cc.Sprite(res.ba_card_gates_png);
            front.setPosition(pos);
            front.setVisible(false); //设置正面隐藏
            this.addChild(front, 0, -i);

            //章节介绍
            var back = new cc.Sprite('res/battle/card_' + i + '.png');
            back.setPosition(pos);
            this.addChild(back, 0, i);

            var listener = cc.EventListener.create({
                event: cc.EventListener.TOUCH_ONE_BY_ONE,
                swallowTouches: true,
                onTouchBegan: function (touch, event) {
                    var target = event.getCurrentTarget();  // 获取事件所绑定的 target, 通常是cc.Node及其子类

                    // 获取当前触摸点相对于按钮所在的坐标
                    var locationInNode = target.convertToNodeSpace(touch.getLocation());
                    var s = target.getContentSize();
                    var rect = cc.rect(0, 0, s.width, s.height);

                    if (cc.rectContainsPoint(rect, locationInNode)) { // 判断触摸点是否在按钮范围内
                        target.parent.onOpen(target); //翻转处理

                        return true;
                    }
                }
            });
            cc.eventManager.addListener(listener, back);
            //压入数组存储
            this._battleList.push({'front': front, 'back': back});
        }
    },
    /**
     * 翻转处理
     * @param target
     */
    onOpen: function (target) {
        // 背面z轴起始角度为0度，然后向右旋转90度
        var orbitBack = cc.orbitCamera(0.5, 1, 0, 0, -90, 0, 0);
        // 正面z轴起始角度为90度（向左旋转90度），然后向右旋转90度
        var orbitFront = cc.orbitCamera(0.5, 1, 0, 90, -90, 0, 0);

        //第二次翻转回去
        if (!target.visible) {
            var targetFront = target.parent.getChildByTag(-target.getTag()); //获得正面精灵
            targetFront.runAction(cc.sequence(orbitBack, cc.hide(),
                cc.callFunc(function () {
                    target.runAction(cc.sequence(cc.show(), orbitFront));
                })
            ));
            return true;
        }

        //第一次翻转
        var targetFront = target.parent.getChildByTag(-target.getTag()); //获得正面精灵
        target.runAction(cc.sequence(orbitBack, cc.hide(),
            cc.callFunc(function () {
                targetFront.runAction(cc.sequence(cc.show(), orbitFront));
            })
        ));
    }
});