0

我正在用javascript编写游戏，我希望我的角色在块（等距png图像）下移动，而不是简单地滑过它们。有没有办法在他上下移动层时动态改变我的角色在 html 中的位置？

可以在这里看到游戏的当前进度，以显示我想要修复的内容：http: //dl.dropbox.com/u/18785762/Rust/index.html

角色创建和移动代码：

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";
}
4

2 回答 2

1

简单：应该在字符前面的每个块都应该在 css 中有一个大于字符的 z-index（默认为z-index: 0）

因此，只需为您想要位于顶部的块提供一个 css 属性：z-index: 1

于 2012-08-24T17:41:29.100 回答
1

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

我修改了以下内容：

基本概念是距离最低块每一步，z-index 增加 1。您现在需要做的就是添加一些碰撞检测。好玩的东西！

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";
}

编辑：http : //jsfiddle.net/yRyLN/2/

修复了一个小的分层问题。

于 2012-08-24T18:15:08.693 回答