九宫格抽奖小程序开发

实现效果：

wepy2小程序代码

<style lang="less" scoped>
.draw_box {
  // position: relative;
  // width: 600rpx;
  // height: 600rpx;
  width: 600rpx;
  height: 600rpx;
  display: flex;
  justify-items: center;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: changeBg .5s ease infinite;
  // background-image: url("http://demo.html5code.net/demo/1060/img/k1.png");
}
 @keyframes changeBg{
  0%{background-image:url(http://demo.html5code.net/demo/1060/img/k1.png)}
  100%{background-image:url(http://demo.html5code.net/demo/1060/img/k2.png)}
}
.box-wrap {
  width: 490rpx;
  height: 490rpx;
  position: relative;
  margin-left: 55rpx;
  margin-top: 50rpx;
}
.item {
  position: absolute;
  width: 150rpx;
  height: 150rpx;
  box-sizing: border-box;
  // border: 4rpx solid #888;
  text-align: center;
  background: url(http://demo.html5code.net/demo/1060/img/bg2.png) no-repeat center;
  background-size: 100% 100%;
}
.start {
  position: absolute;
  width: 150rpx;
  height: 150rpx;
  box-sizing: border-box;
  // border: 4rpx solid #888;
  text-align: center;
  background: url(http://demo.html5code.net/demo/1060/img/bg1.png) no-repeat center;
  background-size: 100% 100%;
  text-align: center;
  line-height: 150rpx;
  color: #ffffff;
}
.item.active {
  background: url(http://demo.html5code.net/demo/1060/img/bg1.png) no-repeat center;
  background-size: 100% 100%;
}
.item0,.item1,.item2 {
  top: 0;
}
.item4,.item5,.item6{
  bottom: 0;
}
.item3,.item7,.start{
  top :170rpx;
}
.item0,.item7,.item6{
  left: 0;
}
.item2,.item3,.item4{
  right :0;
}
.item1,.item5,.start{
  left:170rpx
}
</style>
<template>
  <div class="lottery-wrap">
    <div class="draw_box">
      <div class="box-wrap">
        <block v-for="(item,index) in drawPrizes">
        <div class="{{'item item'  + index }}" :class="[{ 'active' : current === index }]" data-class="{{'item'  + index }}">
          <div class="img-wrap">
            <img :src="item.imgUrl">
          </div>
          <div class="name">{{item.title}} {{item.class}}</div>
        </div>
        </block>
        <div class="start">
          <div class="start-btn"  @click="start">开始抽奖</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
wepy.page({
  store,
  data: {
    drawPrizes: [
      {
        imgUrl: '../assets/images/normal.png',
        title: '一等奖',
        prizeIndex: 0
      },
      {
        imgUrl: '../assets/images/normal.png',
        title: '二等奖',
        prizeIndex: 1
      },
      {
        imgUrl: '../assets/images/normal.png',
        title: '三等奖',
        prizeIndex: 2
      },
      {
        imgUrl: '../assets/images/normal.png',
        title: '四等奖',
        prizeIndex: 3
      },
      {
        imgUrl: '../assets/images/normal.png',
        title: '五等奖',
        prizeIndex: 4
      },
      {
        imgUrl: '../assets/images/normal.png',
        title: '六等奖',
        prizeIndex: 5
      },
      {
        imgUrl: '../assets/images/normal.png',
        title: '七等奖',
        prizeIndex: 6
      },
      {
        imgUrl: '../assets/images/normal.png',
        title: '八等奖',
        prizeIndex: 7
      }
    ],
    current: -1, // 当前激活选择奖项 当前转动到哪个位置，起点位置
    timer: null,
    speed: 200,  // 初始转动速度
    times: 0,    // 转动次数
    cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1,   // 中奖位置
    click: true
  },
  computed: {
  },
  watch: {
    sysLogined (curVal, oldVal) {
      this.isLogin = curVal
    }
  },
  created() {
  },
  methods: {
    start() {
      if (!this.click) { return }
      this.startRoll()
    },
    startRoll() {
      const self = this
      self.click = false
      this.timer = setTimeout(() => {
        self.times += 1 // 转动次数
        let index = self.current  // 当前转动到哪个位置
        const count = self.drawPrizes.length  // 总共有多少个位置
        index += 1
        if (index > count - 1) {
          index = 0
        }
        self.current = index
        if (self.times > self.cycle + 10 && self.prize === self.current) {
          clearTimeout(self.timer)   // 清除转动定时器，停止转动
          self.prize = -1
          self.speed = 200
          self.times = 0
          self.click = true
          console.log('你已经中奖了')
          return false
        } else {
          if (self.times < self.cycle) {
            self.speed -= 10   // 加快转动速度
          } else if (self.times === self.cycle) {    // 随机获得一个中奖位置 (中奖位置，可由后台返回)
            let index = parseInt(Math.random() * 10, 0) || 0
            if (index > 7) {
              index = 7
            }
            setTimeout(() => {
              // self.prize = 6
              self.prize = index
            }, 3000)
            console.log(`中奖位置${index}`)
          } else if (self.times > self.cycle + 10 &&
          ((self.prize === 0 && self.current === 7) || self.prize === self.current + 1)) {
            self.speed += 110
          } else {
            self.speed += 20
          }
          if (self.speed < 40) {
            self.speed = 40
          }
        }
        self.startRoll()
      }, self.speed)
    }
  },
  onLoad(options) {
  },
  onShow() {
  }
})
</script>
<config>
{
    navigationBarTitleText: '抽奖大转盘',
    usingComponents: {
    }
}
</config>

实现思路：

1、周围闪动的动画效果，由UI提供两种状态的背景图，然后通过css帧动画切换就可以实现。

2、返回的中奖概率和结果，我们前端强烈要求后端计算，前端计算概率的话，如果被人破解，这个锅我们是背不起的。

3、九宫格的样式，我们通过absolute定位， 然后通过left 和 top值 去定位具体的九个格子。

4、我们点击开始后，使用setTimeOut + speed参数，就能控制转动加速和减速效果了。