jQuery實現九宮格抽獎游戲

tracy 發布于2019-08-26 10:35 / 1592人閱讀

摘要：九宮格抽獎游戲本項目在鏈接前端布局將未選中的和選中的圖片定位好圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片定位的時候，按照逆時針，這樣，在旋轉的時候，可以容易控制圖片表示選中圖片的樣式沒有選中圖片的樣式邏輯端

九宮格抽獎游戲

本項目在github 鏈接

前端布局

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

圖片定位的時候，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)
            }
        }
    }

});

GPU云服務器云服務器 html 九宮格抽獎九宮格九宮格圖九宮格源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106416.html

vue開發微信商城項目總結之五--vue實現九宮格抽獎

摘要：根據產品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人信息可編輯，默認為登陸用戶，可生成訂單福幣類獎品，直接發放，可在交易明細中查看優惠劵類獎品，交易明細中根據產品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人...

CoorChice 2019-08-21 16:51 評論0 收藏0
vue抽獎組件之九宮格

摘要：寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度谷歌求教，久而久之便養成了伸手即來的本領。。。可能是出于懶的原因沒錯，就是因為懶，從未發表過技術文章或開發經驗，深感慚愧，故洗心革面，決心分享一些東西。寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度/谷歌求教，久而久之便養成了伸手即來的‘本領’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發表過技...

wenhai.he 2019-08-30 15:54 評論0 收藏0
vue抽獎組件之九宮格

摘要：寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度谷歌求教，久而久之便養成了伸手即來的本領。。。可能是出于懶的原因沒錯，就是因為懶，從未發表過技術文章或開發經驗，深感慚愧，故洗心革面，決心分享一些東西。寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度/谷歌求教，久而久之便養成了伸手即來的‘本領’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發表過技...

dendoink 2019-08-23 14:11 評論0 收藏0
九宮格抽獎--手擼代碼

摘要：總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結一下效果類似與跑馬燈效果，閃動效果先快后慢。總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結一下效果,類似與跑馬燈效果，閃動效果先快后慢。代碼解析如下所示：代碼 0 ...

zhou_you 2019-08-23 13:13 評論0 收藏0
九宮格抽獎--手擼代碼

摘要：總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結一下效果類似與跑馬燈效果，閃動效果先快后慢。總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結一下效果,類似與跑馬燈效果，閃動效果先快后慢。代碼解析如下所示：代碼 0 ...

ChanceWong 2019-08-02 12:00 評論0 收藏0