微信小程序中幸运转盘小游戏的实现方式

GS 570 2024-07-04

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

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

本人主要介绍如何在微信小程序里面开发一个幸运转盘的小游戏,里面主要用到javascript和 css 语法,就可以轻松实现一个简单的幸运转盘(以6个奖品区为例)。当然,如果你有更好实现方案,欢迎在评论区留言。

前言

本次教程需要你掌握一定量 javascript 和 css 基础知识,并且你需要有小程序一定的开发经验,具体需要掌握知识点有:

  • css 的 position、transform、transition、overflow

  • javascript基本随机算法

  • wxs语法

  • 小程序内置动画api

效果图

图片.png

小程序

开发思路

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

本人主要介绍编写思路,下面就开始我的讲解。

如何画一个三角形

一开始,要写一个基础的 wxml 框架。

图片.png

我画了两个大小相同的长方形,长和宽分别是300rpx和600rpx,利用 position css属性,让两个长方形合并在一起。

图片.png

图片.png

合并之后我需要将两个长方体分离出来,把红色长方体变成半圆形,蓝色长方体顺时摆动60度,红色长方体逆时摆动30度,为什么要这样转,因为蓝色本来随红色逆时摆动30度,而一个三角形内角为60度,为了形成这60度的夹角,我需要红色摆完之后再将蓝色顺时移动60度,也就这样形成60度夹角。

图片.png

图片.png

接下来关键一步在 item 处增加  overflow: hidden 属性,一个三角形就出来了,并调整字体的位置。

图片.png

图片.png

一个三角形画出来后,将6个同等大小的三角形并让他们可以拼接在一起组合成一个圆盘,只需各自修改三角的旋转角度即可。

图片.png

实现响应式样式

为了更好的适应不同业务需求,我把转盘的样式变成响应式,就可以轻松根据用外部传入的 prize 数据的长度来设置不同的样式,我把这一步的判断,放在 wxs 模块那里。

图片.png

动画系统和中奖系统

通过设定好的中奖率,以一个圆为360度来计算,得出一个0-360的中奖范围,将随机得来的数判断属于哪个区间值,用区间值 reward 来决定圆盘所需转动的角度。思路大概就是这样,下面开始讲解主要的思路。

图片.png

首先要设置好6个奖品区的中奖率winning,该中奖率要相加起来为1,把初始化的数据组合成一个6位数的数组从组件外传入进组件内。

图片.png

以一个圆为360度来计算出0-360的中奖取值范围。

图片.png

生成一个随机整数,当然这数要在0-360,不然超出360或小于0是没有意义的。

图片.png

获得随机数之后,判断在哪个奖品范围内并把在对应的区间值赋予响应数reward 内。

图片.png

最后别忘了在每次执行动画前,都要先执行动画重置动作,才能保证动画下次转到正确的角度。当然我把其放在一个函数里面,以便组件外也可以使用该函数。

图片.png

最后

整个思路就这些,怎么样,是不是很简单呢?实现关键一步是绘制圆盘,只要这一步搞好了,其他就会简单很多,因为动画实现那部分,微信小程序已经帮我们全部弄好了。最后,如果有更好的方法,欢迎在评论讨论一下。

以上就是微信小程序中幸运转盘小游戏的实现方式的详细内容!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序自动化测试中 wx API 拦截的相关研究
下一篇:Echarts 在 Taro 微信小程序开发中的踩坑经验分享
相关文章

 发表评论

暂时没有评论,来抢沙发吧~