Microsoft HTML5 Platform game: ContentManager rewritten using PreloadJS

ContentManager.js

"use strict";
(function(window) {
	// Callback, all files are loaded
	var ondownloadcompleted;
	var downloadProgress;
	var preload;
	var numElementsLoaded = 0;
	var soundCount = 0;
	var self;
	var manifest = [
		// Sounds
		// SoundJS will handle which file to download
		{src: "sounds/Music.mp3|sounds/Music.ogg", id: "globalMusic"},
		{src: "sounds/PlayerKilled.mp3|sounds/PlayerKilled.ogg", id: "playerKilled"},
		{src: "sounds/PlayerJump.mp3|sounds/PlayerJump.ogg", id: "playerJump"},
		{src: "sounds/PlayerFall.mp3|sounds/PlayerFall.ogg", id: "playerFall"},
		{src: "sounds/ExitReached.mp3|sounds/ExitReached.ogg", id: "exitReached"},
		// Backgrounds: added in Constructor
		// Sprites
		{src: "img/Player.png",   id: "imgPlayer"},
		{src: "img/MonsterA.png", id: "imgMonsterA"},
		{src: "img/MonsterB.png", id: "imgMonsterB"},
		{src: "img/MonsterC.png", id: "imgMonsterC"},
		{src: "img/MonsterD.png", id: "imgMonsterD"},
		// Overlays
		{src: "overlays/you_win.png", id: "winOverlay"},
                {src: "overlays/you_lose.png", id: "loseOverlay"},
                {src: "overlays/you_died.png", id: "diedOverlay"},
		// Blocks
		{src: "img/Tiles/BlockA0.png", id: "imgBlockA0"},
		{src: "img/Tiles/BlockA1.png", id: "imgBlockA1"},
		{src: "img/Tiles/BlockA2.png", id: "imgBlockA2"},
		{src: "img/Tiles/BlockA3.png", id: "imgBlockA3"},
		{src: "img/Tiles/BlockA4.png", id: "imgBlockA4"},
		{src: "img/Tiles/BlockA5.png", id: "imgBlockA5"},
		{src: "img/Tiles/BlockA6.png", id: "imgBlockA6"},
		{src: "img/Tiles/BlockB0.png", id: "imgBlockB0"},
		{src: "img/Tiles/BlockB1.png", id: "imgBlockB1"},
		
		{src: "img/Tiles/Gem.png",      id: "imgGem"},
		{src: "img/Tiles/Exit.png",     id: "imgExit"},
		{src: "img/Tiles/Platform.png", id: "imgPlatform"}
	];

	function ContentManager(stage, width, height) {
		preload = new createjs.PreloadJS();
		//Install SoundJS as a plugin, then PreloadJS will initialize it automatically.
		preload.installPlugin(createjs.SoundJS);
		preload.onError =  handleElementError;
		preload.onFileLoad = handleElementLoad;
	
		downloadProgress = new Text("-- %", "bold 14px Arial", "#FFF");
	    downloadProgress.x = (width / 2) - 50;
	    downloadProgress.y = height / 2;

		this.gemCollected = new Array(8);
		this.imgBackgroundLayers = new Array(3);
		for (var i=0; i < 3; i++) {
			this.imgBackgroundLayers[i] = new Array(3);
		}
		self = this;
		var i, j, bg;
		// copied into this.gemCollected[] when downloaded
		for(i=0; i < 8; i++) {
			manifest.push({
				src: "sounds/GemCollected.mp3|sounds/GemCollected.ogg",
				id: "GemCollected" + i
			});
		}
		// put in this.imgBackgroundLayers[i][j] array when downloaded
		for(i=0; i < 3; i++) {
			for(j=0; j < 3; j++) {
				bg = "Layer" + i + "_" + j;
				manifest.push({src: "img/Backgrounds/" + bg + ".png", id: bg});
			}
		}
		
		// setting the callback method
	    // Triggered once everything is ready to be drawned on the canvas
	    this.SetDownloadCompleted = function (callbackMethod) {
	        ondownloadcompleted = callbackMethod;
	    };
	
		this.StartDownload = function() {			
			preload.loadManifest(manifest);
			stage.addChild(downloadProgress);
			
			Ticker.addListener(this);
	        Ticker.setInterval(50);
		};
		
		// called after every download
		function handleElementLoad(event) {
			if (event.id.indexOf("GemCollected") == 0) {
				self.gemCollected[soundCount++] = event.result;
			} else if (event.id.indexOf("Layer") == 0) {
				var values = event.id.replace("Layer", "").split("_");
				self.imgBackgroundLayers[parseInt(values[0], 10)][parseInt(values[1], 10)] = event.result;
			} else {
				// make the item available
				self[event.id] = event.result;
			}
			
			numElementsLoaded++;
			// If all elements have been downloaded
	        if (numElementsLoaded === manifest.length) {
	            stage.removeChild(downloadProgress);
	            Ticker.removeAllListeners();
	            numElementsLoaded = 0;
	            // we're calling back the method set by SetDownloadCompleted
	            ondownloadcompleted();
	        }
		}
		
		//called if there is an error loading the image (usually due to a 404)
	    function handleElementError(e) {
	        console.log("Error Loading Asset : " + e.src);
			
	    }
	
		// Update methid which simply shows the current % of download
	    this.tick = function() {
	        downloadProgress.text = "Downloading " + Math.round((numElementsLoaded / manifest.length) * 100) + " %";
	        // update the stage:
	        stage.update();
	    };
	}
	window.ContentManager = ContentManager;
} (window));

index.html

<!-- Added PreloadJS & SoundJS -->
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.3.0.min.js"></script>