在微信小程序中实现一个幸运转盘游戏(微信小程序幸运转盘)

微信小程序开发教程专栏介绍幸运转盘游戏的实现。

我主要介绍如何在微信小程序中开发一个幸运轮盘游戏，其中主要使用了javascript和css语法，可以轻松实现一个简单的幸运轮盘(以6个奖区为例)。当然，如果你有更好的解决方案，请在评论区留言。

前言本教程要求你掌握一定的javascript和css基础知识，需要有一定的小程序开发经验。你需要掌握的具体知识点有:

css wxs语法小程序内置动画api渲染的基本随机算法位置、变换、过渡和溢出JavaScript

applet的开发思路有三个部分。第一部分是用css绘制转盘背景，第二部分是用wxs语法实现响应式，第三部分是用小程序内置动画api实现转盘的旋转，通过js实现旋转的随机性。

主要介绍写作思路，下面开始我的讲解。

如何画三角形首先，你要写一个基本的wxml框架。

& lt视图& gt& lt视图& gt& lt视图& gt& lt视图& gt& lttext & gt10分

。转盘{显示器:block宽度:100%；身高:600rpx}.转盘。包装{位置:相对；transform -原点:中心；宽度:100%；身高:600rpx}复制代码

合并后，我需要把两个长方体分开，把红色的长方体变成半圆形。蓝色长方体顺时针摆动60度，红色长方体逆时针摆动30度。为什么要这样转？因为蓝色本来和红色一起逆时针摆动30度，而三角形的内角是60度。为了形成这个60度角，我需要在红色挥杆之后，将蓝色顺时针移动60度，从而形成一个60度角。

。转盘。包装纸。项{位置:绝对；左:50%；宽度:300rpx身高:600rpxborder -radius:0px 300 rpx 300 rpx 0；transform -原点:左中心；变换:旋转(-30度)；}.转盘。包装纸。item . item -inner { text -align:center；宽度:300rpx身高:600rpxtransform: translateX(-300rpx)旋转(60 deg)；transform -原点:右中心；border -radius:300 rpx 0 300 rpx；font -size:32 rpx；}复制代码

下一个关键步骤是为项目添加overflow: hidden属性，一个三角形就会出来，并调整字体的位置。

。转盘。包装纸。项{位置:绝对；左:50%；宽度:300rpx身高:600rpxborder -radius:0px 300 rpx 300 rpx 0；溢出:隐藏；transform -原点:左中心；}.转盘。包装纸。item . item -内部文本{ display:block；transform -原点:中心；transform:translate y(100 rpx)translate x(43 rpx)rotate(-30 deg)；}复制代码

画出一个三角形后，可以将六个大小相同的三角形拼接在一起形成一个圆盘，只需要分别修改三角形的旋转角度。

。转盘。包装纸。item:nth -child(1){ transform:rotate(-30 deg)；}.转盘。包装纸。item:nth -child(2){ transform:rotate(-90 deg)；}.转盘。包装纸。item:nth -child(3){ transform:rotate(-150 deg)；}.转盘。包装纸。item:nth -child(4){ transform:rotate(-210 deg)；}.转盘。包装纸。item:nth -child(5){ transform:rotate(-270 deg)；}.转盘。包装纸。item:nth -child(6){ transform:rotate(-330 deg)；}复制代码实现响应式为了更好的适应不同的业务需求，我把转盘的样式改成了响应式，这样就可以根据外部传入的奖品数据的长度轻松设置不同的样式。我把这一步的判断放在了wxs模块里。

& ltwxs & gt' var rotate = function (index，length){ var inital = -(360/length/2)var average rotate = 360/length var deg = inital -average rotate * index return ' transform:rotate('+deg+' deg)；'} var inner = function(length){ var average rotate = 360/length return ' transform:translate x(-300 rpx)rotate('+average rotate+' deg)；'} var text = function(length){ var distance = 0 var rotate = 0 switch(length){案例6:distance = 43 rotate = 30 break案例8:distance = 72 rotate = 30 break案例4:distance = -20 rotate = 40 break } return ' transform:translate y(100 rpx)translate x('+distance+' rpx)rotate(-45 deg)；'}module.exports = {rotate: rotate，inner: inner，text:text } & lt；/wxs & gt；抄码动画系统和中奖系统以一个圆为360度计算中奖率，得到一个0-360的中奖范围，并判断随机得到的数字属于哪个区间值，用区间值奖励来确定圆盘需要的旋转角度。大概就是这种思维方式吧。让我们开始解释主要观点。

圆盘要旋转的角度=奖励*一个圆分成6块的平均值+3 * 360。要复制代码，首先要设置6个奖区的中奖率，中奖率加起来要1，初始化的数据从组件外到组件内组合成一个6位数组。

奖品:微信app下载微信是一款支持通过手机网络发送语音消息、视频、图片、文字的手机通讯软件。微信可以单独聊天，也可以群聊，根据地理位置找到附近的人，带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧！

下载

这几篇文章你可能也喜欢：

• 记录微信小程序的践踏(开发篇)(微信小程序骗人)
• 别急，我教你怎么写微信小程序(怎么自己写微信小程序)。
• 了解微信小程序登录的前端设计和实现(微信小程序登录后端)
• 介绍了微信小程序画布开发的注意事项。
• 总结微信小程序的开发问题(微信小程序开发的难点)

本文由主机参考刊发，转载请注明：在微信小程序中实现一个幸运转盘游戏(微信小程序幸运转盘) https://zhujicankao.com/120698.html