“打工搬砖记”中吃什么的轮盘功能实现（二）

文章目录

- 打工搬砖记
- 转盘主要的逻辑实现
- 转盘的素材
- 小结

打工搬砖记

先来一个吃什么轮盘的预览图，这轮盘文案加字呈圆形铺出来，开始后旋转到指定的选项处停下来。
已上线小程序“打工人搬砖记”，可以扫码进行预览观看。
请添加图片描述

转盘主要的逻辑实现

1、通过绑定style绑定值为“prizeBoxStyle”，设置每个选项的颜色以及后续转盘转动需要操作这个值。
2、通过绑定style绑定值为“prizeStyle”，然后通过“rotateAngle()”方法计算出总共有几个选项，然后算出每个选项需要旋转的角度。
3、通过“totalRunAngle()”计算出转盘最后需要转动角度，所以说游戏在开始的一瞬间就程序就已经知道，抽中的是那一个。
4、为了使转盘有声音就使用“uni.createInnerAudioContext()”来创建音乐，这个地方需要注意的是，如果想要后续“.stop()”停下音乐，在创建的时候一定不要设置为自动播放，就是说“autoplay = false”。

具体代码如下：

<template><view><image src="../../static/lunch/lunchBcg.jpg" class="bcgImg" mode=""></image><view class="container"><view class="container-title"></view><view class="prize-box-relative"><view class="prize-box"><view class="prize-list" ref="prizeWrap" :style="prizeBoxStyle"><div class="prize-item" v-for="(item, index) in prizeList" :style="[prizeStyle(index)]"><text>{{ item }}</text></div></view></view></view><image @click="openGame()" src="../../static/lunch/turntable.png" class="turntableImg" mode=""></image></view><!-- 弹框 ：抽中要吃的--><view v-show="tipShow" class="tip_box"><view class="tip_content"><image src="../../static/lunch/tip.png" class="tip_img" mode=""></image><view class="tip_txt">{{prizeList[prizeId] }}</view><view class="tip_btn" @click="tipShow = false"></view></view></view></view>
</template><script>import {turnList} from 'config/api.js';export default {data() {return {// colorList: ['#f69602', '#f8ca41', '#ffe7c9','#afe2ec'],colorList: ['#fe9539', '#fadf94', '#5fcbd1', '#ffffff'],prizeList: ["豆浆", "胡辣汤", "韭菜鸡蛋韭菜鸡蛋", "奖品4", "奖品5", "奖品6", "奖品4", "奖品5", "奖品6"],isRunning: false, // 是否正在抽奖baseRunAngle: 360 * 5, // 总共转动角度 至少5圈prizeId: 0, // 中奖idrotatePrize: 40,tipShow: false,prizeBoxStyle: '',audioMusic: '',}},onLoad() {this.getPrizeList()uni.$on('updateTurn', (data) => {this.getPrizeList()})},methods: {getPrizeList() {turnList({data: {eatType: this.activeMenu},custom: {auth: true,toast: false,catch: true}}).then((res) => {let arr = []res.map(value => {arr.push(value.name)})this.prizeList = arrthis.rotatePrize = 360 / arr.lengththis.prizeBoxStyle = this.bgColor()this.initGame()})},// 初始化转盘游戏initGame() {this.rotateAngle()},// 开始游戏openGame() {this.startGame()},// 开始游戏startGame() {if (!this.isRunning) {this.isRunning = truethis.prizeId = this.getRandomNum()this.startRun()}},// 游戏运行startRun() {this.prizeBoxStyle = `${this.bgColor()} transform: rotate(${this.totalRunAngle()}deg);transition: all 4s ease;`this.audioMusic = uni.createInnerAudioContext();this.audioMusic.autoplay = false;this.audioMusic.startTime = 2;this.audioMusic.sessionCategory = 'ambient';this.audioMusic.src = '/static/lunch/music01.mp3';this.audioMusic.play();setTimeout(() => {this.audioMusic.stop()this.audioMusic.destroy()this.audioMusic = null}, 3700)this.playAudio()setTimeout(() => {this.tipShow = truethis.isRunning = falsethis.prizeBoxStyle = `${this.bgColor()} transform: rotate(${this.totalRunAngle() - this.baseRunAngle}deg);`}, 4000)},getRandomNum() {const num = Math.floor(Math.random() * this.prizeList.length)return num},// 平均每个奖品角度rotateAngle() {this.rotatePrize = 360 / this.prizeList.length},// 奖品布局prizeStyle(i) {let _degree = this.rotatePrizelet style = {}style.width = 2 * 130 * Math.sin(_degree / 2 * Math.PI / 180) + 'px'style.height = '130px'style.transform = `rotate(${_degree * i + _degree / 2}deg)`style.transformOrigin = '50% 100%'return style},// 计算绘制转盘背景bgColor() {let colorVal = ''for (let i = 0; i < this.prizeList.length; i++) {colorVal += `${this.colorList[i % 4]} ${this.rotatePrize * i}deg ${this.rotatePrize * (i + 1)}deg,`}return ` background: conic-gradient(${colorVal.slice(0, -1)});transform: rotate(-${this.rotatePrize/2}deg); `},// 要执行总转角度数totalRunAngle() {return this.baseRunAngle + 360 - this.prizeId * this.rotatePrize - this.rotatePrize / 2},// 转盘停下来时的声音playAudio() {setTimeout(() => {const innerAudioContext = uni.createInnerAudioContext();innerAudioContext.autoplay = true;innerAudioContext.sessionCategory = 'ambient';innerAudioContext.src = '/static/lunch/music.mp3';innerAudioContext.onPlay();}, 3800)}}}
</script><style lang="scss">.bcgImg {position: fixed;width: 750rpx;height: 100vh;}.container {position: relative;width: 660rpx;height: 660rpx;margin: 0 auto;}.container-title {font-size: 56rpx;font-weight: bold;color: #FFFFFF;text-align: center;line-height: 160rpx;height: 160rpx;letter-spacing: 20px;}.turntableImg {width: 100%;height: 100%;position: absolute;top: 160rpx;}.prize-box-relative {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}.prize-box {width: 300px;height: 300px;position: relative;}.prize-list {width: 100%;height: 100%;border-radius: 50%;overflow: hidden;}.prize-item {/*border: 2px solid red;*/position: absolute;left: 0;right: 0;top: 20px;margin: auto;text-align: center;}.prize-item text {display: flex;align-items: center;writing-mode: vertical-rl;color: #333333;font-size: 26rpx;font-weight: bold;text-align: center;line-height: 20px;width: 100%;}.tip_box {z-index: 10;position: fixed;top: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;}.tip_content {position: relative;}.tip_img {width: 640rpx;height: 480rpx;}.tip_txt {position: absolute;top: 160rpx;width: 600rpx;text-align: center;font-weight: bold;font-size: 38rpx;}.tip_btn {position: absolute;bottom: 60rpx;left: 210rpx;width: 200rpx;height: 100rpx;}.food_menu_list {position: fixed;bottom: 100rpx;width: 710rpx;padding: 50rpx 20rpx;display: flex;flex-wrap: wrap;font-size: 26rpx;color: #999999;font-weight: bold;.menu_box {margin: 0 10rpx;width: 174rpx;background: rgba(244, 244, 244, 0.6);box-shadow: 0 0 10rpx #FFFFFF;display: flex;align-items: center;padding: 20rpx;border-radius: 10rpx;margin-bottom: 30rpx;.menu_img {width: 40rpx;height: 40rpx;margin-right: 10rpx;}}.menu_active {color: #53851b;background: #f4f4f4;box-shadow: 0 0 10rpx #f4f4f4;}.menu_btn {font-size: 36rpx;color: #ffffff;line-height: 80rpx;text-align: center;width: 100%;border-radius: 10rpx;border: 2rpx #FFFFFF solid;}}
</style>