html转盘游戏,html5大转盘抽奖实例源码(基于vue.js)

以下是一个基于Vue.js的HTML5大转盘抽奖实例源码：

<template>
  <div class="roulette">
    <canvas ref="canvas" :width="radius * 2" :height="radius * 2"></canvas>
    <div class="btn" @click="start" v-if="!isRunning">开始抽奖</div>
    <div class="btn" v-else>正在抽奖...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radius: 250, // 转盘半径
      isRunning: false, // 是否正在抽奖
      prizes: [
        {id: 1, name: '奖品1', color: '#FFB6C1'},
        {id: 2, name: '奖品2', color: '#87CEEB'},
        {id: 3, name: '奖品3', color: '#F0E68C'},
        {id: 4, name: '奖品4', color: '#FFA07A'},
        {id: 5, name: '奖品5', color: '#98FB98'},
        {id: 6, name: '奖品6', color: '#FFC0CB'},
        {id: 7, name: '奖品7', color: '#ADD8E6'},
        {id: 8, name: '奖品8', color: '#90EE90'}
      ], // 奖品列表
      pointer: null, // 指针
      ctx: null, // canvas上下文
      timer: null, // 定时器
      duration: 5000, // 抽奖持续时间
      startAngle: 0, // 起始角度
      endAngle: 0, // 结束角度
      currentAngle: 0, // 当前角度
      prizeId: null // 抽中的奖品id
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d')
    this.pointer = new Image()
    this.pointer.src = require('@/assets/pointer.png')
    this.drawRouletteWheel()
  },
  methods: {
    drawRouletteWheel() {
      const {ctx, radius, prizes} = this
      const angle = 2 * Math.PI / prizes.length
      ctx.strokeStyle = '#fff'
      ctx.lineWidth = 2
      prizes.forEach((prize, index) => {
        const startAngle = angle * index
        const endAngle = angle * (index + 1)
        ctx.fillStyle = prize.color
        ctx.beginPath()
        ctx.arc(radius, radius, radius - 50, startAngle, endAngle, false)
        ctx.arc(radius, radius, radius - 100, endAngle, startAngle, true)
        ctx.stroke()
        ctx.fill()
        ctx.save()
        ctx.fillStyle = '#fff'
        ctx.translate(radius + Math.cos(startAngle + angle / 2) * (radius - 80), radius + Math.sin(startAngle + angle / 2) * (radius - 80))
        ctx.rotate(startAngle + angle / 2 + Math.PI / 2)
        ctx.fillText(prize.name, -ctx.measureText(prize.name).width / 2, 0)
        ctx.restore()
      })
    },
    start() {
      if (this.isRunning) return
      this.isRunning = true
      this.prizeId = null
      const {prizes, duration} = this
      const prizeIds = prizes.map(prize => prize.id)
      this.prizeId = prizeIds[Math.floor(Math.random() * prizeIds.length)]
      const prize = prizes.find(prize => prize.id === this.prizeId)
      const angle = 2 * Math.PI / prizes.length
      this.startAngle = Math.floor(Math.random() * 360) * Math.PI / 180
      this.endAngle = this.startAngle + angle
      const startTime = new Date().getTime()
      this.timer = setInterval(() => {
        const currentTime = new Date().getTime()
        const progress = (currentTime - startTime) / duration
        if (progress >= 1) {
          clearInterval(this.timer)
          this.timer = null
          this.isRunning = false
          this.currentAngle = this.endAngle % (2 * Math.PI)
          this.$emit('finish', prize)
        } else {
          this.currentAngle = this.startAngle + (this.endAngle - this.startAngle) * this.easeOut(progress)
        }
        this.drawRouletteWheel()
        this.drawPointer()
      }, 16)
    },
    drawPointer() {
      const {ctx, radius, currentAngle, pointer} = this
      ctx.save()
      ctx.translate(radius, radius)
      ctx.rotate(currentAngle)
      ctx.drawImage(pointer, -pointer.width / 2, -pointer.height / 2)
      ctx.restore()
    },
    easeOut(progress) {
      return Math.pow(progress - 1, 5) + 1
    }
  }
}
</script>

<style scoped>
.roulette {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  text-align: center;
}
.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  background-color: #f00;
  cursor: pointer;
}
</style>

使用方法：

<template>
  <div>
    <roulette @finish="handleFinish"></roulette>
    <div v-if="prize">{{ prize.name }}</div>
  </div>
</template>

<script>
import Roulette from '@/components/Roulette'

export default {
  components: {Roulette},
  data() {
    return {
      prize: null
    }
  },
  methods: {
    handleFinish(prize) {
      this.prize = prize
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为`Roulette`的组件，并在其中实现了大转盘抽奖的逻辑。在父组件中，我们通过引入`Roulette`组件并监听其`finish`事件来获取抽奖结果。