Cocos2d-js做的一个老虎机效果抽奖

/**
 * 

创建一个矩形遮罩

node.initSlotMachine = function(){
    //创建一个矩形遮罩
    var clipNode = cc.ClippingNode.create();
    clipNode.setAnchorPoint(cc.POINT_ZERO);
    node.node_huodezuanshishu.addChild(clipNode);

    var stencilRect_originX = node.spr_shuzikuang1.getPositionX()-node.spr_shuzikuang1.getContentSize().width/2;//X坐标
    var stencilRect_originY = node.spr_shuzikuang1.getPositionY()-node.spr_shuzikuang1.getContentSize().height/2 + 20;//Y坐标
    var stencilRect_width = node.spr_shuzikuang1.getPositionX()-node.spr_shuzikuang1.getPositionX()+node.spr_shuzikuang1.getContentSize().width;
    var stencilRect_height = node.spr_shuzikuang1.getContentSize().height - 40;  //高度
    var stencilNode =cc.DrawNode.create();
    stencilNode.clear();//[cc.p(0, 0),cc.p(0, 100), cc.p(200, 100), cc.p(0, 200)], //矩形  多边形的点
    stencilNode.drawPoly([cc.p(stencilRect_originX+20,stencilRect_originY),
                             cc.p(stencilRect_originX,stencilRect_originY+stencilRect_height),
                             cc.p(stencilRect_originX+stencilRect_width,stencilRect_originY+stencilRect_height),
                             cc.p(stencilRect_originX+20+stencilRect_width,stencilRect_originY)],cc.c4f(1, 0, 0, 1),1,cc.c4f(1, 0, 0, 1));

    clipNode.setStencil(stencilNode);
    node.numLabelOriginPos = [];//数字在窗口中间的坐标
    //把5个label放到clippingNode里当底板,在这之前，记录5个label在正中时的位置
    var labelContentSize = node["ttf_shuzi1"].getContentSize();
    numLabelDistanceY = stencilRect_height/2+labelContentSize.height/2;
    for(var i=1;i<=5;i++){
        var middlePos = node["ttf_shuzi"+i].getPosition();
        node.numLabelOriginPos.push(middlePos);
        //node.numLabelTopPos.push(cc.p(middlePos.x,middlePos.y+stencilRect_height/2+labelContentSize.height/2));
        //node.numLabelBottomPos.push(cc.p(middlePos.x,middlePos.y-stencilRect_height/2-labelContentSize.height/2));
        node["ttf_shuzi"+i].retain();
        node["ttf_shuzi"+i].removeFromParent();
        clipNode.addChild(node["ttf_shuzi"+i]);
        node["ttf_shuzi"+i].release();

        node["ttf_shuzi"+i].setString('0');

        //在底下在创建一个label
        node["ttf_shuzidown_"+i] = node["ttf_shuzi"+i].copyNode();
        node["ttf_shuzidown_"+i].setPosition(cc.p(middlePos.x,middlePos.y-numLabelDistanceY));
        node["ttf_shuzidown_"+i].setString("1");
        node["ttf_shuzidown_"+i].ownerName = "ttf_shuzidown_"+i;
        clipNode.addChild(node["ttf_shuzidown_"+i]);

        node["ttf_shuzi"+i].nextLabel = node["ttf_shuzidown_"+i];
        node["ttf_shuzidown_"+i].nextLabel = node["ttf_shuzi"+i];
        //console.log(node["ttf_shuzi"+i].nextLabel);
    }
}

/**
 * 老虎机显示数字

 */
