js实现大转盘抽奖游戏实例
作者：一把汗
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js实现大转盘抽奖游戏的方法,实例分析了javascript基于数组、随机数等实现抽奖游戏的技巧,需要的朋友可以参考下
本文实例讲述了js实现大转盘抽奖游戏。分享给大家供大家参考。具体实现方法如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&js抽奖&/title&
&style type="text/css"&
td{width:50height:50border:3px solid #text-align:vertical-align:middle}
&table id="tb"&
&td&1&/td&&td&2&/td&&td&3&/td&&td&4&/td&&td&5&/td&
&td&16&/td&&td&&/td&&td&&/td&&td&&/td&&td&6&/td&
&td&15&/td&&td&&/td&&td&&/td&&td&&/td&&td&7&/td&
&td&14&/td&&td&&/td&&td&&/td&&td&&/td&&td&8&/td&
&td&13&/td&&td&12&/td&&td&11&/td&&td&10&/td&&td&9&/td&
请输入1-16其中一位整数，代表要停止的位置&input id="txtnum" value="12" type="text" /&&input type="button" value="开始" onclick="StartGame()" /&
&script type="text/javascript"&
* 删除左右两端的空格
function Trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
* 定义数组
function GetSide(m,n){
//初始化数组
var arr = [];
for(var i=0;i&m;i++){
arr.push([]);
for(var j=0;j&n;j++){
arr[i][j]=i*n+j;
//获取数组最外圈
var resultArr=[];
var tempX=0,
direction="Along",
while(tempX&=0 && tempX&n && tempY&=0 && tempY&m && count&m*n)
resultArr.push([tempY,tempX]);
if(direction=="Along"){
if(tempX==n-1)
if(tempX==n-1&&tempY==m-1)
direction="Inverse"
if(tempX==0)
if(tempX==0&&tempY==0)
return resultA
var index=0,
//当前亮区位置
prevIndex=0,
//前一位置
Speed=300,
//初始速度
//定义对象
arr = GetSide(5,5),
//初始化数组
EndIndex=0,
//决定在哪一格变慢
tb = document.getElementById("tb"),
//获取tb对象
//转动圈数
EndCycle=0,
//计算圈数
flag=false,
//结束转动标志
function StartGame(){
EndIndex=Math.floor(Math.random()*16);
//EndCycle=Math.floor(Math.random()*4);
EndCycle=1;
Time = setInterval(Star,Speed);
function Star(num){
//跑马灯变速
if(flag==false){
//走五格开始加速
if(quick==5){
clearInterval(Time);
Time=setInterval(Star,Speed);
//跑N圈减速
if(cycle==EndCycle+1 && index==EndIndex){
clearInterval(Time);
Speed=300;
//触发结束
Time=setInterval(Star,Speed);
if(index&=arr.length){
//结束转动并选中号码
if(flag==true && index==parseInt(Trim(document.getElementById("txtnum").value))-1){
clearInterval(Time);
tb.rows[arr[index][0]].cells[arr[index][1]].style.border="3px solid red";
if(index&0)
prevIndex=index-1;
prevIndex=arr.length-1;
tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc";
window.onload=function(){
Time = setInterval(Star,Speed);
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具> js幸运大转盘开发
js幸运大转盘开发
相关推荐：微信营销是一种新型的营销模式，由于微信更重视用户之间的互动，故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式。这种方式在微信营销中的效果非常差，会令用户反感，继而取消去企业或商家的微信公众账号关注。对于企业来说，做微信推广重要
最终效果实例下载：http://www.oschina.net/code/snippet_97一.大转盘准备工作网上的一个抽奖大转盘实例/yanshi2252这就是我们要开发的效果，不过我们是让指针转，我们先分析这个效果：结构有2部分，上面是指针背景图，下面是奖项图点击指针元素开始抽奖，会转动一定圈数停下来停下来的位置指针指使那个奖项，就会弹出获奖信息提示这是参考效果，我们分析自己的大概实现：同样上下2部分点击指针转动，不过是指针动转动一定圈数停止根据指向弹出获奖信息设置抽奖次数，假如只能三次设置不同奖项中奖概率在最后我们在写一个九宫格大转盘二.如何转起来转就是css3的2d旋转处理，css3就不写了，看下面。三.静态结构搭建问题出现了，那就是两张图，一个奖项图，一个指针图，不能设计不可怕，我们直接把参考效果的扒取下来就好了，省略下载操作，我们已经有图了，请下载。back.pngpointer.png书写我们的静态结构，背景图目录看css设置：一个基于css3动画配合2d变化的旋转指针就出现了，下面我们将分析top ，left，旋转圆心为何如此设置的。四.静态结构重要样式分析红线的就是最核心样式，首先是top和left的设置：这不需要太多解释吧，篮框就是我们指针，我们摆正后测量就可以了，注意：一定要1px无偏差摆正，不然旋转时就跑偏了！我们把指针已经放在中心位置，因为图不是正方形，需要具体测量，可见把指针处理为正方形会大大简化我们的处理。这就是旋转圆心位置，指针是非正方形，我们的测量位置就是在中心圆中心，不过y要加上偏差。什么是旋转圆心？我们在桌子上摆好一个日记本，然后按住一个点，日记本转动，按住的点就是圆心。为了测试是否可以不跑偏的转动，我们结合动画进行测试。五.利用js开始转起来我们利用动画已经不停的转了起来，利用js我们如何转动？一说到js，还说到动，我们要瞬间想到setInterval函数，我们利用间隔函数，动态的不断修改2d变化旋转的角度大小，就可以转起来了，我们同样加入事件的处理，点击后触发转动：六.转动一定角度后停止我们知道，转一定圈数后，是要停止的，停止的位置根据指向，会弹出中奖信息提示，先说转，我们是从0一直增加，一说停止肯定是到一个角度不动了，假如是1460角度停止。换算成圈数就是360度*4圈 +20度，就是赚了4圈多20度。既然是停止，我们只要到1460时清除间隔函数就可以了，clearInteval的使用，传入间隔id。六.停止角度转为圈数+角度我们上面也提到了1460就是4圈+20度，这个停止角度如此表示之后//旋转基本圈数 var quan=4; //多余角度 var odeg=20; //停止时的角度 var stopdeg=quan*360+采用这种设置以后，我们可以自定义旋转圈数，比如基本圈数是6圈，同样停止额外角度也可自定义，比如是80度：//旋转基本圈数 var quan=6; //多余角度 var odeg=80; //停止时的角度 var stopdeg=quan*360+下面是修改后的代码：六.奖项依据还是上面的延续，我们设置是6圈+80度，其实6圈我们不用考虑，只是让用户感觉在抽奖的假象，这个80才是我们真实考虑的东西，因为他代表在转盘上指针停在了哪里，要通过停在的位置弹出获奖信息：80度的位置和其实参考如图所示。毫无疑问，0-6这7个奖项在0-360之间各占一定的区间，我们需要测量出来，例如：0等奖：0-50度6等奖：51-101度 等等一次类推我们选择的图毫无疑问是失败的，若果是6等分，我们直接就算出来了（360*6），可是7份（360/7尴尬）的就要实际测量：//区间奖项var jiang=[[1,51,"未中奖"], //未中奖[52,102,"6等奖"],//6等奖[103,153,"5等奖"],//5等奖[154,203,"4等奖"],//4等奖[204,251,"3等奖"],//3等奖[252,307,"2等奖"],//2等奖[307,360,"1等奖"]//1等奖 ];我们奖项和角度对应关系，我们现在是80度，那么就是6等奖六.奖项判断我们会在80度位置停止，我们的依据就是上面的数组，我们要写一个判定函数，去自动判断是几等奖，这样就非常的方便了，我们把80改为150也许自己判定结果。//奖项判定函数 function is(deg){var res="未中奖";for(var i=0;i<jiang.i++){if(deg>=jiang[i][0] && deg<jiang[i][1]){res=jiang[i][2];};}; };我们在停止时弹出提示if(deg>stopdeg){clearInterval(dbox);alert(is(odeg));}else{zhizhen.style.transform="rotate(" + deg + "deg)";};修改后全部代码：七.随机奖项生成80度也就是6等奖，这个80度我们写死是不对的，应该产生一个0-360随机度数，这样每次抽奖就会随机中奖了，针对随机数的生成，是有固定写法的，比如生成0-8的随机数，那么就是：var odeg=Math.floor(Math.random()*10);0-360就是照猫画虎：var odeg=Math.floor(Math.random()*361);修改后整体程序：八.重复性抽奖//监听点击事件 zhizhen.onclick=function(){deg=0;odeg=Math.floor(Math.random()*361);stopdeg=quan*360+dbox=setInterval(dong,dtime); };只要每次点击，对初始化角度，随机角度和停止角度重新赋值即可。我们快速点击指针，发现转的越来越快？因为每次点击都会生成一个间隔函数，我们要判断当前是不是在抽奖中，如果处在抽奖中，点击是不会触发间隔函数的。//是否在动画中 var able=在开启后转为true，表示抽奖中function dong(){able=deg+=if(deg>stopdeg){clearInterval(dbox);able=alert(is(odeg));}else{zhizhen.style.transform="rotate(" + deg + "deg)";};}点击判断是否抽奖中zhizhen.onclick=function(){if(!able){deg=0;odeg=Math.floor(Math.random()*361);stopdeg=quan*360+dbox=setInterval(dong,dtime);};};全部代码：九.抽奖次数限制到上面，我们已经和参考效果几乎一样了，我们结合实际，一般用户只有3次机会，其实机会应该在数据库中，我们这里只是模拟处理，既然是限制次数，我们就要设置存放次数的变量：//可用次数 var cishu=3;每次点击监听可用次数：//监听点击事件 zhizhen.onclick=function(){if(!able){if(cishu==0){alert("次数耗光，等待次啊次机会！");}else{cishu-=1;deg=0;odeg=Math.floor(Math.random()*361);stopdeg=quan*360+dbox=setInterval(dong,dtime);};};};完整代码：十.概率设置中奖概率我们都听过，比如冰红茶，写着1等奖 0.0008%2等奖 0.05%幸运奖 3.2%我们实例有7个奖项，设置概率如下：00.938%10.018%20.014%30.012%40.008%50.006%60.004%和是1就对了，我们开始跳出原有思维，我们如何应用上我们的概率？我们现在有1000份，其中0-6 所对应份数就是上面乘以1000。那么我们就建立这样一个长度是1000的数组，对0-6进行存放var gailv=[[938,"未中奖"],[18,"6等奖"],[14,"5等奖"],[12,"4等奖"],[8,"3等奖"],[6,"2等奖"],[4,"1等奖"]];var allarr=[];//长度1000，存放0-6 表示奖项for(var i=0;i<gailv.i++){for(var j=0;j<gailv[i][0];j++){allarr.push(gailv[i][1]);};};var real=allarr[Math.floor(Math.random()*1000)];real存放的就是随机奖项，概率也是来自设置。此时我们处理和未加入概率是反的，我们是先有了奖项，就是此时已经知道用户要用什么奖了，我们接着就要让客户看见，指针要停在这个奖项区间内，比如我们利用概率是1等奖，那么生成的角度odeg=Math.floor(Math.random()*361);就应该固定在：[307,360,"1等奖"]//1等奖307到360之间，那么随机角度生成仅仅就是一个表现形式环节，我们修改如下产生额外角度：//通过奖项设置额外角度的表现 function set(real){var mindeg,for(var i=0;i<jiang.i++){if(real==jiang[i][2]){mindeg=jiang[i][0];maxdeg=jiang[i][1];};};return mindeg+Math.floor(Math.random()*(maxdeg-mindeg+1));};赋值：odeg=set(real);全部代码：十一.最终实例1上面的全部代码已经很完整的做到了效果交互，我们进一步做优化，让代码看起来更加整洁，去除无用的操作：主要修改了弹出获奖信息会在500毫秒以后相应，更加的舒服。十二.最终实例2 对比参考，人家可是开始快，最后慢的，我们既然写了，就做到他功能好的我都有，他缺的功能我也有这一步：我们就让最后一圈慢，额外的转动最慢就可以了。起始圈数是0，每次到达360倍数时就会增加圈数，我们对圈数计数和修改增量：if(deg%360==0){//判断第几圈xq+=1;if(xq==quan-1){//到最后一圈cc=1;//增量变为1 变慢旋转};zhizhen.style.transform="rotate(" + deg + "deg)";}else{zhizhen.style.transform="rotate(" + deg + "deg)";};完整实例： 效果：十三.九宫格大转盘除了上面那种指针转盘，其实在类似效果中还有九宫格大转盘，也是常见效果之一，参考：/yanshi2022他们的原理其实非常相似，只不过额外角度会变成额外的索引值，利用jq开发，增加速率：123412511610987抽奖 为了增加知识量，我们的将间隔函数采用递归+延时函数的处理，中心原理几乎一致，额外的随机生成，总圈数的设置，最后开始变慢，不过这次我们是利用延时加长的设置，才用了总计数和圈计数的分别处理，同样i我们也可以利用 总计数/12 的模。 效果： 最终效果实例下载：http://www.oschina.net/code/snippet_97结尾要吐槽：近期大部分都是对js知识介绍，到这时已经70篇了（第一篇是15年8月），虽然几乎没人看，不过我还是会坚持下去（最起码作为自己学习日记使用）。这一片算是改改口味，贴合实际的实例开发。吐槽：我的博客都是文字和源码结合展示，几乎全部手打，文字+源码，那么源码我敢粘贴到博客里让你去测试，说明我肯定运行过了，运行的前面要花费多少工夫，对于搞it的你写一个效果花费时间只多不少，而且一片博客有多少源码我就不骄傲了。我自己感觉前端的东西是十分容易测试的（新建.html文件+复制+粘贴+运行），同样只有真的有了代码，去运行了，还看到结果了，然后结合一些解释，才可能或多或少学一点点东西（发现这个效果有点意思，我喜欢，也可能突然领悟就是这个原理）。博客其实主要作用是自己知识的总结，分享出来感觉可能会帮助那么几个人。
相关推荐：　　为了获取客户、回馈客户，平台一般会推出抽奖活动类的营销页。因此web页面中，有各式各样的抽奖效果。
　　格子式(九宫格)，背景滚动式(数字/文字/图案)，旋转式(转盘)，游戏式(砸蛋/拼图...)......
　　这里来讲解下转盘抽奖效果。
　　当用户进入这
最终效果实例下载：http://www.oschina.net/code/snippet_97
一.大转盘准备工作
网上的一个抽奖大转盘实例/yanshi2252
这就是我们要开发的效果，不过我们...
------分隔线----------------------------
相关阅读排行}