大转盘代码概率算法已经写好

所属分类:其他-游戏

 49499  382  查看评论 (10)
分享到微信朋友圈
X
大转盘代码概率算法已经写好 ie兼容10

大转盘由原生js实现

里面已经写好概率算法 

下面附带一下简答你的代码 :  

任何问题加QQ 1041993416 ; 在的话会回应 ; 以后还会分享其他代码 ;  

转盘旋转结构 

<ul id="wheel" class="wheel-list">
	<li style="transform: rotate(0deg);">
		<i style="transform: rotate(30deg) skewY(30deg);">
		</i>
		<div class="prize">
			<h3>
				一等奖
			</h3>
			<p>
				iPhone6 plus
			</p>
		</div>
	</li>
	<li style="transform: rotate(60deg);">
		<i style="transform: rotate(30deg) skewY(30deg);">
		</i>
		<div class="prize">
			<h3>
				再接再厉
			</h3>
			<p>
				呜呜 没有中奖 ...
			</p>
		</div>
	</li>
	<li style="transform: rotate(120deg);">
		<i style="transform: rotate(30deg) skewY(30deg);">
		</i>
		<div class="prize">
			<h3>
				鼓励奖
			</h3>
			<p>
				差一点啊
			</p>
		</div>
	</li>
	<li style="transform: rotate(180deg);">
		<i style="transform: rotate(30deg) skewY(30deg);">
		</i>
		<div class="prize">
			<h3>
				四等奖
			</h3>
			<p>
				特级红富士一个
			</p>
		</div>
	</li>
	<li style="transform: rotate(240deg);">
		<i style="transform: rotate(30deg) skewY(30deg);">
		</i>
		<div class="prize">
			<h3>
				三等奖
			</h3>
			<p>
				iPad mini retina
			</p>
		</div>
	</li>
	<li style="transform: rotate(300deg);">
		<i style="transform: rotate(30deg) skewY(30deg);">
		</i>
		<div class="prize">
			<h3>
				二等奖
			</h3>
			<p>
				iPad Air2
			</p>
		</div>
	</li>
</ul>

算法js : 

//开始 function  ran = 随机 
function operation(ran) {
	lenCloc++;
	var Prize = turntable[ran] - 1,
	sun = turn * 360; //编号  // 度数  //  时间
	if (Prize >= totalNum) {
		Prize = 0;
	}
	var soBuom = parseInt(Math.floor(Math.random() * 60) - 30);
        //避免多次出现1等奖 所以要删除 下标 
	turntable.splice(ran, 1);
	//旋转度数 = 上次度数+ 最小圈数 * 360 + 当前数字 * 60 +随机角度  = 最终旋转度数
	wheel.style.transform = "rotate(" + ((lenCloc * sun + Prize * 60) + soBuom) + "deg)";
	//wheel.style.webkitTransform = "rotate("+((lenCloc*sun+Prize*60)+soBuom)+"deg)";
	setTimeout(function() {
		alert("您获得了奖品编号:" + PrizeSon[Prize]);
		isStatr = false;
	},
	3200);
}

简单参数:

var totalNum = 6 ; // 转盘 总数
var trunNum = [ 1 , 2 , 3 , 4 , 5 , 6 ]; //概率奖品 编号
var turntable = [] ; // 随机概率计算
var isStatr = false ; //锁 专拍没有执行完的时候 不可以再次点击 ;
var lenCloc = 0 ; //当前第几次计算叠加的度数
var turn  = 3 ; //转盘旋转最低的圈数


相关插件-游戏

js+Html5捕鱼达人

js和HTML5实现网页版捕鱼达人游戏
  游戏
 45429  461

h5贪吃蛇动画

h5画布,贪吃蛇简单动画
  游戏
 33819  323

看图猜成语(原创)

看图猜成语应用源码示例
  游戏
 24765  306

移动端大转盘抽奖指定奖品+中奖名单轮播(原创)

切换至手机模式查看效果,指定奖品的大转盘抽奖,还有中奖轮播
  游戏
 27328  303

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    WckY 1
    2019/11/14 20:10:43
    代码简洁而强劲,难得一见的原生JS、纯CSS3实现的转盘demo,真的很牛逼。可扩展性强,我已经成功将该代码继续精简、优化到我的项目里了,谢谢作者的分享。有机会我会将我写的项目做二次分享,继续传播你的代码。 回复
    小二郎 0
    2019/6/5 19:49:04
    .?Tiger。 0
    2018/6/22 17:21:01
    概率是怎么设置的 回复
    肥肥猫. 0
    2018/6/15 1:01:25
    搁浅的淡白色 0
    2017/11/2 15:19:24

    能说说原理不。

    回复
    张百忍 0
    2017/7/30 14:55:25

    满足的需求不是很多,学习够用了

    回复
    曹超-Cc 0
    2016/11/30 17:11:31
    感觉角度调的有点不大对 。。。结束应该是指在中间的。而不是旁边 回复
    崔CCCCCCQJ 0
    2016/11/17 16:11:11
    你好,我想问,这个怎么使用 回复
    DIV 0
    2016/11/16 15:11:34
    不能适应移动设备 差评 回复
    勿忘初心 0
    2016/11/16 9:11:00
    不错,不用引进JQuery,纯css3绘图,牛 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复