cocos2d-js 搓牌

搓牌是一种常见的游戏玩法，可以使用cocos2d-js实现。以下是实现搓牌的大致流程：

1. 创建一个扑克牌的Sprite，并设置正确的纹理坐标以显示牌面。
2. 创建一个遮罩层，使用遮罩层来遮盖扑克牌的一部分，模拟搓牌的效果。
3. 监听触摸事件，根据触摸点的位置移动遮罩层，显示扑克牌的不同部分。
4. 根据触摸事件的不同状态，判断是否需要将遮罩层移动回原始位置，或者将遮罩层完全移除，显示完整的扑克牌。

以下是一个简单的实现搓牌的示例代码：

var Poker = cc.Sprite.extend({
    backTexture: null,
    mask: null,
    touchStartPos: null,

    ctor: function() {
        this._super();
        this.initWithTexture(cc.textureCache.addImage(res.poker_back_png));
        this.backTexture = cc.textureCache.addImage(res.poker_back_png);
        this.mask = cc.Sprite.create(res.poker_mask_png);
        this.mask.setAnchorPoint(0, 0.5);
        this.mask.setPosition(cc.p(-this.getContentSize().width / 2, this.getContentSize().height / 2));
        this.mask.setBlendFunc(cc.ONE, cc.ONE_MINUS_SRC_ALPHA);
        this.addChild(this.mask);
        this.initTouch();
    },

    initTouch: function() {
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            onTouchBegan: function(touch, event) {
                var target = event.getCurrentTarget();
                if (!cc.rectContainsPoint(target.getBoundingBoxToWorld(), touch.getLocation())) {
                    return false;
                }
                target.touchStartPos = touch.getLocation();
                return true;
            },
            onTouchMoved: function(touch, event) {
                var target = event.getCurrentTarget();
                var delta = touch.getDelta();
                var newPos = cc.pAdd(target.mask.getPosition(), delta);
                newPos.x = Math.max(-target.getContentSize().width / 2, newPos.x);
                newPos.x = Math.min(target.getContentSize().width / 2, newPos.x);
                target.mask.setPosition(newPos);
            },
            onTouchEnded: function(touch, event) {
                var target = event.getCurrentTarget();
                var distance = cc.pDistance(target.touchStartPos, touch.getLocation());
                if (distance < 10) {
                    target.showBack();
                } else if (target.mask.getPositionX() > -30) {
                    target.showFront();
                } else {
                    target.hideMask();
                }
            }
        }, this);
    },

    showFront: function() {
        this.setTexture(cc.textureCache.addImage(res.poker_front_png));
        this.mask.removeFromParent();
    },

    showBack: function() {
        this.setTexture(this.backTexture);
        this.mask.setPosition(cc.p(-this.getContentSize().width / 2, this.getContentSize().height / 2));
    },

    hideMask: function() {
        this.mask.runAction(cc.fadeOut(0.2));
    }
});

在上面的代码中，我们创建了一个Poker对象，继承了cc.Sprite，并添加了一个遮罩层来模拟搓牌的效果。我们监听了触摸事件，并根据触摸点的位置移动遮罩层，显示牌面的不同部分。在触摸事件结束时，根据遮罩层的位置，判断是否需要显示完整的牌面，或者将遮罩层移回原始位置。

通过这个示例，我们可以学习到如何在cocos2d-js中实现搓牌效果，并且可以根据实际需求进行扩展和优化。