JavaScript
var canvas,ctx,ctxW = 500,ctxH = 500;
window.onload = function(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
loadResources(map.texture,function(){
map.draw(ctx);
});
}
var map = {
blockWidth: 20,
blockHeight: 20,
texture:
["http://i72.fastpic.ru/big/2015/0608/c6/bbef7fb0893e59d9c35304bcf676fac6.png","http://i69.fastpic.ru/big/2015/0608/0e/5f7cdf77084a2c6a68787a543ff4560e.png","http://i71.fastpic.ru/big/2015/0608/30/c9327461d1e7ac15a8bd975730a9ac30.png","http://i70.fastpic.ru/big/2015/0608/4f/631094325700fc7e0f172caf4800104f.png"],
draw: function(ctx){
for(var i = 0;map.view.length;i++)
for(var j = 0; j < map.view[i].length; j++){
var img = new Image();
img.src = map.texture[map.view[i][j]];
ctx.drawImage(img,j * map.blockWidth,i * map.blockHeight,map.blockWidth,map.blockHeight);
}
}
};
map.view =
[
[0,0,0,0,0,0,0,0,0,0,0,0,0],//и т.д.
[0,0,0,0,0,0,0,0,0,0,0,0,0],// 0 - белый фон, 1 - чисто земля
[0,0,0,0,0,0,0,0,0,2,2,2,2],//2 - земля с травом 3 - вода
[0,2,2,2,2,3,3,3,2,1,1,1,1],
[2,1,1,1,1,3,3,3,3,1,1,1,1],
[1,1,1,1,1,1,1,3,3,3,3,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1]
];
function loadResources(arr,func){//функция загрузки внешних ресурсов arr - массив ссылок, func - функция которая вызовется после загрузки всех ресурсов
var loadStatus = false;
loadStatus = {count: arr.length, loaded: 0, percent: 0};//count - общее количество ресурсов, loaded - сколько загружено ресурсов, percent сколько загружено в процентах
for(var i = 0; i < arr.length; i++){
var tmp = new Image();
tmp.src = arr[i];
tmp.onload = function(){
loadStatus.loaded++;
loadStatus.percent = (loadStatus.loaded * 100)/loadStatus.count;
if(loadStatus.loaded >= loadStatus.count)
func();
}
}
return loadStatus;
}