微信大转盘游戏

为了迎中秋庆国庆，这个星期一直在帮公司弄微信的推广活动，弄一个大转盘抽奖游戏，抽奖条件是必须分享我们公司的产品页面到朋友圈后才可以抽奖，先贴上图

----------------------------------------------------------我是分割线------------------------------------------------------------------------------------------

先说下我整个游戏的流程，一开始你点击我这个大转盘游戏的链接，因为你是没分享产品打开大转盘的，所以游戏不能让你抽奖，得提示一下此次活动的规则，并引导你前往产品列表进行分享。如下图

前往产品列表后，也会弹出活动提示，如果用户觉得烦就可以点击不再提示

然后分享当前页面到朋友圈，此时分享的标题后面会带上此次活动的标题

分享后，会在页面上弹出抽奖的窗口，点击确认后跳转到抽奖页面

现在就可以正常抽奖了。

-----------------------------------------------------------我是分割线--------------------------------------------------------------------------

一开始参考其它的公众号，基本都是分享到朋友圈后，截图下来发给公众号，这样的方式显得档次太低了，还得专门弄个人在后台查看消息，在我公司也不可能实现的。所以我就想到了微信JS-SDK里面的获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

如下所示

wx.onMenuShareAppMessage({    title: '', // 分享标题    desc: '', // 分享描述    link: '', // 分享链接    imgUrl: '', // 分享图标    type: '', // 分享类型,music、video或link，不填默认为link    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空    success: function () {         // 用户确认分享后执行的回调函数    },    cancel: function () {         // 用户取消分享后执行的回调函数    }});

那我就可以在success写相应验证的代码后跳转到大转盘游戏了。

那些产品页面都是自己写的，所以只要全部产品页面配置上微信JS-SDK后注册这分享朋友圈事件就OK了。

那些这个分享事件解决了，就得制作这个大转盘游戏了，我一开始想了两种方法

1、用第三方平台的大转盘游戏，这个很容易找到，不过首先想到的缺点是别人可以直接把这个游戏页面转发给别人，别人也无需分享就可以直接抽奖了

2、自己制作一个大转盘游戏，由于之前没弄过，也不知难度系数怎么样，不过最大的优点是代码可以自由发挥，想怎么验证就怎么验证。

最后思来想去，由于时间也比较紧，跟领导说了，给我一天的时间，如果制作不出大转盘游戏，就用第三方的平台。

--------------------------------------------------------------这是分割线----------------------------------------------------------------------------------------------------

前期工作：

首先当然就是百度 输入 大转盘 源码 进行搜索，研究了几个，发现并没有自己想象的那么难，难点就两个，一个是页面的转盘代码，一个是后台的概率算法，这些网上都有现成的，我需要的无非就是理解它，理解它，理解它！然后根据自己的需要进行修改。

找了几个大转盘游戏的html源码，比较满意的就是这个了 http://www.17sucai.com/preview/222076/2015-05-28/turnplate/index.html

其它的大转盘都是弄一张固定的图片当做转盘，这个是用canvas动态画奖品出来的，这样就可以根据我数据库奖品信息画，显得档次比较高。

先说一下这个大转盘在微信的浏览器上有严重的bug

如下面这两位朋友所示

http://bbs.csdn.net/topics/391044614?page=1

http://bbs.csdn.net/topics/391068827

就是在微信浏览器上，转盘转动时，有时转盘会遮到那个指针图片，我在电脑上任何一个浏览器都不会出现这个现象，就只有在微信里才会出现。如果不用canvas的话，用图片就不会，这个bug我从中午试到晚上，一直调不出来原因，我都快放弃了。。最后洗了个澡回来，想一想，能不能把canvas转变成一张图片。马上百度，真是万幸，canvas有个toDataURL方法，这个方法太关键了，我把这个canvas 设置 display:none，然后放一个<img id="img_disc" />，然后等canvas画完后 $("#img_disc").prop("src",canvas.toDataURL())，然后一测试，完美~~~~~~成功了！不过很明显在微信上转动的速度比直接用canvas转动慢很多了，没那么流畅的，不过算了，先暂时这样吧。

再百度下php的概率算法

最经典就是这个了

private function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 foreach ($proArr as $key => $proCur) { $randNum = mt_rand(1, $proSum); if ($randNum <= $proCur) { $result = $key; break; } else { $proSum -= $proCur; } } unset ($proArr); return $result; } 

$proArr=array(0=>2,1=>3,2=>4);

键值是奖品的ID，值是奖品的概率，如果上面的这个数组的话，那么0就是九分之二，1是九分之三。

这两个都有了，那其它的就是一些业务逻辑的代码了。

-----------------------------------------------------------------------我是分割线-------------------------------------------------------------------------------------------------

说下我的业务逻辑吧

在我的产品页面中注册这个微信分享事件，当分享成功后，将当前分享的产品ID异步ajax post到服务器，服务器接收后，在数据库里新增一条分享日志记录，记录上面并记录了分享用户的微信openid（用于以下的验证），新增后得到分享日志ID，然后将这个分享日志ID返回到页面，我就弹出一个获得抽奖的窗口，点击确认的话，就会跳转到大转盘游戏页面，并以get的方式带上刚才那个分享日志id

当进入这个大转盘页面时，我会判断是否带有产品分享的日志id，如果没有，就会弹出提示窗口，让你去产品列表，如果有，我后台会对这个产品分享日志ID进行验证，如果进入大转盘的用户openid跟这个分享日志ID对应的openid不一样的话，就提示分享错误，然后判断分享日志的分享时间跟现在的时间差，如果大于一天，就提示分享过期，请重新分享。

如果没异常的话，就可以抽奖了，点击中间的开始抽奖，页面会将当前的分享日志ID也ajax post到服务器，服务器会再一次进行上面的验证步骤，防止用户做假，然后服务器会用上面提到的概率算法得到得奖的奖品索引，如果中奖则会在中奖的数据表中新增记录，并附上当前的openid，然后返回奖品索引，页面根据相应的奖品索引转到对应的角度后，如果有中奖，就会弹出窗口让你填写信息，提交到服务器后，我会再一次验证跟我刚才中奖数据表中新增的记录openid是否一致，防止用户做假。

写得比较乱，因为这个大转盘游戏是给公司做的，而且我技术水平一般，所以代码我不方便列出来，我怕万一到时被网友发现了漏洞的话，我就完了。。。

先这样吧。

要是大家想试玩，可以在微信里面搜索金刚玻璃，关注后，输入抽奖，就会回复大转盘的图文消息了。