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

時間 2019-12-28

標籤代碼實現一個高性能 h5 遊戲源碼欄目遊戲简体版

原文原文鏈接

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

效果展現

你將收穫

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

設計思路

具體實現

因爲目前已有不少方案能夠實現九宮格抽獎動畫,好比使用動態active實現邊框動畫,用隨機算法和定時器設置在何處中止等等. 爲了進一步提升性能,本文介紹的方法,將使用座標法,將操做dom的成本下降,徹底由js實現滑塊的路徑的計算,滑塊元素採用絕對定位,讓其脫離文檔流,避免其餘元素的重繪等等,最後點擊按鈕咱們會使用防抖函數來避免頻繁執行函數,形成沒必要要的性能損失.css

1. 九宮格佈局實現

爲了讓你們更加熟悉dom結構,這裏我就不用js動態生成了.以下html結構: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;此時九宮格佈局就實現了. 滑塊採用絕對定位,至於具體如何去沿着環形軌道運動,請繼續看下文介紹.vue

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維環形座標集.java

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

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

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基礎知識好比閉包.webpack

3.1 加速度運動

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

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, 咱們在最後一圈的時候, 根據隨機返回的數值來決定什麼時候中止,這裏咱們在函數內部實現隨機數值,完整代碼以下:git

/** * 環形隨機軌道運動函數 * @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數據可視化等前端知識和實戰，歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。