map preview

test.js

var mapObj = {
    data: {},
    _getBlock: function(i,j){
        return this.data[i * this.elW + j];
    },
    blockSize: {w:0,h:0},
    width: 0,
    height: 0,
    elW:0,
    elH:0,
    getBlock: function(x,y){
        return this._getBlock(
            Math.floor(x / this.blockSize.w),
            Math.floor(y / this.blockSize.h)
        );
    },
    getBlocks: function(x,y,w,h){
        var elX = Math.ceil( w / this.blockSize.w);
        var elY = Math.ceil( h / this.blockSize.h);
        var i = Math.floor(x / this.blockSize.w);
        var j = Math.floor(y / this.blockSize.h);

        var blocks = new Array(elX * elY);
        var m = 0;

        for(var k=0; k<elY; k++)
        {
            for(var l=0; l<elX; l++)
            {
                blocks[m] = this._getBlock(
                    i + l,
                    j + k
                );
                m++;
            }
        }

        return blocks;
    }
}

mapObj.genRandomMap = function(elW,elH, blockW, blockH){
    this.data = new Array(elW*elH); // performance
    var k=0;
    for(var i=0; i<elW; i++){
        for(var j=0; j<elH; j++)
        {
            this.data[k] = new Block(i,j);
            k++;
        }
    }
    this.blockSize = {w:blockW, h:blockH};
    this.width = blockW * elW;
    this.height = blockH * elH;
    this.elW = elW;
    this.elH = elH;
}

function Block(i,j){
    this.background = get_random_color();
    this.i = i;
    this.j = j;
    this.html = i + ':' + j;
}

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}