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

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

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

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

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

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

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

怎么画三角形？一开始，您应该编写一个基本的wxml框架。

ltview class = 转盘 gt ltview class = 包装 gt ltview class = item gt ltview class = item -内部 gt lttext gt10分</text gt； lt/view gt； lt/view gt； lt/view gt； lt/view gt；复制代码。我画了两个同样大小的长方形，长宽分别是300rpx和600rpx。使用position css属性，我将两个矩形合并在一起。

.转盘{显示器: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；}复制代码

接下来，关键的一步是在item处添加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 module = 计算出的 gtvar rotate = function (index，length){ var inital = -(360/length/2)var average rotate = 360/length var deg = inital -average rotate * index return # 39；变换:旋转( # 39；+deg+ # 39；deg)；'} var inner = function(length){ var average rotate = 360/length return # 39；transform:translate x(-300 rpx)rotate( # 39；+average rotate+ # 39；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 # 39；transform:translate y(100 rpx)translate x( # 39；+距离+ # 39；rpx)旋转(-45度)；'}module.exports = {rotate: rotate，inner: inner，text:text } lt；/wxs gt；代码动画系统和中奖系统通过将一个圆的中奖率设置为360度来计算0-360的中奖范围，判断随机数属于哪个区间值，用区间值奖励来确定圆盘需要的旋转角度。大概就是这个想法。这里是主要的想法。

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

奖品:[{ # 39；姓名 # 39；: '1 ', 'winnning # 39: 0.2, '伯爵 # 39；: 1 }, { '姓名 # 39；: '感谢您的参与 # 39；, 'winnning # 39: 0.5, '伯爵 # 39；: 0 }, { '姓名 # 39；: '5分 # 39；, 'winnning # 39: 0.05, '伯爵 # 39；: 5 }, { '姓名 # 39；: '7分 # 39；, 'winnning # 39: 0.05, '伯爵 # 39；: 7 }, { '姓名 # 39；: '3分 # 39；, 'winnning # 39: 0.1, '伯爵 # 39；: 3 }, { '姓名 # 39；: '4分 # 39；, 'winnning # 39: 0.1, '伯爵 # 39；:4}]，复制代码以一个圆为360度计算0-360的中奖值范围。

get range(winning){ let temp =[]winning . foreach((item，index)= gt；{ if(index = = = 0){ temp . push(item[ # 39；winnning # 39]* 360)} else { temp . push(parse int(temp . slice(-1))+item[ # 39；winnning # 39] * 360)}}} return temp}，复制代码生成随机整数。当然这个数应该是0-360，否则超过360或者小于0都没有意义。

let = math . round(math . random()* 360)复制代码得到随机数后，判断它处于哪个奖区间，给响应数奖励对应的区间值。

for(let I in winning range){ let current winning = winning range[I]//当前值if(random < current winning){ this . setdata({ reward:I })break } else { if(I = = 0){ continue } if(random gt；= winning grange[i-1] ； 随机 lt= current winning){ this . setdata({ reward:I })break } }复制代码把通过点击onPoint()启动的主函数，放在函数的开头，要判断是否还有抽奖机会，防止再次点击函数执行动画。计算后，通过微信小程序的动画api动画，利用所需角度使盘面旋转。动画结束后，获胜信息由一个要在组件外部监控的自定义组件触发。

on point(){//average const average rotate = 360/this . properties . prize . length//如果(this . properties . chance = = 0){ this . trigger事件( # 39；无 # 39；)return} //如果(！this . data . on rotation){ this . setdata({ on rotation:true })this . get reward()let deg = this . data . reward * average rotate+3 * 360//至少在this . animate( # 39；.包装 # 39；，[{ rotate: 0，ease: # 39；ease -in-out # 39；}，{ rotate: deg，ease: # 39；ease -in-out # 39；}]，5000，function(){ this . setdata({ on rotation:false })//发送自己的抽奖信息this . trigger event( # 39；结果 # 39；，this . properties . prize[this . data . reward])}。bind (this)}}，复制代码。最后，不要忘记在每次动画之前进行动画复位动作，以保证下次动画会转到正确的角度。当然，我把它放在一个函数中，这样它就可以在组件之外使用。

on clear(){ this . clear animation( # 39；.包装 # 39；)}最后整个复制代码的想法也不过如此。怎么样？是不是很简单？实现这一点的关键步骤是绘制磁盘。只要这一步做好了，剩下的就简单多了。因为动画实现部分，微信小程序已经帮我们全部做到了。最后，如果有更好的方法，欢迎在评论中讨论。

以上是微信小程序中实现的一个幸运转盘游戏的细节。请多关注主机参考其他相关文章！

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

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