jQuery实现九宫格抽奖游戏

tracy 发布于2019-08-26 10:35 / 1543人阅读

摘要：九宫格抽奖游戏本项目在链接前端布局将未选中的和选中的图片定位好图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片定位的时候，按照逆时针，这样，在旋转的时候，可以容易控制图片表示选中图片的样式没有选中图片的样式逻辑端

九宫格抽奖游戏

本项目在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)
            }
        }
    }

});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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