用60行代碼實現一個高性能的聖誕抽抽樂H5小遊戲(含源碼)

NO IMAGE

今天聖誕節,先預祝大家節日快樂.既然是聖誕節,那我們就來學點有意思的,用幾十行代碼來實現一個高性能的抽獎小遊戲.也基於此,來鞏固我們的javascript基礎,以及前端一些基本算法的應用.

效果展示

用60行代碼實現一個高性能的聖誕抽抽樂H5小遊戲(含源碼)

你將收穫

  • 防抖函數的應用
  • 用css實現九宮格佈局
  • 生成n維環形座標的算法
  • 如何實現環形隨機軌道運動函數
  • 實現加速度動畫
  • 性能分析與優化

設計思路

用60行代碼實現一個高性能的聖誕抽抽樂H5小遊戲(含源碼)

具體實現

由於目前已有很多方案可以實現九宮格抽獎動畫,比如使用動態active實現邊框動畫,用隨機算法和定時器設置在何處停止等等.
為了進一步提高性能,本文介紹的方法,將使用座標法,將操作dom的成本降低,完全由js實現滑塊的路徑的計算,滑塊元素採用絕對定位,讓其脫離文檔流,避免其他元素的重繪等等,最後點擊按鈕我們會使用防抖函數來避免頻繁執行函數,造成不必要的性能損失.

1. 九宮格佈局實現

為了讓大家更加熟悉dom結構,這裡我就不用js動態生成了.如下html結構:

<div class="wrap">
<div class="title">聖誕抽抽樂</div>
<div class="box">
<div class="item">我愛你</div>
<div class="item">你愛我</div>
<div class="item">我不愛你</div>
<div class="item">你愛我</div>
<div class="item start">開始</div>
<div class="item">你愛我</div>
<div class="item">再見</div>
<div class="item">謝謝惠顧</div>
<div class="item">你愛我</div>
<div class="spin"></div>
</div>
</div>

九宮格佈局我們使用flex來實現,核心代碼如下:

.box {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
position: relative;
.item {
box-sizing: border-box;
width: 100px;
}
// 滑塊
.spin {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100px;
height: 100px;
background-color: rgba(0,0,0,.2);
}
}

由上可知容器box採用flex佈局,要想讓flex子元素換行,我們這裡要設置flex-wrap: wrap;此時九宮格佈局就實現了. 滑塊採用絕對定位,至於具體如何去沿著環形軌道運動,請繼續看下文介紹.

2.生成n維環形座標的算法

用60行代碼實現一個高性能的聖誕抽抽樂H5小遊戲(含源碼)

由上圖我們可以知道,一個九宮格的4條邊,可以用以上8個座標收尾連接起來,那麼我們可以基於這個規律.來生成環形座標集合.代碼如下:

/**
* 生成n維環形座標
* @param {number} n 維度
* @param {number} cell 單位座標長度
*/
function generateCirclePath(n, cell) {
let arr = []
for(let i=0; i< n; i++) {
arr.push([i*cell, 0])
}
for(let i=0; i< n-1; i++) {
arr.push([(n-1)*cell, (i+1)*cell])
}
for(let i=0; i< n-1; i++) {
arr.push([(n-i-2)*cell, (n-1)*cell])
}
for(let i=0; i< n-2; i++) {
arr.push([0, (n-i-2)*cell])
}
return arr
}

如果是單位座標,那麼cell為1,cell設計的目的就位為了和現實的元素相結合,我們可以手動設置單元格的寬度來實現不同大小的n維環形座標集.

3.實現環形隨機軌道運動函數

由抽獎動畫分析可知,我們滑塊運動的軌跡,其實就是環形座標集合,所以我們只要讓滑塊的頂點(默認左上角)沿著環形座標集合一步步變化就好了.

function run(el, path, n = 1, i = 0, len = path.length) {
setTimeout(() => {
if(n > 0) {
if(len <= i) {
i = n === 1 ? len : 0
n--
}
el.css('transform', `translate(${path[i][0]}px, ${path[i][1]}px)`)
run(el, path, n, ++i, len)
}
}, 300)   
}

這樣就能實現我們的滑塊按照九宮格邊框運動的動畫了,當然以上函數只是基本的動畫, 還沒有實現在隨機位置停止, 以及滑塊的加速度運動,這塊需要一定的技巧和js基礎知識比如閉包.

3.1 加速度運動

加速度運動其實很簡單,比如每轉過一圈將setTimeout的延遲時間改變即可.代碼如下:

