Question

I’m writing a game in javascript, and I want my character to mave under blocks (isometric png images) instead of simply sliding through them. Is there a way to dynamically change my character’s position in the html as he moves up and down layers?

Current progress of the game can be seen here, to show what I want to fix: http://dl.dropbox.com/u/18785762/Rust/index.html

Character Creation and movement code:

function mainchar(){
    var mainchar = new Image();
    mainchar.id = "mainChar";
    mainchar.src = "Images/Char_01.png";
    mainchar.style.top = "62px";
    mainchar.style.left = "0px";
    mainchar.style.position = "absolute";

    window.addEventListener("keydown", movechar);

    document.body.appendChild(mainchar);
}

function movechar(e){
    var event = event || e;

    var mainChar = document.getElementById("mainChar");

    var top = Number(mainChar.style.top.replace("px",""));
    var left = Number(mainChar.style.left.replace("px",""));
    var stepSize = 32;           

    switch (event.keyCode){
        case 37:
        case 65: //left
            left = left -27;
            top = top -13;
        break;
        case 39:
        case 68: // right
            left = left + 27;
            top = top +13;
        break;
        case 38:
        case 87: // up
            left = left +27;
            top = top -13;
        break;
        case 40:
        case 83: // down
            left = left -27;
            top = top +13;
        break;    
    }

    mainChar.style.top = top + "px";
    mainChar.style.left = left + "px";
}

Answer 1

http://jsfiddle.net/yRyLN/1/

I modified the following:

The basic concept is that the z-index is increased by 1 for each step away from the lowest block. All you need to do now is add some collision detection. Fun stuff!

function drawlayer(level, depth) {
    var images = BlockID();

    var top = depth;
    var left = sidecalc(level);
    var mytop = top;
    var myleft = left;
    var y;
    for (y=0; y<level.length; ++y) {
        var row = level[y];
        var x;
        for (x=0; x < row.length; ++x) {
            var c = row.charAt(x);
            if(c != ' ') {
                console.log(mytop + "," + myleft);
                img_create(images[c], mytop, myleft, y + x);
            }
            mytop += 13;
            myleft += 27;
        }
        mytop = top + (y+1)*13;
        myleft = left - (y+1)*27;
    }
}

function img_create(src, top, left, zIndex) {
    console.log(top + "," + left);
    var block = new Image();
    block.src = src;
    block.style.top = top + "px";
    block.style.left = left + "px";
    block.style.position = "absolute";
    block.style.zIndex = zIndex;
    document.body.appendChild( block );
}
function mainchar(){
    var mainchar = new Image();
    mainchar.id = "mainChar";
    mainchar.src = "http://dl.dropbox.com/u/18785762/Rust/Images/Char_01.png";
    mainchar.style.top = "62px";
    mainchar.style.left = "0px";
    mainchar.style.position = "absolute";
    mainchar.style.zIndex = 0;
    window.addEventListener("keydown", movechar);

    document.body.appendChild(mainchar);
}

function movechar(e){
    var event = event || e;

    var mainChar = document.getElementById("mainChar");

    var top = Number(mainChar.style.top.replace("px",""));
    var left = Number(mainChar.style.left.replace("px",""));
    var stepSize = 32;           
    var zIndex = Number(mainChar.style.zIndex);

    switch (event.keyCode){
        case 37:
        case 65: //left
            left = left -27;
            top = top -13;
            zIndex -= 1;
        break;
        case 39:
        case 68: // right
            left = left + 27;
            top = top +13;
            zIndex += 1;
        break;
        case 38:
        case 87: // up
            left = left +27;
            top = top -13;
            zIndex -= 1;
        break;
        case 40:
        case 83: // down
            left = left -27;
            top = top +13;
            zIndex += 1;
        break;    
    }

    mainChar.style.zIndex = zIndex;
    mainChar.style.top = top + "px";
    mainChar.style.left = left + "px";
}

EDITED: http://jsfiddle.net/yRyLN/2/

Fixed a small layering issue.