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...是文本显示的节点
