vue实现九宫格抽奖游戏

最新推荐文章于 2024-09-12 07:50:08 发布
最新推荐文章于 2024-09-12 07:50:08 发布
阅读量1.7k 收藏 9
点赞数 1
分类专栏： vue 文章标签： vue实现九宫格抽奖游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Candy_mi/article/details/101348382
版权

效果图如下

 

页面代码如下

由于原点以及图片的位置都是动态的渲染进去的,这部分代码也不细说了主要是要计算好每个图片以及原点的偏移位置,找到规律

<template>
  <div class="Sudoku" v-wechat-title="$route.meta.title">
    <div class="container-out">
      <div
        class="circle"
        v-for="(item,index) in circleList"
        :key="index"
        :style="{'top':(item.topCircle)/100+'rem','left':(item.leftCircle)/100+'rem','background-color':(index%2==0)?colorCircleFirst:colorCircleSecond}"
      ></div>

      <div class="container-in">
        <div
          class="content-out"
          v-for="(item,index) in awardList"
          :key="index"
          :style="{top:(item.topAward)/100+'rem',left:(item.leftAward)/100+'rem','background-color': (index==indexSelect)?colorAwardSelect:colorAwardDefault}"
        >
          <img class="award-image" :src="item.imageAward" />
        </div>
        <div
          class="start-btn"
          @click="startGame"
          :style="{'background-color':isRunning?'#e7930a':'#ffe400'}"
        >START</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Sudoku",
  data() {
    return {
      circleList: [], //圆点数组
      awardList: [], //奖品数组   真正渲染的列表  把每个奖品的偏移量也存放在一起
      colorCircleFirst: "#FFDF2F", //圆点颜色1
      colorCircleSecond: "#FE4D32", //圆点颜色2
      colorAwardDefault: "#F5F0FC", //奖品默认颜色
      colorAwardSelect: "#ffe400", //奖品选中颜色
      indexSelect: 0, //被选中的奖品index
      isRunning: false, //是否正在抽奖
      imageAward: [
        {
          name: "亞菲兒香水",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift1.png"
        },
        {
          name: "Gucci帽子",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift2.png"
        },
        {
          name: "再接再厉哦",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_fail1.png"
        },
        {
          name: "华为p20",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift3.png"
        },
        {
          name: "5元话费",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift4.png"
        },
        {
          name: "飞利浦剃须刀",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift5.png"
        },
        {
          name: "明日再战",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_fail2.png"
        },
        {
          name: "短柄伞",
          img:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201903/jiaoben6617/images/zWardS_gift6.png"
        }
      ] //奖品图片数组
    };
  },

  components: {},
  created() {},

  watch: {},

  mounted() {
    this.draw();
  },

  methods: {
    //画页面的原点以及每个奖品图片的位置
    draw() {
      var _this = this;
      //圆点设置的每一个位置的偏移量  总共24个原点
      var leftCircle = 7.5;
      var topCircle = 7.5;
      var circleList = [];
      for (var i = 0; i < 24; i++) {
        if (i == 0) {
          topCircle = 15;
          leftCircle = 15;
        } else if (i < 6) {
          topCircle = 7.5;
          leftCircle = leftCircle + 102.5;
        } else if (i == 6) {
          topCircle = 15;
          leftCircle = 620;
        } else if (i < 12) {
          topCircle = topCircle + 94;
          leftCircle = 620;
        } else if (i == 12) {
          topCircle = 565;
          leftCircle = 620;
        } else if (i < 18) {
          topCircle = 570;
          leftCircle = leftCircle - 102.5;
        } else if (i == 18) {
          topCircle = 565;
          leftCircle = 15;
        } else if (i < 24) {
          topCircle = topCircle - 94;
          leftCircle = 7.5;
        } else {
          return;
        }
        circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
      }

      _this.circleList = circleList; //原点

      //设置圆点闪烁
      setInterval(function() {
        if (_this.colorCircleFirst == "#FFDF2F") {
          _this.colorCircleFirst = "#FE4D32";
          _this.colorCircleSecond = "#FFDF2F";
        } else {
          _this.colorCircleFirst = "#FFDF2F";
          _this.colorCircleSecond = "#FE4D32";
        }
      }, 500); //设置圆点闪烁的效果


      //奖品item设置
      var awardList = [];

      //间距,怎么顺眼怎么设置吧.
      var topAward = 25;
      var leftAward = 25;
      for (var j = 0; j < 8; j++) {
        if (j == 0) {
          topAward = 25;
          leftAward = 25;
        } else if (j < 3) {
          topAward = topAward;
          //166.6666是宽.15是间距.下同
          leftAward = leftAward + 166.6666 + 15;
        } else if (j < 5) {
          leftAward = leftAward;
          //150是高,15是间距,下同
          topAward = topAward + 150 + 15;
        } else if (j < 7) {
          leftAward = leftAward - 166.6666 - 15;
          topAward = topAward;
        } else if (j < 8) {
          leftAward = leftAward;
          topAward = topAward - 150 - 15;
        }

        var imageAward = _this.imageAward[j];
        awardList.push({
          topAward: topAward,
          leftAward: leftAward,
          name: imageAward.name,
          imageAward: imageAward.img
        });
      }

      _this.awardList = awardList;
    },

    //开始抽奖
    startGame: function() {
      if (this.isRunning) return;

      this.isRunning = true; //静止点击
      var _this = this;
      var indexSelect = 0; //默认从0开始
      var i = 0; //控制速度的

      var timer = setInterval(function() {
        indexSelect++;
        //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
        i += 30;
        indexSelect = indexSelect % 8;
        _this.indexSelect = indexSelect;

        //固定下标停止,当满足转动时间并且奖品下标是3的时候停止定时器
        if (i > 1000 && indexSelect == 3) {
          //去除循环
          clearInterval(timer);

          vant.Dialog.alert({
            title: "恭喜",
            message: "获得了" + _this.awardList[3].name
            //当点击了弹框确定之后  重置开始按钮状态并且重置获奖下标从0开始
          }).then(() => {
            _this.isRunning = false;
            _this.indexSelect = 0;
          });
        }
      }, 200 + i);
    }
  },

  computed: {}
};
</script>


