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

摘要： 同步的方式讀取樣式表文件，如果樣式表不存在，那麼建立一個style元素，設定樣式表內容，並新增到head的尾部 !function() { let styleStr = fs.readFileSync(__dirname + '/assets/css/style.css'...

同步的方式讀取樣式表文件，如果樣式表不存在，那麼建立一個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 })
})
}
複製程式碼

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