我有一个圆圈，我想用WASD移动。到目前为止，我已经让它工作了，但是第一个 A 或 W 运动突然而不是平滑地改变了圆圈位置(你会明白我在 jsfiddle 中的意思(。当我按 D(或 S(而不是 A 时，它会将圆圈发射到无处可去。按下 A 和 W 1 次后，它按预期工作。我需要有人可以修复突然的运动，让它变得更流畅，谢谢。
注意：尽量保持简单(如果你能做到的话(，这样我就可以稍微困难地理解它。
https://jsfiddle.net/CarelessInternet/vkau9085/(忽略颜色(
网页代码：
<html>
<body>
<div id="circle"></div>
</body>
</html>
一些JS代码(请参阅jsfiddle以获取所有代码(：
var up = false,
down = false,
left = false,
right = false,
x = document.getElementById("circle").style.left,
y = document.getElementById("circle").style.top,
div = document.getElementById("circle");
document.addEventListener('keydown', press);
function press(e) {
if (e.which == 87) {
up = true;
} else if (e.which == 65) {
left = true;
} else if (e.which == 83) {
down = true;
} else if (e.which == 68) {
right = true;
}
}
document.addEventListener('keyup', release);
function release(i) {
if (i.which == 87) {
up = false;
} else if (i.which == 65) {
left = false;
} else if (i.which == 83) {
down = false;
} else if (i.which == 68) {
right = false;
}
}
一些CSS代码：
#circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid white;
background-color: black;
position: fixed;
left: 220px;
top: 125px;
overflow: auto;
}
尝试在声明 x 和 y 的值后立即记录它们，您将看到问题：它们不是数字。它们是空字符串，当强制转换为数字时，它们将转换为 0。因此，您的初始x - 5，例如，返回 -5。这是因为HTMLElement.style只为您提供内联样式值，而不是从 CSS 样式表计算的值。
要获得计算样式，您可以使用window.getComputedStyle; 这仍然返回一个字符串，例如"220px"，因此您需要使用 parseFloat 转换为数字：
var computedStyle = window.getComputedStyle(document.getElementById("circle")),
x = parseFloat(computedStyle.left),
y = parseFloat(computedStyle.top);