用60行程式碼實現一個高效能的聖誕抽抽樂H5小遊戲(含原始碼)

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

效果展示

你將收穫

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

設計思路

具體實現

由於目前已有很多方案可以實現九宮格抽獎動畫,比如使用動態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維環形座標的演算法

由上圖我們可以知道,一個九宮格的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) }))
複製程式碼

延伸

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

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

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

新增動畫結束時回撥:

/**
* 環形隨機軌道運動函式
* @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. 點選開始按鈕,開始抽獎
$('.start').on('click',debounce(() => {
    // 點選開始後禁用點選
    $('.start').css('pointer-events', 'none')
    run($('.spin'), generateCirclePath(3, 100), 3, () => {
      // 動畫結束後開啟按鈕點選
      $('.start').css('pointer-events', 'auto')
      alert('抽獎結束')
    }) 
}))
複製程式碼

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

總結

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

最後

如果想了解更多H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas資料視覺化等前端知識和實戰，歡迎在公眾號《趣談前端》加入我們一起學習討論，共同探索前端的邊界。