JavaScript抽奖翻牌游戏/定义数组保存传入参数数组，避免操作传入数组/洗牌动作队列洗牌及翻牌效果

来源：互联网发布：windows isa 编辑：程序博客网时间：2024/06/03 07:16

                    <div id="chanceTip" class="chanceTip middle">                        <span>还剩余<i id="clickCount"></i>次翻牌机会</span>                    </div>                    <ul id="giftSlide">                        <li class="gift1 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt1.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                        <li class="gift2 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt2.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                        <li class="gift3 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt3.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                                                  <li class="gift4 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt6.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                        <li class="gift5 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt9.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                        <li class="gift6 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt8.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                        <li class="gift7 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt7.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                        <li class="gift8 giftButt"><img class="prizeImg" src="images/prizeImg/GameButt4.png" /><img class="prizeBg" src="images/prizeImg/back.png" /></li>                                              </ul>                </div>            </div>

var list = [‘class1’,’class2’];
var randList = getEle(list, 2);
//翻牌操作
giftButt.on(‘click’,function(){
        var _this =(this);
if(_this.hasClass(‘giftButt’)){
if(!joinButt.hasClass(‘success’)){
                //autoClose(notjoinTip); //弹出并自动关闭未填写资料弹窗
alertShow(notjoinTip);// 未填写资料弹窗

        }        else{            if($isActive){                if($time > 0){                    $isActive = false;                    $clickNum--;  //次数自减1传给后台                $.ajax({                    type:'get',                        url:'winlist.txt',                        dataType:'json',                        data:{number:$clickNum,activityname:document.title},                        success:function(result){                            if(result.status == 1){                                $time--;  //成功返回后前端次数自减1                                $count.html($time);                                _this.removeClass('giftButt');                                //alertShow(receivetreeTip);//OK                                if(_this.hasClass(randList[0])) {  //抽中黄金宝典                                    $giftButt.removeClass(randList[0]);  //防止第二次翻牌再抽中黄金宝典                                    /**判断ie浏览器的版本js**/                                    if(window.addEventListener){                                     Draw('images/prizeImg/GameButt2.png',_this);                                    }else if(window.attachEvent){                                         _this.find('.prizeBg').attr('src',"images/prizeImg/GameButt2.png");                                             //alert("is ie"); //在IE8及以下IE版本会弹出is ie结果                                    }else{                                     alert("请升级浏览器 ,否则你将无法参与，不支持DHTML的老版本浏览器！ ")                                     }/**判断ie浏览器的版本js end**/                                    $('#prize').attr('src','images/prizeImg/GameButt22.png');                                    $('#prize').attr('alt','黄金宝典');                                    setTimeout(function(){                                        //openAlert($successAlert);                                            alterTips_bg.show();                                        successTip.show();                                     },700)                                    setTimeout(function(){                                        $isActive = true;                                    },700)                                }                                else{                                    _this.removeClass('class1');                                    $giftButt.addClass(randList[0]);                                    $.ajax({                                        type:"get",                                        url:"winlist.txt",                                        dataType:"json",                                        success:function(result){                                            if(result.status == 1){                                                $('#prize').attr('alt',result.Prizename);                                                if(result.Prizename == "50元话费"){                                                    /**判断ie浏览器的版本js**/                                                    if(window.addEventListener){                                                     Draw('images/prizeImg/GameButt4.png',_this);                                                    }else if(window.attachEvent){                                                         _this.find('.prizeBg').attr('src',"images/prizeImg/GameButt4.png");                                                             }else{ alert("请升级浏览器 ,否则你将无法参与，不支持DHTML的老版本浏览器！ ")                                                     }/**判断ie浏览器的版本js end**/                                                    $('#prize').attr('src',"images/prizeImg/GameButt44.png");                                                                                                      }                                                else if(result.Prizename == "30元话费"){                                                    /**判断ie浏览器的版本js**/                                                    if(window.addEventListener){                                                     Draw('images/prizeImg/GameButt6.png',_this);                                                    }else if(window.attachEvent){                                                         _this.find('.prizeBg').attr('src',"images/prizeImg/GameButt6.png");                                                             }else{ alert("请升级浏览器 ,否则你将无法参与，不支持DHTML的老版本浏览器！ ")                                                     }/**判断ie浏览器的版本js end**/                                                    $('#prize').attr('src',"images/prizeImg/GameButt66.png");                                                }                                                else{                                                    /**判断ie浏览器的版本js**/                                                    if(window.addEventListener){                                                     Draw('images/prizeImg/GameButt8.png',_this);                                                    }else if(window.attachEvent){                                                         _this.find('.prizeBg').attr('src',"images/prizeImg/GameButt8.png");                                                             }else{ alert("请升级浏览器 ,否则你将无法参与，不支持DHTML的老版本浏览器！ ")                                                     }/**判断ie浏览器的版本js end**/                                                    $('#prize').attr('src',"images/prizeImg/GameButt88.png");                                                }                                                setTimeout(function(){                                                    alterTips_bg.show();                                                    successTip.show();                                                                                                  },700)                                            }                                            setTimeout(function(){                                                $isActive = true;                                            },700)                                        }                                    });                                }                            }                        }                    })                }                else{                    //autoClose($notChance);  //弹出并自动关闭翻牌机会用完弹窗                    alertShow(tip_repeat01);//alert('机会用完弹窗一个黄金账户只能玩一次，一次可以抽2次');                }            }        }    }})//关闭弹窗function closeTips() {    alterTips_bg.hide();    alertTips.hide();    $('.egg').show();    $('.breakegg').hide();  //还原 效果}closeButt.on('click', closeTips);  //关闭提示   $('#receiveButt').on('click', function() { //领取奖品    closeTips();    $('.alterTips').hide();     alertShow(receiveTip); })//弹出弹窗function openAlert(obj){    obj.show();    obj.find('.alertCont').addClass('active');}//关闭弹窗function closeAlert(obj){    obj.hide();    obj.find('.alertCont').removeClass('active');    if(obj.find('input').length > 0){        obj.find('input').val('');    }    if(obj.find('.error').length > 0){        obj.find('.error').hide();    }}//自动关闭弹窗function autoClose(obj){    obj.fadeIn(200);    setTimeout(function(){        obj.fadeOut(200);    },1000);}$successAlert.find('.closeAlert').click(function(){    closeAlert($successAlert)});  //关闭中奖弹窗

//读取中奖名单内容
.ajax({
        type:”get”,
        url:”winlist.txt”,
        dataType:’json’,
        success:function(result){.each(result.obj,function(index,data){
$(‘#winList’).append(‘

‘+getUserName(data.userName)+’‘+getUserTel(data.userTel)+’翻牌获得 ‘+data.prizeName+’

‘);
})
carouselUp(‘#carouselUp’);
}
});
})

/洗牌效果/
function animate(object,callback){
this.obj = (‘.′+object);this.fromX=this.obj.css(‘left′);this.fromY=this.obj.css(‘top′);this.toX=chanceTip.css(‘left’);
this.toY = $chanceTip.css(‘top’);
this.speed = 300;
var child = this.obj.children(‘.prizeImg’);

this.Focus = function(){  //收回          this.obj.animate({        left:this.toX,        top:this.toY    },this.speed,callback);    this.Bind();}this.Spread = function(){  //发出    this.obj.animate({        left:this.fromX,        top:this.fromY    },this.speed,callback);}this.Bind = function(){  //显示背面图    setTimeout(function(){        child.remove();    },this.speed);  }

}

var _callback = function(){ //终止队列函数的操作
$giftSlide.dequeue(‘animate’);
}

var giftArry = []; //保存翻牌的队列
giftArry[0] = new animate(‘gift1’,_callback);
giftArry[1] = new animate(‘gift2’,_callback);
giftArry[2] = new animate(‘gift3’,_callback);
giftArry[3] = new animate(‘gift4’,_callback);
giftArry[4] = new animate(‘gift5’,_callback);
giftArry[5] = new animate(‘gift6’,_callback);
giftArry[6] = new animate(‘gift7’,_callback);
giftArry[7] = new animate(‘gift8’,_callback);

//保存洗牌动作队列
var animateArry = [function(){giftArry[0].Focus();},function(){giftArry[1].Focus();},function(){giftArry[2].Focus();},function(){giftArry[3].Focus();},function(){giftArry[4].Focus();},function(){giftArry[5].Focus();},function(){giftArry[6].Focus();},function(){giftArry[7].Focus();},function(){giftArry[0].Spread();},function(){giftArry[1].Spread();},function(){giftArry[2].Spread();},function(){giftArry[3].Spread();},function(){giftArry[4].Spread();},function(){giftArry[5].Spread();},function(){giftArry[6].Spread();},function(){giftArry[7].Spread();},function(){$isActive=true;}];
/洗牌效果/

/翻牌效果/
function Draw(imgUrl,obj){
obj.append(‘’);
obj.find(‘.prizeImg2’).addClass(‘active’);
obj.find(‘.prizeBg’).addClass(‘active’);
}

阅读全文

0 0