Question

I can draw my map according to the formula on Drawing Isometric game worlds . But how can i find the x-y of one tile according to it’s position on map layer div?

For being clear, my tile’s left style is 1036px and top style is 865px. According to those css properties how can find the tile’s x and y position according to map?

Tile width is 200 and height is 100.

Many Thanks.

---

My javascript code is like that:

this.drawTiles = function(min_x, max_x, min_y, max_y) {
    if (min_x < 0) min_x = 0;
    if (min_y < 0) min_y = 0;
    if (max_x < 0) max_x = thisObj.MAXSIZE;
    if (max_y < 0) max_y = thisObj.MAXSIZE;
    if (max_x > this.mapSize - 1) max_x = this.mapSize - 1;
    if (max_y > this.mapSize - 1) max_y = this.mapSize - 1;
    if (min_x < this.mapSize - 1) min_x = max_x - thisObj.MAXSIZE;
    if (min_y < this.mapSize - 1) min_y = max_y - thisObj.MAXSIZE;
    var appendLayer = thisObj.maplayer;

    this.capMapDataObj.getTiles(min_x, max_x, min_y, max_y, function(JSONResp) {
        var tiles = JSON.parse(JSONResp);
        for (var x=min_x; x<max_x+1; x++) {
            for (var y=min_y; y<max_y+1; y++) {
                var tile = tiles[x][y];
                var xpos = (y * thisObj.tile_width / 2) + (x * thisObj.tile_width / 2);
                var ypos = (x * thisObj.tile_height / 2) - (y * thisObj.tile_height / 2);
                var zin1 = 100 + parseInt(x) + parseInt(y);
                var elem = '<div style="position:absolute;top:'+ypos+'px;left:'+xpos+'px;z-index:'+zin1+';width:200px;height:200px;background-image:url(images/'+tile[4]+');background-position:bottom;background-repeat:no-repeat;bottom:0px;text-align:center;" id="'+x+'_'+y+'"><div style="padding-top:140px;">'+x+' - '+y+'</div></div>\n';
                if (document.getElementById(x+'_'+y) == undefined)
                    $(elem).appendTo(appendLayer);
            }
        }
    });
}

So xpos and ypos variables are the css positions of each tile layer. When i click the Map Layer, I wanted to calculate the tile’s isometric x-y coordinates.

Answer 1

I’ve solved the problem.

tileX = (yPos / tile_height) + (xPos / tile_width);

tileY = (xPos / tile_width) - (yPos / tile_height);