在實現(xiàn)活動頁的時候經(jīng)常會遇到要寫滾動抽獎游戲的需求，類似如下奇瘦，按順時針滾動：
| 0 | 1 | 2 |
|---|---|---|
| 7 | 抽獎按鈕 | 3 |
| 6 | 5 | 4 |
思路：根據(jù)定位索引判斷結(jié)束點棘催。
一般情況下，會有一個獎品個數(shù)award_num（比如上圖就是8個）耳标，默認(rèn)的滾動圈數(shù)default_times醇坝，在默認(rèn)滾動圈數(shù)default_times完成后進(jìn)行結(jié)果result定位，所以當(dāng)前累計的滾動次數(shù)interval_times要大于等于默認(rèn)滾動次數(shù)default_times次坡，對結(jié)果定位就是使累計次數(shù)對獎品個數(shù)取余呼猪，如果相同則定位正確：
if(interval_times >= default_times && interval_times % award_num === result) {
// 定位到結(jié)果獎品
}
完整代碼：
function postLottery() {
const _this = this;
let result = -1, // 結(jié)果索引
interval_index = 0,
lottery_index = 0, // 當(dāng)前定位索引
award_num = 8,
_times = award_num * 2,
_speed = 100;
let lotteryInterval = setInterval(roundFunction, _speed);
function roundFunction() {
if (result > -1) {
// ^ 接口產(chǎn)生結(jié)果，判斷并定位結(jié)果
if (interval_index >= _times && interval_index % award_num === result) {
clearInterval(lotteryInterval);
setTimeout(() => {
// 展示結(jié)果
}, 300);
return;
}
}
lottery_index = lottery_index === award_num - 1 ? 0 : lottery_index + 1;
interval_index++;
}
// 抽獎post請求砸琅，異步獲取結(jié)果result
$.ajax({
type: 'POST',
url: '...',
dataType: 'json',
headers: _this.getRequestHeaders(),
success: function(res) {
result = res.result; // 請求抽獎結(jié)果
},
error: err => {
showMessage('抽獎失敗', 2000, true);
}
});
}
新優(yōu)化：動態(tài)改變滾動速度宋距，提高用戶體驗
然后此時為了更好的用戶體驗需求又來了，為了增加緊張感需要進(jìn)行動態(tài)的改變滾動速度症脂，快要結(jié)束時速度變慢谚赎。
以上圖為例，定位到結(jié)果前4（n）個開始速度變慢摊腋。
思路：在還剩最后一圈時候?qū)Ξ?dāng)前定位進(jìn)行判斷沸版，所以需要在結(jié)果出來之后先計算定位到結(jié)果需要的滾動次數(shù)total_times，需要在結(jié)果前n個開始速度變慢兴蒸，那么在最后一圈的時候需要當(dāng)前是否為前第n個：
if(total_times - interval_times >= award_num && Math.abs(interval_times % award_num - result) === n){
// 當(dāng)前可以開始改變速度
}
完整代碼：
function postLottery() {
const _this = this;
let result = -1,
init_result = 0,
total_interval = 0, // 定位結(jié)果需要的總次數(shù)
lottery_index = 0,
interval_index = 0,
award_num = 8,
_times = award_num * 2,
_speed = 100,
slow_index = 4; // 速度需要變慢的地方
let lotteryInterval = setInterval(roundFunction, _speed);
function roundFunction() {
if (result > -1) {
if(!init_result) { // ^ 結(jié)果產(chǎn)生時视粮，先計算當(dāng)前累計滾動次數(shù)
total_interval = roundTotal(interval_index, _times, result);
}
init_result = true;
// ! 產(chǎn)生結(jié)果后判斷需要速度變慢的位置
// TODO 計算最后一圈
if((total_interval - interval_index) <= award_num && Math.abs(result - interval_index % award_num) === slow_index) {
_speed = 300; // 改變速度
clearInterval(lotteryInterval);
lotteryInterval = setInterval(roundFunction, _speed);
}
// ^ 接口產(chǎn)生結(jié)果
if (interval_index >= _times && interval_index % award_num === result) {
clearInterval(lotteryInterval);
setTimeout(() => {
// 展示結(jié)果
}, 300);
return;
}
}
lottery_index = lottery_index === award_num - 1 ? 0 : lottery_index + 1;
interval_index++;
}
// & 計算滾動到結(jié)果需要的累計次數(shù)
function roundTotal(current, _times, result) {
let total = 0;
if(current <= _times) {
total = _times + result;
} else {
total = current + Math.abs(award_num - result);
}
return total;
}
// 抽獎post請求，異步獲取結(jié)果result
$.ajax({
type: 'POST',
url: '...',
dataType: 'json',
headers: _this.getRequestHeaders(),
success: function(res) {
result = res.result; // 請求抽獎結(jié)果
},
error: err => {
showMessage('抽獎失敗', 2000, true);
}
});
}