node.machineShowNumbers = function(num){
    var numStr = num = ""+parseInt(num);
    for(var i = 0;i<5-num.length;i++){
        numStr = '0' + numStr;
    }
    numStr = numStr.substr(numStr.length-5,5);
    console.log("展示 ",numStr);


    var repeatCount = 4;//执行次数影响，repeat结束时显示几，(2*(n+1))%10,4次的话，所有的齿轮正好转了1圈,至少让他们转一圈
    var labelStopFlags = [false,false,false,false,false];

    var t1 = 1.0;//慢慢加速阶段,跑到上一格用的时间
    var t2 = 0.07;//匀速阶段，跑到上一格用的时间
    var t3 = 1.0;//最后阶段，慢慢停下来用的时间

    //先由慢之快转动第一个数字到上边，同时第二个数字显示到了中间
    var getCallFuncSetLabelToBottom = function(label){//该函数返回使label回到下方位置的动作(上，中(可视位置)，下)
        return cc.CallFunc.create(function(){
            label.setString(node.getNextNum(node.getNextNum(parseInt(label.getString()))));
            label.setPositionY(node.numLabelOriginPos[0].y-numLabelDistanceY);
        });
    }
    var getCallFuncCheckShouldStop = function(label,index){//检查和执行停下来的动作,index:[1,5]
        return cc.CallFunc.create(function(){
            if(index > 1 && !labelStopFlags[index-2]){//前面的还没停下来
                return;
            }
            //检查中间显示的数字是否是最后结果的上一个数字
            var curNum = parseInt(label.getString());
            var desNum = parseInt(numStr.substr(5-index,1));
            if(node.getNextNum(curNum) == desNum){
                label.stopAllActions();
                label.nextLabel.stopAllActions();
                label.nextLabel.setString(""+desNum);
                label.nextLabel.setPosition(cc.p(node.numLabelOriginPos[index-1].x,node.numLabelOriginPos[index-1].y-numLabelDistanceY));

                var stopAction1 = cc.MoveTo.create(t3,cc.p(node.numLabelOriginPos[index-1].x,node.numLabelOriginPos[index-1].y+numLabelDistanceY));
                stopAction1 = cc.EaseOut.create(stopAction1,2); //控制速度快慢
                var stopAction2 = cc.MoveTo.create(t3,cc.p(node.numLabelOriginPos[index-1].x,node.numLabelOriginPos[index-1].y));
                stopAction2 = cc.EaseOut.create(stopAction2,2);

                setTimeout(function(){
                    labelStopFlags[index-1] = true;
                },200);
                label.runAction(stopAction1);
                label.nextLabel.runAction(stopAction2);
                if(index == 5){
                    setTimeout(function(){
                        node.slotMachineShowNumCompleted(parseInt(num));
                    },t3*1000)
                }
            }
        });
    }
    for(var i=1;i<=5;i++){
        //慢慢加速
        var action1 = cc.MoveBy.create(t1,cc.p(0,numLabelDistanceY));
        action1 = cc.EaseIn.create(action1,5);

        //匀速
        var action2 = cc.MoveBy.create(t2,cc.p(0,numLabelDistanceY));

        //label变到最下面1格的动作
        var action3_1 =  getCallFuncSetLabelToBottom(node["ttf_shuzi"+i]);
        var action3_2 =  getCallFuncSetLabelToBottom(node["ttf_shuzidown_"+i]);
        //检查是否应该停止的action
        var actionEnd_1 = getCallFuncCheckShouldStop(node["ttf_shuzi"+i],i);
        var actionEnd_2 = getCallFuncCheckShouldStop(node["ttf_shuzidown_"+i],i);
        node["ttf_shuzi"+i].runAction(cc.Sequence.create(action1,
                                                         action3_1,
                                                         action2,
                                                         cc.Repeat.create(cc.Sequence.create(
                                                             action2.copy(),
                                                             action3_1,
                                                             action2.copy()
                                                         ),repeatCount),
                                                         cc.Repeat.create(cc.Sequence.create(
                                                             actionEnd_1,
                                                             action2.copy(),
                                                             action3_1,
                                                             action2.copy()
                                                         ),cc.REPEAT_FOREVER)));
        node["ttf_shuzidown_"+i].runAction(cc.Sequence.create(action1.copy(),
                                                              action2.copy(),
                                                              action3_2,
                                                              cc.Repeat.create(cc.Sequence.create(
                                                                  action2.copy(),
                                                                  action2.copy(),
                                                                  action3_2
                                                              ),repeatCount),
                                                              cc.Repeat.create(cc.Sequence.create(
                                                                  action2.copy(),
                                                                  actionEnd_2,
                                                                  action2.copy(),
                                                                  action3_2
                                                              ),cc.REPEAT_FOREVER)));
    }

}
/**
 * 老虎机数字显示完毕
 */
node.slotMachineShowNumCompleted = function(num){
    console.log("结束了-----",num);
    activeData.loginData.times ++;
    node.updateCurGradeInfos(activeData.loginData.times);
}
/**
 * 获取0-9 10个数字下一个要显示的数字
 * @param curNum
 */
node.getNextNum = function(curNum){
    return (curNum+1)%10;
}

点击开始抽奖，五个数字开始上下滚动，速度由快到慢一个一个挨着停止，其中

node.machineShowNumbers(66246)

传进去的是中奖显示的结果数66246，就是这样的一个效果，其中代码node.ttf...是文本显示的节点