本游戏使用 parcel 构建的, https://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 })
- })
- }
到这里我们的扫雷游戏资源对象的编写已经结束了, 大家有什么不理解的地方欢迎评论交流; 明天我将带大家实现方块类的编写; 第一次写技术文章, 有什么不到之处还请见谅;
来源: https://juejin.im/post/5be6e4d2e51d4554b54b1743