function run(el, path, n = 1, speed = 60, i = 0, len = path.length) {
setTimeout(() => {
if(n > 0) {
if(len <= i) {
i = n === 1 ? len : 0
n--
speed += (300 - speed) / n
}
el.css('transform', `translate(${path[i][0]}px, ${path[i][1]}px)`)
run(el, path, n, speed, ++i, len)
}
}, speed)   
}
3.2 隨機停止實現

隨機停止這塊主要是用了Math.random這個API, 我們在最後一圈的時候, 根據隨機返回的數值來決定何時停止,這裡我們在函數內部實現隨機數值,完整代碼如下:

/**
* 環形隨機軌道運動函數
* @param {element} el 運動的dom元素
* @param {array} path 運動的環形座標集合
* @param {number} speed 運動的初始速度
* @param {number} i 運動的初始位置
* @param {number} len 路徑的長度
* @param {number} random 中獎座標
*/
function run(el, path, n = 1, speed = 60, i = 0, len = path.length, random = Math.floor(Math.random() * len)) {
setTimeout(() => {
if(n > 0) {
// 如果n為1,則設置中獎數值
if(n === 1) {
len = random
}
if(len <= i) {
i = n === 1 ? len : 0
n--
speed += (300 - speed) / n
}
el.css('transform', `translate(${path[i][0]}px, ${path[i][1]}px)`)
run(el, path, n, speed, ++i, len, random)
}
}, speed)   
}

4.實現點擊開始的防抖函數以及應用

防抖函數實現:

// 防抖函數,避免頻繁點擊執行多次函數
function debounce(fn, interval = 300) {
let timeout = null
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, arguments)
}, interval)
}
}

那麼我們點擊時,代碼應該長這樣:

// 點擊開始按鈕,開始抽獎
$('.start').on('click',debounce(() => { run($('.spin'), generateCirclePath(3, 100), 3) }))

延伸

在文章發佈之後,有熱心的小夥伴們提出了幾個建議,綜合如下:

  • 抽獎動畫結束後提供回調來通知頁面以便處理其他邏輯
  • 處理多次點擊時,雖然加了防抖,但是用戶在動畫沒結束時點擊了開始按鈕,又會執行動畫導致動畫越來越快,發生混亂.

綜合以上問題,我在之前基礎上做了進一步擴展,來解決以上提到的問題.

  1. 添加動畫結束時回調:
/**
* 環形隨機軌道運動函數
* @param {element} el 運動的dom元素
* @param {array} path 運動的環形座標集合
* @param {func} cb 動畫結束時回調
* @param {number} speed 運動的初始速度
* @param {number} i 運動的初始位置
* @param {number} len 路徑的長度
* @param {number} random 中獎座標
*/
function run(el, path, n = 1, cb, speed = 60, i = 0, len = path.length, random = Math.floor(Math.random() * len)) {
setTimeout(() => {
if(n > 0) {
// 如果n為1,則設置中獎數值
if(n === 1) {
len = random
}
if(len <= i) {
i = n === 1 ? len : 0
n--
speed += (300 - speed) / n
}
el.css('transform', `translate(${path[i][0]}px, ${path[i][1]}px)`)
run(el, path, n, cb, speed, ++i, len, random)
}else {
cb && cb()
}
}, speed)
}
  1. 處理多次點擊時,雖然加了防抖,但是用戶在動畫沒結束時點擊了開始按鈕,又會執行動畫導致動畫越來越快,發生混亂.
// 1. 點擊開始按鈕,開始抽獎
$('.start').on('click',debounce(() => {
// 點擊開始後禁用點擊
$('.start').css('pointer-events', 'none')
run($('.spin'), generateCirclePath(3, 100), 3, () => {
// 動畫結束後開啟按鈕點擊
$('.start').css('pointer-events', 'auto')
alert('抽獎結束')
}) 
}))

謝謝各位認真的建議,繼續優化吧.

總結

該實現方式的好處是支持n維環形座標的抽獎,基於座標法的應用還有很多,尤其是遊戲和圖形領域,在實現過程中一定要考慮性能和可擴展性,這樣我們就可以在不同場景使用同一套方法論,豈不樂哉?本文完整源碼我會放在github上,歡迎交流學習~

最後

如果想了解更多H5遊戲, webpacknodegulpcss3javascriptnodeJScanvas數據可視化等前端知識和實戰,歡迎在公眾號《趣談前端》加入我們一起學習討論,共同探索前端的邊界。

用60行代碼實現一個高性能的聖誕抽抽樂H5小遊戲(含源碼)

更多推薦

相關文章

一文帶你瞭解OAuth2協議與SpringSecurityOAuth2集成!

「又是一年跳槽季」380+篇前端面試文章助你一臂之力🔥

[2020,步履不停|年度徵文]

Flutter終於有可視化編輯頁面了(HotUI)