vue实现九宫格抽奖游戏_闪烁抽奖 vue-CSDN博客

本文链接：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>