基于H5 canvas API 编写的扫雷游戏第一部分:资源加载

栏目: Html5 · 发布时间: 6年前

内容简介:同步的方式读取样式表文件,如果样式表不存在,那么创建一个style元素,设置样式表内容,并添加到head的尾部我们用它来管理图片和html模板素材;转化为base64字符串后,赋值给

同步的方式读取样式表文件,如果样式表不存在,那么创建一个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 })
  })
}
复制代码

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP 5完全攻略

PHP 5完全攻略

杜江 / 2010-5 / 79.00元

《PHP 5完全攻略(畅销书升级版)》是目前第一本真正介绍PHP 5及MySQL 5新增语法与功能的中文版本权威宝典!《PHP 5完全攻略(畅销书升级版)》本着精、全、要三宗旨,从理论中延伸,从实践中深入,翔实并完善地描述了PHP 5的开发特性与MySQL 5数据库。《PHP 5完全攻略(畅销书升级版)》分为两大部分,第1部分主要阐述PHP开发的基础知识,如PHP数组与表单处理、PHP 5面向对象......一起来看看 《PHP 5完全攻略》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具