<style  scoped lang="scss">
@import "../../common/common";

/**index.wxss**/

.container-out {
  height: 6rem;
  width: 6.5rem;
  background-color: #b136b9;
  margin: 1rem auto;
  border-radius: 0.4rem;
  box-shadow: 0 0.1px 0 #871a8e;
  position: relative;
}

.container-in {
  width: 5.8rem;
  height: 5.3rem;
  background-color: #871a8e;
  border-radius: 0.4rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/**小圆球
box-shadow: inset 3px 3px 3px #fff2af;*/
.circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 0.2rem;
  width: 0.2rem;
}

.content-out {
  position: absolute;
  height: 1.5rem;
  width: 1.666666rem;
  background-color: #f5f0fc;
  border-radius: 0.15rem;
  box-shadow: 0 0.05px 0 #d87fde;
}

/**居中 加粗*/

.start-btn {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1.5rem;
  width: 1.666666rem;
  background-color: #ffe400;
  box-shadow: 0 0.05px 0 #e7930a;
  color: #f6251e;
  text-align: center;
  font-size: 0.4rem;
  font-weight: bolder;
  line-height: 1.5rem;
}

.award-image {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1.4rem;
  width: 1.3rem;
}
</style>

 

面壁思过程
关注
专栏目录
vue写一个简单的九宫格抽奖
CQXXTXX的博客
11-03 1518
vue实现九宫格抽奖
vue.js手机h5动态九宫格抽奖html源码
08-17
vue.js手机h5动态九宫格抽奖html源码,基于VUE框架自定义动态数据抽奖奖品，九宫格转盘抽奖效果。特定：随机转动抽奖，自定义奖品个数，中奖弹窗等主要特点。
vue -- 九宫格抽奖
weixin_34232363的博客
11-28 168
html： <div class="line_item" :class="index == 1 ? 'active' : 'white_item'"> <div>有礼</div> </div> <div class="line_item" :class="index == 2 ? 'active' : 'white_item'"&g...
Vue 幸运转盘插件 - `vue-lucky-draw` 完全指南
最新发布
gitblog_00373的博客
09-12 631
Vue 幸运转盘插件 - vue-lucky-draw 完全指南 项目地址:https://gitcode.com/gh_mirrors/vu/vue-lucky-draw 项目介绍 Vue Lucky Draw 是一个高度可定制化的基于 Vue.js 的大转盘抽奖组件。开发者可以通过这个插件轻松地在 Vue 应用中集成趣味性的抽奖功能。奖品、文字、以及各种视觉样式都能灵活配置，满足不同场景下的...
vue实现九宫格抽奖
xiaoququ的博客
09-04 9238
html <div class="gameBox"> <div class="bg1"></div> <div class="bg2" v-show="lampShow"></div> <div class="start" @click="move"> <p>（{{numb...
vue-九宫格抽奖
weixin_50367873的博客
09-19 555
vue九宫格抽奖系统
错误：'(QMessageBox::Icon)1u' cannot be used as a function
Suger Mike的博客
06-15 2299
程序代码如下： void MainWindow::on_commandLinkButton_clicked(){ if(this->currentImage == 4)   this->currentImage = 0;   else   this->currentImage ++;//更新当前图片   QString fileName
html+css、vue九宫格抽奖web页面源码，js九宫格抽奖代码
05-14
通过学习和理解这个九宫格抽奖项目，开发者不仅可以掌握前端开发的基本技能，还能深入理解如何使用Vue.js进行状态管理以及如何用JavaScript实现动态效果，这些都是现代Web开发中的重要技术。同时，这个项目也是实践...
基于vue.js实现的九宫格抽奖代码
06-11
【Vue.js九宫格抽奖代码实现详解】 Vue.js是一款轻量级的前端JavaScript框架，以其易学易用、高效和可复用性受到广大开发者喜爱。在这个基于Vue.js的九宫格抽奖项目中，我们将深入探讨如何利用Vue.js构建一个交互式...
vue九宫格抽奖功能
Lval的博客
04-04 2668
vue九宫格抽奖 页面结构 1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="gift-box"> <ul> <li :class="[index==0?'active':'']">一等奖</li> <li :class="[index==1?'active':'']"&...
基于VUE实现的九宫格抽奖功能
12-29
先给大家展示下效果图： HTML代码： <title-bar :title=title></title-bar> 我的积分: 1000
九宫格抽奖，转盘抽奖打包下载，可调中奖率
12-15
九宫格抽奖，转盘抽奖打包下载，可调中奖率，采用html5 js jquery开发
vue翻牌抽奖游戏效果html移动端模板
04-12
vue翻牌抽奖游戏html移动端模板，前端模板，后端需要自己写api
Vue 九宫格抽奖实现
codingLeader的博客
06-24 2244
Vue实现九宫格抽奖
vue九宫格随机抽奖
weixin_42729938的博客
03-27 1840
html代码 <div class="cj_box"> <div class="line_item" :class="index == 1 ? 'active' : 'white_item'"> <div>洗碗</div> </div> <div class="line_ite...
vue3九宫格抽奖
huai42717的博客
09-07 558
vue九宫格抽奖
Vue实现九宫格抽奖功能详解
在这个基于Vue实现的九宫格抽奖功能中，我们可以看到以下几个关键知识点： 1. **Vue组件（Components）**：Vue的核心特性之一是组件化，可以看到`<title-bar>`就是一个自定义组件，用于显示抽奖标题。组件是可复用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值