# 九宫格抽奖游戏
本项目在[链接](https://github.com/freya0608/squaredUp)
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)
}
}
}
});
```
