浏览器端转盘抽奖策略实现

由于最近有个网页端的抽奖推广活动，抽奖的随机性是个非自然随机应该是个公开的秘密了吧，因为公司本着不欺骗，又不能太亏的原则，把几十台苹果或者其他高端奖品全部交给运气来分配，自己无法控制的，始终是不安心，所以这里面就需要一些策略来处理。接下来一步步揭秘。
首先抛出一个无策略的策略，所有的奖品相当于一个数组，再随机生成一个数字，这时候，奖品已经确定，然后转盘开始转动，再停下，恭喜你，中了啥。这就是最简单的策略，但是这就比较考验老板的心脏了，全凭运气，说不定一天几十台就没了。所以，需要优化。接下来说说怎么优化。
首先可以为奖品这个数组加上一个权重，例如
var awardWeights = {
1:{
weight:1,
name:’1等奖’
},
2:{
weight:50,
name:’二等奖’
},
3:{
weight:300,
name:”三等奖”
},
4:{
weight:800,
name:”四等奖”
},
5:{
weight:1500,
name:”5等奖”
},
6:{
weight:10000,
name:’未中奖’
}
};

从调整这个权重，就可以比较好控制中奖概率了，例如这里的一等奖，概率就只有万里挑一了，如果老板再小气点，可以把权重再调小一点，不过别太刷用户了哦。
虽然这样控制力度细化了点，但是还是不好控制，假如你今天只想出去两台iPhone，但是概率论的事情谁都说不准，所以，需要进一步优化。
我们可以在数据库中生成今天所有的抽奖数据，例如10个一等奖，100个二等，1000个三等奖，其他的5000个都是未中奖。数据库中当天就有6110个数据，接下来用户抽奖的时候在这6110个记录中随机挑一个就可以了，全在掌控之中。
这两种方式也可以灵活地糅合在一起产生新的更好的策略，这里只做一个抛砖引玉，就不进一步讨论了。到目前为止是抽奖的核心，随机。浏览器端的转盘也很重要。接下来聊聊浏览器端的工作。
转盘，肯定是要转，总不能匀速转吧，所以，显而易见，转盘的核心在于转动的策略。转盘转动，一般是在一定的时间内，由快逐渐变慢。这里可以使用多次贝塞尔曲线来设计旋转的速度变化（如下图）。

那么，我们得找到x，y这两个维度，仔细分析，转盘转动是在一定时间内，转动的时候角度会变化，所以，时间和角度就是这两个维度，所以p1=（开始时间，开始的角度），p2=（停止时间，停止的角度）。停止的时间有我们自己确定，停止的角度自然是根据我们的奖品来定，抽到iPhone了，自然要停在iPhone那个位置了。（具体的贝塞尔实现有兴趣可以研究一下，这里不详细解释）
到这里为止，就是转盘抽奖的核心实现思路了，谢谢，如果有误，请随意指点。

浏览器端转盘抽奖策略实现相关推荐

Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘原型演示及下载地址:https://www.p ...
js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
android 九宫格转盘,vue组件实现移动端九宫格转盘抽奖
本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下 vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图抽奖因为 ...
移动端九宫格转盘抽奖vue组件
vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图抽奖因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置 ...
vue移动端大转盘抽奖
vue移动端幸运大转盘抽奖要求: 点击开始后转盘开始转动,5秒后转盘逐渐减速并停止,最终位置随机定位在10个奖项中的某一个,并弹出中奖信息 <template><div class ...
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo 前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局. 在制作大转盘抽奖的时候 ...
前端web：浏览器静态资源缓存策略
浏览器静态资源缓存策略浏览器其实提供了两种控制策略,分别是强制缓存和协商缓存强制缓存强制缓存:就是强制使用浏览器缓存下来的资源; 在指定的一段时间内用自己缓存的文件就行,不需要再次发出请求. 具 ...
html转盘游戏,html5大转盘抽奖实例源码(基于vue.js)
[实例简介] [调试步骤] # 安装依赖 npm install # 开启本地服务器localhost:8088 npm run dev # 发布环境 npm run build #然后静待你的浏览器 ...

浏览器端转盘抽奖策略实现

浏览器端转盘抽奖策略实现相关推荐

最新文章

热门文章