var img = new Image();    //创建一个图片对象
img.src = "test.png"; //下载该路径的图片
img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback(img);
};

describe("showMap.js", function () {describe("init", function () {beforeEach(function () {//不执行onloadspyOn(showMap, "onload").andCallFake(function () {});});afterEach(function () {});it("传入的参数为数组，数组元素包含id和url属性", function () {var urls = [];var temp = [];var i = 0, len = 0;spyOn(window.YYC.Control, "PreLoadImg");temp = [{ id: "ground", url: "ground.png" },{ id: "wall", url: "wall.png" }];for (i = 0, len = temp.length; i < len; i++) {urls.push({ id: temp[i].id, url: "../../../../Content/Bomber/Image/Map/" + temp[i].url });}showMap.init();expect(YYC.Control.PreLoadImg).toHaveBeenCalled();expect(YYC.Control.PreLoadImg.calls[0].args[0]).toBeArray();expect(YYC.Control.PreLoadImg.calls[0].args[0][0].id).toBeDefined();expect(YYC.Control.PreLoadImg.calls[0].args[0][0].url).toBeDefined();});});describe("onload", function () {var dom = null;function insertDom() {dom = $("<div id='progressBar'></div>");$("body").append(dom);};function removeDom() {dom.remove();};beforeEach(function () {insertDom();});afterEach(function () {removeDom();});it("加载完毕后，隐藏加载进度条", function () {expect($("#progressBar").css("display")).toEqual("block");showMap.onload();expect($("#progressBar").css("display")).toEqual("none");});});
});

var showMap = (function () {var _getImg = function () {var urls = [];var temp = [];var i = 0, len = 0;temp = [{ id: "ground", url: "ground.png" }, { id: "wall", url: "wall.png" }];for (i = 0, len = temp.length; i < len; i++) {urls.push({ id: temp[i].id, url: "../../../../Content/Bomber/Image/Map/" + temp[i].url });}return urls;};return {init: function () {           this.imgLoader = new YYC.Control.PreLoadImg(_getImg(), function (currentLoad, imgCount) {$("#progressBar_img_show").progressBar(parseInt(currentLoad * 100 / imgCount, 10));     //调用进度条插件}, YYC.Tool.func.bind(this, this.onload));},onload: function(){$("#progressBar").css("display", "none");alert("complete!");}};window.showMap = showMap;
}());    

      $(function () {showMap.init();});

var bomberConfig = {url_pre: {//showMap.jsSHOWMAP: "../../../../Content/Bomber/"}
};

var _getImg = function () {
...for (i = 0, len = temp.length; i < len; i++) {urls.push({ id: temp[i].id, url: bomberConfig.url_pre.SHOWMAP + temp[i].url });}return urls;
};

            it("绘制一张空地图片", function () {spyOn(showMap, "getContext").andCallFake(function (canvas) {showMap.context = canvas.getContext("2d");spyOn(showMap.context, "drawImage");});showMap.init();//延迟100ms测试
                testTool.asynRun(function () {expect(showMap.context.drawImage).toHaveBeenCalledWith(showMap.imgLoader.get("ground"), 0, 0);}, 100);});

var showMap = (function () {var _createCanvas = function () {// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）var canvas = document.createElement("canvas");//设置宽度、高度canvas.width = 600;canvas.height = 400;document.body.appendChild(canvas);return canvas;};var _getImg = function () {var urls = [];var temp = [];var i = 0, len = 0;temp = [{ id: "ground", url: "ground.png" }, { id: "wall", url: "wall.png" }];for (i = 0, len = temp.length; i < len; i++) {urls.push({ id: temp[i].id, url: bomberConfig.url_pre.SHOWMAP + "image/map/" + temp[i].url });}return urls;};
return {context: null,imgLoader: null,init: function () {var self = this;var canvas = _createCanvas();//为了方便测试，将“取得2d绘图上下文”封装到方法中this.getContext(canvas);   this.imgLoader = new YYC.Control.PreLoadImg(_getImg(), function (currentLoad, imgCount) {$("#progressBar_img_show").progressBar(parseInt(currentLoad * 100 / imgCount, 10));     //调用进度条插件}, YYC.Tool.func.bind(this, this.onload));},onload: function(){$("#progressBar").css("display", "none");this.context.drawImage(this.imgLoader.get("ground"), 0, 0);},getContext: function (canvas) {this.context = canvas.getContext("2d");}};window.showMap = showMap;
}());

describe("画出地图", function () {function spyOnContext(func) {spyOn(showMap, "getContext").andCallFake(function (canvas) {showMap.context = canvas.getContext("2d");func();});};it("获得pattern", function () {spyOnContext(function () {spyOn(showMap.context, "createPattern");});showMap.init();//延迟100ms测试
        testTool.asynRun(function () {expect(showMap.context.createPattern).toHaveBeenCalledWith(showMap.imgLoader.get("ground"), "repeat");expect(showMap._pattern).not.toBeNull();}, 100);});it("缓存pattern", function () {spyOnContext(function () {spyOn(showMap.context, "createPattern");});showMap.init();expect(showMap.context.createPattern.calls.length).toEqual(1);//*延迟100ms后，执行“showMap.init();”。//*然后再延迟100ms后，如果showMap.context.createPattern没有被调用，就验证pattern被缓存了“
testTool.asynRun(function () {showMap.init();}, 100);testTool.asynRun(function () {expect(showMap.context.createPattern.calls.length).toEqual(1);}, 100);});it("画出200*200的空地图片区域，ie、ff显示正常", function () {spyOnContext(function () {spyOn(showMap.context, "fillRect");});showMap.init();testTool.asynRun(function () {expect(showMap.context.fillStyle).toEqual(showMap._pattern);expect(showMap.context.fillRect).toHaveBeenCalledWith(0, 0, 200, 200);}, 100);});
});

onload: function(){$("#progressBar").css("display", "none");if (!this._pattern) {this._pattern = this.context.createPattern(showMap.imgLoader.get("ground"), "repeat");}this.context.fillStyle = this._pattern;this.context.fillRect(0, 0, 200, 200);},

describe("Bitmap.js", function () {var bitmap = null;beforeEach(function () {});afterEach(function () {});describe("构造函数Init", function () {var dom = null;function insertDom() {dom = $("<img id='test_img'>");$("body").append(dom);};function removeDom() {dom.remove();};beforeEach(function () {insertDom();});afterEach(function () {removeDom();});it("获得预加载后的图片对象、宽度、高度、图片的坐标", function () {bitmap = new Bitmap($("#test_img")[0], 2, 3, 4, 5);expect(bitmap.img).not.toBeNull();expect(bitmap.width).toEqual(2);expect(bitmap.height).toEqual(3);expect(bitmap.x).toEqual(4);expect(bitmap.y).toEqual(5);});});
});

(function () {var Bitmap = YYC.Class({Init: function (img, width, height, x, y) {var judge = YYC.Tool.judge;this.img = img;this.width = width;this.height = height;this.x = x;this.y = y;},Private: {},Public: {img: null,width: 0,height: 0,x: 0,y: 0}});window.Bitmap = Bitmap;
}());

(function () {var Bitmap = YYC.Class({Init: function (data) {this.img = data.img;this.width = data.width;this.height = data.height;this.x = data.x;this.y = data.y;},Private: {},Public: {img: null,width: 0,height: 0,x: 0,y: 0}});window.Bitmap = Bitmap;
}());

        it("获得预加载后的图片对象、宽度、高度、图片的坐标", function () {bitmap = new Bitmap({img: $("#test_img")[0],width: 2,height: 3,x: 4,y: 5});expect(bitmap.img).not.toBeNull();expect(bitmap.width).toEqual(2);expect(bitmap.height).toEqual(3);expect(bitmap.x).toEqual(4);expect(bitmap.y).toEqual(5);});

describe("bitmapFactory.js", function () {describe("createBitmap", function () {var dom = null;function insertDom() {dom = $("<img id='test_img'>");$("body").append(dom);};function removeDom() {dom.remove();};beforeEach(function () {insertDom();});afterEach(function () {removeDom();});it("方法存在", function () {expect(bitmapFactory.createBitmap).toBeDefined();});it("如果参数为1个（HTMLImg对象），则bitmap的width、height为HTMLImg的width、height", function () {var bitmap = null,width = 0,height = 0;bitmap = bitmapFactory.createBitmap($("#test_img")[0]),width = $("#test_img").width(),height = $("#test_img").height();expect(bitmap.width).toEqual(width);expect(bitmap.height).toEqual(height);});it("如果参数为3个（HTMLImg对象、width、height），则bitmap的width、height为传入的width、height", function () {var bitmap = null;bitmap = bitmapFactory.createBitmap($("#test_img")[0], 100, 200),expect(bitmap.width).toEqual(100);expect(bitmap.height).toEqual(200);});});
});

(function () {var bitmapFactory = {createBitmap: function (img, width, height) {if (arguments.length == 1) {return new Bitmap(img, img.width, img.height);}else if (arguments.length == 3) {return new Bitmap(img, width, height);}}};window.bitmapFactory = bitmapFactory;
}());

onload: function(){$("#progressBar").css("display", "none");if (!this._pattern) {this._pattern = this.context.createPattern(bitmapFactory.createBitmap(showMap.imgLoader.get("ground")).img, "repeat");}this.context.fillStyle = this._pattern;this.context.fillRect(0, 0, 200, 200);
},

<body>
<script type="text/javascript">
(function () {//图片预加载
    main.init()//清除“main.init()”创建的多余html元素
    function clear() {$("body").children().not("script").remove();};var jasmineEnv = jasmine.getEnv();jasmineEnv.updateInterval = 1000;var htmlReporter = new jasmine.HtmlReporter();jasmineEnv.addReporter(htmlReporter);jasmineEnv.specFilter = function (spec) {return htmlReporter.specFilter(spec);};var currentWindowOnload = window.onload;//延迟300ms执行测试（等待预加载完后执行）
    setTimeout(function () {clear();if (currentWindowOnload) {currentWindowOnload();}execJasmine();}, 1000);function execJasmine() {jasmineEnv.execute();}})();
</script>
</body>

var main = (function () {var _getImg = function () {var urls = [];var temp = [];var i = 0, len = 0;temp = [{ id: "ground", url: "ground.png" }, { id: "wall", url: "wall.png" }];for (i = 0, len = temp.length; i < len; i++) {urls.push({ id: temp[i].id, url: bomberConfig.url_pre.SHOWMAP + "image/map/" + temp[i].url });}return urls;};return {imgLoader: null,init: function () {var game = new Game();this.imgLoader = new YYC.Control.PreLoadImg(_getImg(), function (currentLoad, imgCount) {$("#progressBar_img_show").progressBar(parseInt(currentLoad * 100 / imgCount, 10));     //调用进度条插件
            }, YYC.Tool.func.bind(game, game.onload));}};window.main = main;
}());

(function () {var Game = YYC.Frame.MyClass({Init: function () {this.showMap = new ShowMap();},Private: {},Public: {showMap: null,onload: function () {$("#progressBar").css("display", "none");this.showMap.drawMap();}}});window.Game = Game;
}()); 

(function () {var ground = 1,wall = 2;var mapData = [[ground, wall, ground, ground],[ground, wall, ground, ground],[ground, wall, ground, ground],[ground, wall, ground, ground]];window.mapData = mapData;
}());

(function () {var mapDataOperate = {getMapData: function () {return YYC.Tool.array.clone(mapData);}};window.mapDataOperate = mapDataOperate;
}());

_getMapImg: function (i, j, mapData) {var img = null;switch (mapData[i][j]) {case 1:img = main.imgLoader.get("ground");break;case 2:img = main.imgLoader.get("wall");break;default:break}return img;
}
...
drawMap: function () {var i = 0,j = 0,width =   34,height = 34,row = 4,col = 4,bitmap = null,mapData = mapDataOperate.getMapData(),x = 0,y = 0,img = null;this._createLayer();for (i = 0; i < row; i++) {//注意！//y为纵向height，x为横向widthy = i * height;for (j = 0; j < col; j++) {x = j * width;img = this._getMapImg(i, j, mapData);bitmap = bitmapFactory.createBitmap({ img: img, width: width, height: height, x: x, y: y });this.layer.appendChild(bitmap);}}this.layer.draw();
}

    map: {
...type: {GROUND: 1,WALL: 2}},

    var ground = bomberConfig.map.type.GROUND,wall = bomberConfig.map.type.WALL;

   map: {//方格宽度WIDTH: 34,//方格高度HEIGHT: 34,ROW: 4,COL: 4,type: {GROUND: 1,WALL: 2}},

_getMapImg: function (i, j, mapData) {var img = null,type = bomberConfig.map.type;switch (mapData[i][j]) {case type.GROUND:img = window.imgLoader.get("ground");break;case type.WALL:img = window.imgLoader.get("wall");break;default:break}return img;
}
...
drawMap: function () {var i = 0,j = 0,map = bomberConfig.map,bitmap = null,mapData = mapDataOperate.getMapData(),x = 0,y = 0,img = null;this._createLayer();for (i = 0; i < map.ROW; i++) {//注意！//y为纵向height，x为横向widthy = i * map.HEIGHT;for (j = 0; j < map.COL; j++) {x = j * map.WIDTH;img = this._getMapImg(i, j, mapData);bitmap = bitmapFactory.createBitmap({ img: img, width: map.WIDTH, height: map.HEIGHT, x: x, y: y });this.layer.appendChild(bitmap);}}this.layer.draw();
}