主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
我主要介绍如何在微信小程序中开发一个幸运轮盘游戏,其中主要使用了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下载微信是一款支持通过手机网络发送语音消息、视频、图片、文字的手机通讯软件。微信可以单独聊天,也可以群聊,根据地理位置找到附近的人,带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧!
下载
这几篇文章你可能也喜欢:
- 微信小程序翻译功能上线:现已支持18种语言
- 如何使用微信小程序中的车牌号输入法(如何使用微信小程序中的车牌号输入法进行打印)
- 微信小程序无法获取位置信息怎么办?(微信小程序无法获取位置信息)
- 微信小程序如何实现九宫格跳(如何在小程序中配置九宫格抽奖)
- 如何调节微信小程序的亮度?
本文由主机参考刊发,转载请注明:在微信小程序中实现一个幸运转盘游戏(微信小程序幸运转盘) https://zhujicankao.com/120698.html
评论前必须登录!
注册