需求:做一个抽奖模块,要求如下
抽中宠物的概率为0.8%，稀有道具召唤基础概率为29.2%，普通道具召唤基础概率为70%。
如果连续35次没有获得推荐宠物，则下一次召唤获得推荐宠物的概率将从原本的0.8%提升至3.8%，依此类推每次提升3%的召唤获得概率。如果连续49次没有获得推荐宠物，则第50次必出推荐宠物。若当前已许愿，则获得的推荐宠物必为许愿宠物.
各位洛批有没有觉得很熟悉,是不是有似曾相识的感觉(懂的都懂)
这个我一开始是用原生写的,后来觉得操dom太长了就换jq了.这边我就不放jq代码了,大家应该都没怎么学过jq,我当时是用jq写了正式版的,还加了一个查看记录的功能.有兴趣可以私聊我. 先贴个ui代码,大家可以把图片换成自己喜欢的图片.如果没图片就设置个背景颜色就ok.
<div class="box">
<div class="contentBox">
<p>你的钻石余额 <i class="money">800</i></p>
<div class="gambled"><button class="gambled1">抽一次</button> <button class="gambled10">抽十次</button></div>
<p>抽奖次数:<i class="num">0</i> 消耗钻石:<i class="cost">0</i></p>
<div id="gift" class="result">恭喜你!抽中了宠物</div>
<div id="rubbish1" class="result">抽中了普通道具,无事发生</div>
<div id="rubbish2" class="result">抽中了稀有道具,继续努力吧</div>
<button class="reset">重置</button>
</div>
</div>
效果大致是这样的:
那下面我们来看一下代码.我简单说一下思路.ps:写的可能比较长比较冗余大家别喷我,因为咱是农村人,也没学过算法,一切都是靠自己琢磨,仅供参考.
-
如何判定是否中奖? 我是把0~1分成了三份,然后调用Math.random()方法看数落在哪个区间,判定中了什么奖
-
如何在抽完一次之后增加概率? 那就是把区间扩宽一点 例如第一次 0-0.8%区间为中奖区间, 第36次就0-3.8%为中奖区间.
-
radNum1000 >= 8+30(n-35) && radNum1000 < 300-15(n-35) 是什么意思?这个是因为小数精度丢失问题,要把他转成整数,不然会出问题.
-
其他:操作dom这种就不必多说.最后那个while循环是用来抽十次的,也就是说,抽十次实际上就是调用十次那个抽一次的函数.
效果展示: 中奖之后会弹窗,然后画面大致是这样....
代码贴出来大家自己琢磨琢磨
( function (){
const gift = document.querySelector('#gift');
const rubbish1 = document.querySelector('#rubbish1');
const rubbish2 = document.querySelector('#rubbish2');
const resetBtn = document.querySelector('.reset');
const gambled1Btn = document.querySelector('.gambled1');
const gambled10Btn = document.querySelector('.gambled10');
let arr = [];
function reset () {
gambled1Btn.style.display = 'inline-block';
gambled10Btn.style.display = 'inline-block';
resetBtn.style.display = 'none';
gift.style.display = 'none';
document.querySelector('.money').innerHTML = 800;
document.querySelector('.num').innerHTML = 0;
document.querySelector('.cost').innerHTML = 0;
arr = [];
}
function gambled1(m,n,c) {
gift.style.display = 'none'
rubbish2.style.display = 'none'
rubbish1.style.display = 'none'
const radNum = Math.random()
let result = -1; // 1表示普通道具 2表示稀有道具 0表示中奖
m -= 16;
n++;
c+=16;
document.querySelector('.money').innerHTML = m;
document.querySelector('.num').innerHTML = n;
document.querySelector('.cost').innerHTML = c;
if (n <= 35) {
if (radNum < 0.008) {
result = 0
alert('恭喜你 中奖啦!')
}
else if (radNum >= 0.008 && radNum < 0.3) {
result = 2
}
else {
result = 1
}
}
else if (n > 35 && n < 50) {
if (radNum*1000 < 8+30*(n-35)) {
result = 0
alert('恭喜你 中奖啦!')
}
else if (radNum*1000 >= 8+30*(n-35) && radNum*1000 < 300-15*(n-35) ) {
result = 2
}
else {
result = 1
}
}
else if (n == 50) {
result = 0
alert('保底了!大非酋')
}
switch(result) {
case 0:
gift.style.display = 'block'
resetBtn.style.display = 'block'
gambled1Btn.style.display = 'none'
gambled10Btn.style.display = 'none'
break;
case 1:
rubbish1.style.display = 'block'
break;
case 2:
rubbish2.style.display = 'block'
break;
}
arr.push(result)
console.log("第"+n+"次"+radNum)
console.log(arr)
}
gambled1Btn.addEventListener('click', function() {
let money = parseInt(document.querySelector('.money').innerHTML)
let num = parseInt(document.querySelector('.num').innerHTML)
let cost = parseInt(document.querySelector('.cost').innerHTML)
gambled1(money,num,cost)
})
resetBtn.addEventListener('click',function() {
reset()
})
gambled10Btn.addEventListener('click',function() {
let i = 0;
if (parseInt(document.querySelector('.money').innerHTML) < 160) {
alert('余额不足!请充值')
return;
}
do {
let money = parseInt(document.querySelector('.money').innerHTML)
let num = parseInt(document.querySelector('.num').innerHTML)
let cost = parseInt(document.querySelector('.cost').innerHTML)
gambled1(money,num,cost);
i++;
if (resetBtn.style.display == 'block') {
i = 11;
}
}
while(i < 10)
})
}) ()
```
