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();
        }
    });
    
发布了270 篇原创文章 · 获赞 123 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/KaiSarH/article/details/104678675

相关文章