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

2024-05-15 01:20

本文主要是介绍“打工搬砖记”中吃什么的轮盘功能实现(二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

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

打工搬砖记

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

转盘主要的逻辑实现

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>

转盘的素材

我发现穿上后好像就成为了jpg格式了,注意转盘哪个一定要是png格式的,不然会把转盘的内容给覆盖住,音乐和背景图的话就自己找找吧!
请添加图片描述
请添加图片描述

小结

总的来说实现过程不难,难的是思路以及行动力。加油打工人!!!

这篇关于“打工搬砖记”中吃什么的轮盘功能实现(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/990403

相关文章

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要