基於H5 canvas API 編寫的掃雷遊戲第一部分:資源載入
同步的方式讀取樣式表文件,如果樣式表不存在,那麼建立一個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 }) }) } 複製程式碼
到這裡我們的掃雷遊戲資源物件的編寫已經結束了,大家有什麼不理解的地方歡迎評論交流;明天我將帶大家實現方塊類的編寫;第一次寫技術文章,有什麼不到之處還請見諒;