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)
            }
        }
    }

});