功能
- 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);
});
}
}
}
});
}
}
使用
-
首先要有一个json文件,保存资源路径
-
json格式的文本转化为json对象:
JSON.parse(text)
-
实例化静态资源类
sr = new StaticResourceUtil();
-
执行图片加载
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(); } });