1. 程式人生 > >仿*老*虎*機 無須重置,轉動自然

仿*老*虎*機 無須重置,轉動自然

<div class="boxLeft box"></div>
<div class="boxCenter box"></div>
<div class="boxRight box"></div>
    var prizeList_g = [1,2,3,11,11,11];//獎項一等獎二等獎 不中獎
    $('.play').on('click', function () {
    	let prizeListNum = parseInt(Math.random()*prizeList_g.length);
    	if(isAnimate){
        	slot.zhuan(slot.judging_award( prizeList_g[prizeListNum]));      	
//      	slot.zhuan(slot.judging_award(num));//幾等獎, 引數num為數字  1,2,3,不中獎為11  用作專案,ajax獲取num	
            $('.yuanpan').attr('src','images/yuanpan.gif');
            $('#sound')[0].play();      	
    	  	isAnimate = false;
    	}
    });
    var slot = {
    	setPrizeListLength : 3,//設定獎項數量,排除不中獎
     	prizeHeight : 130, //每一個獎品單圖的高度
     	rotate_speed : 2,//獎品圖片的轉動速度
     	last_box_postionY : [0,0,0],//上次獎品停留位置
    	judging_award : function(award_kind){//編譯獎項	引數為123... 不中獎11
    		let self = this;
	    	let num_arr = [],setPrizeList =self.creatPrizeList() ;
	    	if(award_kind ==11){
	    		let arr0 = [];
	    		for (let i = 0;i < self.setPrizeListLength;i++) {
		    		let listNum = parseInt(Math.random()*setPrizeList.length);
		    		arr0.push(setPrizeList[listNum]);
		    		if(i > 0){
		    			setPrizeList.splice(listNum,1);
		    		}
		    		console.log(setPrizeList+'\n'+arr0)
		    	}

		        num_arr = self.upsetArr(arr0);
	    	}else{
	    		num_arr = [award_kind,award_kind,award_kind]
	    	}	
	    	console.log('--------------獎品分佈:'+num_arr)
	    	return num_arr;
	    },
	    creatPrizeList : function(){
	    	return [1,2,3]
	    },
	    upsetArr : function(arr){//打亂陣列
	        for(let i = 0,len = arr.length; i < len; i++){
				let currentRandom = parseInt(Math.random() * (len - 1));
				let current = arr[i];
				arr[i] = arr[currentRandom];
				arr[currentRandom] = current;
				return arr;
			}
	    },
	    zhuan : function(num_arr) {//轉起來 引數是陣列[1,2,3] 代表三個要顯示的獎品圖案
	    	let self = this;
	    	num_arr = num_arr ||[0,0,0];
	        $(".box").each(function(index){
	            var _num = $(this);
	            	console.log('上一次的位置'+index+':'+self.last_box_postionY[index]+'\n'+"要移動的位置:"+self.prizeHeight*(num_arr[index])+'\n'+"取餘的數值||需要刪除的位置:"+self.last_box_postionY[index]%(self.prizeHeight*3));
//	            	self.last_box_postionY[index] = self.last_box_postionY[index]+(prizeHeight*(num_arr[index]))+ self.prizeHeight*60-(self.last_box_postionY[index]%(self.prizeHeight*3));
	            	self.last_box_postionY[index] = self.last_box_postionY[index]+(self.prizeHeight*(num_arr[index]+self.rotate_speed*30))-(self.last_box_postionY[index]%(self.prizeHeight*3));         	
	            	console.log('這一次的位置:'+self.last_box_postionY[index]);
	                _num.animate({
	                    backgroundPositionY: self.last_box_postionY[index]
	                },{
	                    duration: 2000+index*3000,
	                    easing: "easeOutQuint",
	                    complete: function(){
	                        if(index==2){                         	
	                            isAnimate = true;                      
	                            if(num_arr[0]==num_arr[1]&&num_arr[1]==num_arr[2]){
	                            	if(num_arr[0]==1){
	                            		console.log('中獎一等獎');
	                            	}
	                                console.log('中獎了');
	                            }else{
	                                console.log('未中獎');                           	
	                            }                            
	                        }
	                        $('.yuanpan').attr('src','images/yuanpan.png');
	                        $('#sound')[0].pause();
	                        
	                    }
	                });
	        });
	    }
    }