res资源先加载到项目里。这里是图片资源。
关于资源加载的两个类，Resource和ResourceLoader.
export不仅仅可以用在类上，也可以用来变量和function上，都是相通的。但是有一点要记得，export后面一定要跟上变量的声明。它是把这个变量提供出去，并不是提供这个变量的值。export的是这个变量的引用，而不是这个变量的值。
export const Resources=[
['background','res/background.png'],
['birds','res/birds.png'],
['land','res/land.png'],
['pencilDown','res/pie_down.png'],
['pencilUp','res/pie_up.png'],
['start_Button','res/start_button.png']
];
资源文件只有两个，另外一个是ResourceLoader.js
//资源文件资源文件加载器，确保只有资源文件全部加载之后才开始渲染。
import {Resources}from "./Resources.js"; //这里要加js
export class ResourceLoader {
map =null; //语法错误，这一句去掉就好了。
constructor(){
this.map =new Map(Resources); //这里是直接把一个数组塞进去了。
for(let [key,value] of this.map)
//这是一个循环遍历，如果打印的话 console.log(key,value);可以看出其中key是键值，也就是名称，
{const image = new Image();
image.src = value;
this.map.set(key,image); }
//value是地址，这里一个循环，将地址换成image实例，并且实例有src属性，属性是对应value地址。
}
onloaded(callback) {
let loadedCount = 0;
for (let value of this.map.values()) {
}
//注意这个循环，只要其中value进行循环，不用管key的值。
}
}
在Main.js中引入ResourceLoader ，
//主控制类，初始化整个游戏的精灵，作为游戏开始入口
import {ResourceLoader}from "./js/base/ResourceLoader.js";
export class Main {
constructor(){
console.log('nihao');
new ResourceLoader()
}
}
这时候，浏览器会报错， ResourceLoader.js中 map =null;语法错误，这一句去掉就好了。
Map数据结构，是一个键值对，会以key value 存储。有set get方法。其中的值是唯一的。初始化的时候，可以不断set，还可以直接塞进去一个数组。
let 和var作用域是不一样的。
下面是使用资源加载器：在main.js里面
网友评论