JavaScript：加载请求本地资源工具StaticResourceUtil.js

功能

1. loadImages()请求本地图片资源。执行回调函数，返回已加载图片数量、图片总数料、图片对象。

代码

class StaticResourceUtil {
    constructor(){
         this.images = {};
    }

    /**
     * 加载本地的图片
     */
    loadImages(jsonURL, callBack){
       // 1. 创建xhr对象
       let xhr = new XMLHttpRequest();
       // 2. AJAX三步走
       xhr.open('get', jsonURL, true);
       xhr.send();
       xhr.addEventListener('readystatechange', ()=>{
           if(xhr.readyState === 4){
               if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    // 2.0 已经加载好的图片数量
                   let alreadyLoadNumber = 0;
                   // 2.1 转成json对象
                   let jsonObj = JSON.parse(xhr.responseText);
                   // 2.2 遍历
                   for (let i = 0; i < jsonObj.images.length; i++) {
                        // 2.2.1 创建一个图片对象
                       let image = new Image();
                       // 2.2.2 设置src属性
                       image.src = jsonObj.images[i].src;
                       // 2.2.3 加载完成
                       image.addEventListener('load', ()=>{
                            // 2.2.4 加载完成的图片数量+1
                           alreadyLoadNumber++;
                            // 2.2.5 保存图片对象
                            let key = jsonObj.images[i].name;
                            this.images[key] = image;
                            // console.log(this.images);
                            // 2.2.6 调用回调函数 把 参数返回出去
                           callBack && callBack(alreadyLoadNumber, jsonObj.images.length, this.images);
                       });
                   }
               }
           }
       });
    }

}

使用

1. 首先要有一个json文件，保存资源路径

2. json格式的文本转化为json对象：

   JSON.parse(text)
   

3. 实例化静态资源类

   sr = new StaticResourceUtil();
   

4. 执行图片加载

   sr.loadImages('resource.json', (alreadyLoadNum, allNum, imageObj)=>{
       // alreadyLoadNum 已经加载的数量 allNum 全部图片数量 imageObj 加载的全部图片对象
        // 7.1 清屏
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       // 7.2 打印当前加载的资源数量
       ctx.font = '30px Microsoft YaHei';
       ctx.fillText('正在加载游戏需要资源： ' + alreadyLoadNum + '/' + allNum, canvas.width * 0.4, canvas.height * 0.4);
       // 7.3 判断，游戏是否开始
       if(alreadyLoadNum === allNum){
           //7.4 赋值图片资源
           console.log(imageObj);
           images = imageObj;
           // 7.5 开始游戏
           run();
       }
   });