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

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 に答える