基於H5 canvas API 編寫的掃雷遊戲第一部分：資源載入

JSER發表於2018-11-10
H5CanvasAPI遊戲

本遊戲使用parcel構建的，parceljs.cn 這是一個0配置的構建工具

引入fs模組

用來載入資原始檔，如：樣式表，圖片，html模板等

import fs from 'fs'
複製程式碼

載入樣式表

同步的方式讀取樣式表檔案，如果樣式表不存在，那麼建立一個style元素，設定樣式表內容，並新增到head的尾部

!function() {
  let styleStr = fs.readFileSync(__dirname + '/assets/css/style.css', 'utf8')
  const styleEl = document.getElementById('gameStylesheet')
  if (styleEl) return
  const newStyleEl = document.createElement('style')
  newStyleEl.type = 'text/css'
  newStyleEl.id = 'gameStylesheet'
  newStyleEl.innerHTML = styleStr
  document.head.appendChild(newStyleEl)
}()
複製程式碼

建立資源物件

我們用它來管理圖片和html模板素材；icons 屬性儲存圖片物件，isIconsLoaded 標識圖片資源是否已載入完成；

const source = { icons: {}, isIconsLoaded: false }
複製程式碼

載入圖片資源

轉化為base64字串後，賦值給 source.base64Strs，這裡採用立即執行的匿名函式來一次性轉化buffer為base64字串

source.base64Strs = (() => {
  const bufIcons = {
    blockEnd: fs.readFileSync(__dirname + '/assets/img/back.png'),
    blockFront: fs.readFileSync(__dirname + '/assets/img/front.png'),
    bomb: fs.readFileSync(__dirname + '/assets/img/bomb.png'),
    flag: fs.readFileSync(__dirname + '/assets/img/flag-color.png')
  }, rtnObj = {}
  Object.keys(bufIcons).forEach(_ => 
    rtnObj[_] = `data:image/png;base64,${bufIcons[_].toString('base64')}`
  )
  return rtnObj
})()
複製程式碼

載入單個圖示檔案

這將返回一個承諾物件

source.loadSingleIcon = function (key) {
  return new Promise(resolve => {
    const image = new Image()
    image.onload = () => {
      image.onload = null
      resolve({ [key]: image })
    }
    image.src = this.base64Strs[key]
  })
}
複製程式碼

載入所有的圖示檔案

如果圖示已經被載入，那麼返回一個resolve的承諾，否則載入所有圖示資源並賦值給資源物件的icons屬性

source.loadIcons = function () {
  if (this.isIconsLoaded) return Promise.resolve()
  return Promise.all(Object.keys(this.base64Strs).map(_ => 
    this.loadSingleIcon(_)
  )).then(values => {
    this.isIconsLoaded = true
    values.forEach(item => this.icons = { ...this.icons, ...item })
  })
}
複製程式碼

到這裡我們的掃雷遊戲資源物件的編寫已經結束了，大家有什麼不理解的地方歡迎評論交流；明天我將帶大家實現方塊類的編寫；第一次寫技術文章，有什麼不到之處還請見諒；

相關文章