0

我正在浏览器中构建一个简单的 Pirates 克隆，并使用没有库的常规 javascript 来尝试学习基础知识。我正在尝试在游戏板的绝对定位 div 内移动一个相对定位的 div，即我的游戏精灵。我有所有代码到实际移动 div 的地步，我只是找不到更改 div 相对位置的命令。

这是我所拥有的：

function move(e){
    var x=e.keyCode;
    var keychar=String.fromCharCode(x);
    if (x === "a") {
       // What goes here?
    }
};
4

5 回答 5

1

您应该能够通过修改el.style.left和el.style.topwhereel是对您定位的引用来移动它DIV。

于 2012-10-19T18:33:45.350 回答
1

更改（增加或减少）divElement.style.left像素值。

于 2012-10-19T18:33:57.143 回答
1

首先，你的内部 div 应该有position: absolute，而不是relative. 外面的也可以有。然后只需设置style.top和style.left每次击键：

function move(e){
    var x=e.keyCode;
    var keychar=String.fromCharCode(x).toLowerCase();
    var div = document.getElementById('mydiv');
    if (x === "a") {
        var currentLeft = parseInt(div.style.left, 10);
        // to move left:
        div.style.left = (currentLeft-5) + 'px';
    }
};

这应该可行，但是您的精灵可能不会像您期望的那样顺利移动。在这种情况下，您可能需要一个动画循环和一个按键缓冲区。

于 2012-10-19T18:35:38.167 回答
0

你可以改变style.left和style.top

var d = document.getElementById("idselector");
d.style.left = "30px";
d.style.top = "40px";
于 2012-10-19T18:34:45.827 回答
0 
var div = document.getElementById("divId");

if(x == "a"){        
    div.position.left = (parseInt(div.style.left) - 10) + "px";
}
else if(x == "d"){
    div.position.left = (parseInt(div.style.left) + 10) + "px";
}

// similar code for other keys with div.style.top
于 2012-10-19T18:37:13.850 回答