;

达人】提问: 怎样做一个真实的抽奖转盘案例,有固定的奖池

奖品的数量是固定的,抽完了就没有了,必须避免多个人同时抽取到一个奖品。


1 个回答

kawaii君

这里有一个例子: 一个具有一到八等奖的转盘,用户可以无限次抽奖,但是奖品是有限的。


H5案例下载链接:

www.ih5.cn/editor3/app/workCopy/5641535

二维码:

1.png


要实现一个转盘抽奖活动H5,需要考虑这个H5的关键点:

  • 转盘动画和其他展示性设置

  • 随机中奖,中奖概率可以根据需求灵活设置

  • 奖品限制,中一个少一个,超过预设中奖数量后自动随机抽余下的奖项


随机中奖和奖品限制


为了准确记录中奖个数,抽奖案例都会使用数据库进行操作。 这个案例可以先在数据库中设置奖池,然后随机让用户获取奖池里“有效”的奖项,抽中之后,对数据库的对应的奖池进行删减,就可以完成随机中奖和奖品限制两步操作。

具体如下:


建立私有数据库和奖池

建立数据库后,在数据库中添加三个字段:“中奖”(好分清哪个跟哪个嘛)、“数值”(分别给各等奖编号,待会儿告诉你用途)、“是否抽中”(这里用0代表“否”,1代表“是”)、奖品码(每个奖品的独立身份证)。

下面的具体条目怎么设呢?这个数据库必须模拟奖池的效果,每一条数据代表一个奖品,因此如果有5个一等奖,那一等奖应该要有5条数据,如此类推。(如果奖品数量大,强烈推荐大家先准备好excel表格,然后直接把excel导入至数据库。)


喵.png

(例:一等奖1条,二等奖2条)


随机抽取的事件

当用户点击转盘,转盘就开始抽奖。

后端的随机抽取可以靠以下方法实现:

点击时,并且奖品满足“是否抽中”=0(即未被抽过)的时候,随机获取数据库内还能抽出的奖池信息,并输出至一维数组(或二维数组)。


喵3.png


这既可以随机抽奖,还可以避免抽到奖品为0的奖品,另外“不重复随机获取(抽奖)”事件是专门为抽奖而生的事件,它可以避免由于网络问题带来的不佳体验,不会出现几个人同时抢到一个奖品的现象。

抽奖完成后,不要忘了让奖池实时减少,所以要设置以下事件:


喵2.png


(为了确认对应对应的奖项是哪个,我们会用抽到的奖品码来判断,然后让它的“是否抽中”字段赋值为1。)


喵4.png

抽中后的数据库


假如所有奖项都抽完了,也需要告知用户活动已结束。这时候所有奖品的“是否抽中”都为1,数据库就不能获取到任何可用的奖品信息,即“不重复随机获取失败”。


image.png


转盘动画设置

转盘动画,可以用传统的时间轴动画实现,也可以通过事件“变换状态”实现。

转盘的动画效果是单纯的旋转,因此只要计算好奖项对应的旋转角度即可实现。而且这个案例的转盘是按顺序编排有规律可寻,所有可以通过一个通用的公式计算就能得出。大致的算法为计算出转盘在X等奖时的旋转角度范围,然后在现有旋转角度基础上进行旋转。比如八等奖,旋转角度范围是0-45°,七等奖46-90°……N等奖的角度范围就是:45×(8-N)+一个0-45°的随机值。

但是这个角度只是旋转一周对应的数值,实际上因为圆盘在上一次旋转后已经旋转了一定角度了,可能会出现倒转的情况。为了保证目标值一定比现有值大,所以应该在这个值基础上+若干个360°,也就是目标旋转角度应该是45×(8-N)+一个0-45°的随机值+X×360°,所以对现有角度除以360,并进行了取整,加上1080,保证转盘正向旋转。


5.png


当然,也可以通过预设转盘的旋转轨迹,通过判断抽中的奖项,播放至指点时间点。


16.png


限制抽奖次数

限制抽奖次数,主要通过设置数据库的每人提交次数限制实现。如果只能让用户抽奖一次,那数据库的每人提交次数可设为1。

当数据库每人提交次数超限,就可以提示“你已抽过奖”的字样。


10.png


学习地图