jQuery實現九宮格抽獎遊戲

九宮格抽獎遊戲

本項目在github 連接

1. 前端佈局

將未選中的和選中的圖片定位好

<div class="nomal">
    <img class="quanNomal quan0" src="./img/quan0.png" alt="">
    <img class="quanNomal quan1" src="./img/quan1.png" alt="圖片">
    <img class="quanNomal quan2" src="./img/quan2.png" alt="圖片">
    <img class="quanNomal quan7" src="./img/quan7.png" alt="圖片">
    <div class="chou-tap">
        <img class="chou"  src="./img/chou.png" alt="圖片">
    </div>
    <img class="quanNomal quan3" src="./img/quan3.png" alt="圖片">
    <img class="quanNomal quan6" src="./img/quan6.png" alt="圖片">
    <img class="quanNomal quan5" src="./img/quan5.png" alt="圖片">
    <img class="quanNomal quan4" src="./img/quan4.png" alt="圖片">
</div>
<div class="quan-border">
    <img class="quanq quan0_1" src="./img/quan0_1.png" alt="圖片">
    <img class="quanq quan1_1" src="./img/quan1_1.png" alt="圖片">
    <img class="quanq quan2_1" src="./img/quan2_1.png" alt="圖片">
    <img class="quanq quan7_1" src="./img/quan7_1.png" alt="圖片">
    <img class="quanq quan3_1" src="./img/quan3_1.png" alt="圖片">
    <img class="quanq quan6_1" src="./img/quan6_1.png" alt="圖片">
    <img class="quanq quan5_1" src="./img/quan5_1.png" alt="圖片">
    <img class="quanq quan4_1" src="./img/quan4_1.png" alt="圖片">
</div>

圖片定位的時候，class按照逆時針0.1.2.3.4.5.6.7，這樣，在旋轉的時候，能夠容易控制圖片
quan5_1.png表示選中圖片的樣式；quan5.png沒有選中圖片的樣式

$(".nomal").css({
    height:$(".nomal").width(),
    zIndex:1
});
$(".quan-border").css({
    height:$(".quan-border").width()
});
$(".quan0").css({"left":"9%","top":'10%'});
$(".quan0_1").css({"left":"9%","top":'10%'});
$(".quan1").css({"left":"37%","top":'10%'});
$(".quan1_1").css({"left":"37%","top":'10%'});
$(".quan2").css({"left":"65%","top":'10%'});
$(".quan2_1").css({"left":"65%","top":'10%'});
$(".quan7").css({"left":"9%","top":'37%'});
$(".quan7_1").css({"left":"9%","top":'37%'});
$(".quan3").css({"left":"65%","top":'37%'});
$(".quan3_1").css({"left":"65%","top":'37%'});
$(".quan6").css({"left":"9%","top":'64%'});
$(".quan6_1").css({"left":"9%","top":'64%'});
$(".quan5").css({"left":"37%","top":'64%'});
$(".quan5_1").css({"left":"37%","top":'64%'});
$(".quan4").css({"left":"65%","top":'64%'});
$(".quan4_1").css({"left":"65%","top":'64%'});

2 . 邏輯端處理

let end,round= 2,ms = 150; //round表示轉幾圈後開始抽獎，ms控制抽獎轉圈速度，//end表示抽到的積分或者券
var flag = true;   //防止重複點擊
$(".chou-tap").click(function (e) {
    console.log('click')
    e.preventDefault();
 if(!flag){
  return;
 }
 flag = false; // 設
 //end表示抽到的位子
  end = 5;
    getPrize(0,end,round,ms);
    function getPrize(start,end,round,interval){
        var nowNum = start;
        var myRound = round;
        rotation();
        function rotation(){
            if( myRound > 0 ){
                setTimeout(function(){
                    nowNum++;
                    if(nowNum > 7){
                        nowNum = 0;
                        myRound--;
                    }
                    // console.log('block',$('.quan'+nowNum+"_1"))
                    $('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});
                    $('.quan'+nowNum+"_1").siblings().css({"display":"none"}); //沒有選中的不顯示
                    // console.log('nowNum:',nowNum,'myRound:',myRound);
                    rotation();     //遞歸調用
                },interval);
            }else if(myRound === 0){  //最後一圈的時候
                setTimeout(function(){
                    // console.log('nowNum:',nowNum,'myRound:',myRound);
                    $('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});
                    $('.quan'+nowNum+"_1").siblings().css({"display":"none"});
                    if( nowNum != end ){
                        nowNum++;
                        rotation();  //在最後一圈，可是尚未到達想要的位置，繼續遞歸。
                    }else{

                        //這裏寫彈窗
                        flag = true;

                        return null;
                    }
                },interval)
            }
        }
    }

});