在进行HTML5游戏开发的时候，必然会碰到的问题就是资源加载。

下面我们来尝试一个简单的多资源加载的示例。

代码如下:

function Loader() {
	this.loadAllCount = 0;
	this.loadNowCount = 0;
	this.loadImages = {};
	this.onLoadResource = function() {
		this.loadNowCount++;
		if (this.loadNowCount >= this.loadAllCount) {
			this.loadAllCount = 0;
			this.loadNowCount = 0;
			/*进行自己的操作
			player.img = loader.loadImages[0];
			map.Level = allLevels[nowLevel - 1];
			map.MapCols = map.Level[0].length;
			map.MapRows = map.Level.length;
			map.InitMap();
			setInterval(loop, 1000 / FPS);*/
		}
	}
	this.loadResource = function(src) {
		var num = src.length;
		this.loadAllCount = src.length;
		for (var i = 0; i < num; i++) {
			this.loadImages[i] = new Image();
			this.loadImages[i].onload = this.onLoadResource();
			this.loadImages[i].src = src[i];
		}
	}
}

我们创建了一个类Loader(其实算是仿造)，在里面定义了一个onLoadResource函数，每加载一个图片就将计数+1，全部加载完成后，再实现自己的操作的。

另外创建了一个函数loadResource，从函数中传递一个路径字符串数组，依次加载。

载入资源的时候只需按如下使用即可:

loader.loadResource(["img/Character1.png", "img/Character2.png", "img/Character4.png", "img/Character7.png", "img/Crate.png", "img/EndPoint.png", "img/Wall.png", "img/GroundGravel_Dirt.png"]);

我也是刚使用HTML5开发游戏，所以准备都自己写一下试试，后期估计会考虑使用一个游戏引擎了。毕竟对于开发人员来说，工作量能减少才是最好的。