Question

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

这就是我所拥有的：

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

Answer 1

您应该可以通过修改el.style.left和el.style.top移动它，其中el是对定位DIV的引用。

Answer 2

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

Answer 3

首先，您的内部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';
    }
};

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

Answer 4

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

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

Answer 5

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

使用按键vanilla javascript动态移动div

5 个答案: