# 九宮格抽獎游戲
本項目在[鏈接](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)
}
}
}
});
```
