基于H5 canvas API 编写的扫雷游戏第一部分：资源加载-CSDN博客

本游戏使用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 })
  })
}
复制代码

到这里我们的扫雷游戏资源对象的编写已经结束了，大家有什么不理解的地方欢迎评论交流；明天我将带大家实现方块类的编写；第一次写技术文章，有什么不到之处还请见谅；