Javascript 通过击键动态移动div

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

以下是我所拥有的：

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

---

您应该能够通过修改

el.style.left

和

el.style.top

来移动它，其中

el

是对您定位的

DIV的引用
您应该能够通过修改
el.style.left
和
el.style.top
来移动它，其中
el
是对您定位的引用
DIV
更改（增加或减少）以像素为单位的
divElement.style.left
值。
更改（增加或减少）以像素为单位的
divElement.style.left
值。
您可以更改
style.left
和
style.top

var d = document.getElementById("idselector");
d.style.left = "30px";
d.style.top = "40px";

您可以更改
style.left
和
style.top

var d = document.getElementById("idselector");
d.style.left = "30px";
d.style.top = "40px";

首先，您的内部div应该具有
位置：绝对
，而不是
相对
。外面的那个也可以。然后只需在每次击键时设置
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';
    }
};

这应该是可行的，但你的雪碧可能不会像你预期的那样平稳移动。在这种情况下，您可能需要一个动画循环和一个击键缓冲区
 首先，您的内部div应该具有
位置：绝对
，而不是
相对
。外面的那个也可以。然后只需在每次击键时设置
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';
    }
};

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

这应该是可行的，但你的雪碧可能不会像你预期的那样平稳移动。在这种情况下，您可能需要一个动画循环和一个击键缓冲区
 那应该是
if（keychar==“a”）
那应该是
if（keychar==“a”）
你是对的，我完全颠倒了绝对/相对的东西，我刚刚意识到它。非常感谢。你说得对，我完全颠倒了绝对/相对的概念，我才意识到这一点。谢谢。
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