怎么在微信小程序实现一个幸运转盘小游戏
怎么在微信小程序实现一个幸运转盘小游戏
这篇文章将为大家详细讲解有关怎么在微信小程序实现一个幸运转盘小游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
效果图
小程序开发思路
开发思路有三部分,第一部分是用css绘制转盘背景,第二部分是利用 wxs 语法实现响应式样式 ,第三部分是小程序内置动画api实现转盘的转动以及通过js转动随机性的实现。
本人主要介绍编写思路,下面就开始我的讲解。
如何画一个三角形
一开始,要写一个基础的 wxml 框架。
我画了两个大小相同的长方形,长和宽分别是300rpx和600rpx,利用 position css属性,让两个长方形合并在一起。
.turntable{display:block;width:100%;height:600rpx;}.turntable.wrapper{position:relative;transform-origin:center;width:100%;height:600rpx;}
合并之后我需要将两个长方体分离出来,把红色长方体变成半圆形,蓝色长方体顺时摆动60度,红色长方体逆时摆动30度,为什么要这样转,因为蓝色本来随红色逆时摆动30度,而一个三角形内角为60度,为了形成这60度的夹角,我需要红色摆完之后再将蓝色顺时移动60度,也就这样形成60度夹角。
.turntable.wrapper.item{position:absolute;left:50%;width:300rpx;height:600rpx;border-radius:0px300rpx300rpx0;transform-origin:leftcenter;transform:rotate(-30deg);}.turntable.wrapper.item.item-inner{text-align:center;width:300rpx;height:600rpx;transform:translateX(-300rpx)rotate(60deg);transform-origin:rightcenter;border-radius:300rpx00300rpx;font-size:32rpx;}
接下来关键一步在 item 处增加 overflow: hidden 属性,一个三角形就出来了,并调整字体的位置。
.turntable.wrapper.item{position:absolute;left:50%;width:300rpx;height:600rpx;border-radius:0px300rpx300rpx0;overflow:hidden;transform-origin:leftcenter;}.turntable.wrapper.item.item-innertext{display:block;transform-origin:center;transform:translateY(100rpx)translateX(43rpx)rotate(-30deg);}
一个三角形画出来后,将6个同等大小的三角形并让他们可以拼接在一起组合成一个圆盘,只需各自修改三角的旋转角度即可。
.turntable.wrapper.item:nth-child(1){transform:rotate(-30deg);}.turntable.wrapper.item:nth-child(2){transform:rotate(-90deg);}.turntable.wrapper.item:nth-child(3){transform:rotate(-150deg);}.turntable.wrapper.item:nth-child(4){transform:rotate(-210deg);}.turntable.wrapper.item:nth-child(5){transform:rotate(-270deg);}.turntable.wrapper.item:nth-child(6){transform:rotate(-330deg);}
实现响应式样式
为了更好的适应不同业务需求,我把转盘的样式变成响应式,就可以轻松根据用外部传入的 prize 数据的长度来设置不同的样式,我把这一步的判断,放在 wxs 模块那里。
动画系统和中奖系统
通过设定好的中奖率,以一个圆为360度来计算,得出一个0-360的中奖范围,将随机得来的数判断属于哪个区间值,用区间值 reward 来决定圆盘所需转动的角度。思路大概就是这样,下面开始讲解主要的思路。
圆盘要转的角度 = reward * 一个圆分成6块的平均值 + 3 * 360
首先要设置好6个奖品区的中奖率winning,该中奖率要相加起来为1,把初始化的数据组合成一个6位数的数组从组件外传入进组件内。
prize:[{'name':'1分','winnning':0.2,'count':1},{'name':'谢谢参与','winnning':0.5,'count':0},{'name':'5分','winnning':0.05,'count':5},{'name':'7分','winnning':0.05,'count':7},{'name':'3分','winnning':0.1,'count':3},{'name':'4分','winnning':0.1,'count':4}],
以一个圆为360度来计算出0-360的中奖取值范围。
getRange(winning){lettemp=[]winning.forEach((item,index)=>{if(index===0){temp.push(item['winnning']*360)}else{temp.push(parseInt(temp.slice(-1))+item['winnning']*360)}})returntemp},
生成一个随机整数,当然这数要在0-360,不然超出360或小于0是没有意义的。
letrandom=Math.round(Math.random()*360)
获得随机数之后,判断在哪个奖品范围内并把在对应的区间值赋予响应数reward 内。
for(letiinwinningRange){letcurrentwinning=winningRange[i]//当前取值if(random
把点击开始的主函数放在onPoint()内,函数开始时需判断是否仍有抽奖机会以及防止在执行动画又点击函数执行动画,经过计算得来所需的角度通过微信小程序的动画api animation 来让圆盘实现转动,动画结束后把中奖信息通过自定义组件触发事件来让组件外监听到。
onPoint(){//平均值constaverageRotate=360/this.properties.prize.length//是否有抽奖机会if(this.properties.chance===0){this.triggerEvent('none')return}//防止转动时点击开始按钮if(!this.data.onRotation){this.setData({onRotation:true})this.getReward()letdeg=this.data.reward*averageRotate+3*360//至少3圈以上this.animate('.wrapper',[{rotate:0,ease:'ease-in-out'},{rotate:deg,ease:'ease-in-out'}],5000,function(){this.setData({onRotation:false})//发送自己的抽奖信息this.triggerEvent('onResult',this.properties.prize[this.data.reward])}.bind(this))}},
最后别忘了在每次执行动画前,都要先执行动画重置动作,才能保证动画下次转到正确的角度。当然我把其放在一个函数里面,以便组件外也可以使用该函数。
onClear(){this.clearAnimation('.wrapper')
关于“怎么在微信小程序实现一个幸运转盘小游戏”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
推荐阅读
-
微信小程序能做什么什么是微信小程序
微信是目前用户数最多的应用,过去人们初次见面,都免不了要互相发名片、留电话,现在则变成了加微信好友。打开你的微信,用手按住页面向下...
-
小程序在哪里找(小程序开发一个多少钱啊)
微信里面的小程序,几乎可以代替手机App,不用安装就能使用,超方便!今天就给大家推荐5个宝藏级的微信小程序,实用又免费,真是让你爱...
-
小程序和h5的区别有哪些快速收藏
关于小程序与H5,在之前实际上是存在很多争议的,很多人觉得他们是一样的应用,但其实并不是这样的,差别还是非常大的,因为一个是网页,...
-
小程序时代,珠宝品牌如何拥抱微信生态
珠宝行业的发展趋势与特点:随着我国居民人均可支配收入持续提高及消费意识转变,珠宝配饰行业进入品牌红利释放器。根据智研咨询发布的《2...
-
小程序怎么开发调用微信支付及微信回调地址
小程序怎么开发调用微信支付及微信回调地址本篇内容主要讲解“小程序怎...
-
微信小程序如何实现走马灯式抽奖
微信小程序如何实现走马灯式抽奖今天小编给大家分享一下微信小程序如何...
-
微信小程序怎么实现tabBar底部导航
微信小程序怎么实现tabBar底部导航这篇文章主要讲解了“微信小程...
-
微信小程序怎么实现前台循环数据绑定
微信小程序怎么实现前台循环数据绑定本文小编为大家详细介绍“微信小程...
-
微信小程序中怎么实现swiper组件构建轮播图
微信小程序中怎么实现swiper组件构建轮播图这篇文章主要介绍“微...
-
微信小程序怎么授权获取用户详细信息
微信小程序怎么授权获取用户详细信息这篇文章主要介绍“微信小程序怎么...