VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

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

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

下载

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 在微信小程序中实现一个幸运转盘游戏(微信小程序幸运转盘)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!