个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个圆圈，我想用 WASD 移动它。到目前为止，我已经让它工作了，但是第一个 A 或 W 运动会突然而不是平滑地改变圆圈位置(你会在 jsfiddle 中明白我的意思)。当我按 D(或 S)而不是 A 时，它会将圆圈发射到无处可去。按 A 和 W 1 次后，它会按预期工作。我需要有人可以解决突然的移动，使其变得更平滑，谢谢。
注意:尽量保持简单(如果你能做到的话)，这样我就可以轻松理解它。
https://jsfiddle.net/CarelessInternet/vkau9085/ (忽略颜色)
HTML 代码:
<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.getCompulatedStyle；这仍然返回一个字符串，例如“220px”，因此您需要使用 parseFloat 转换为数字:
var computedStyle = window.getComputedStyle(document.getElementById("circle")),
x = parseFloat(computedStyle.left),
y = parseFloat(computedStyle.top);
关于javascript - 第一次单击时，圆圈会突然改变位置并进行 a 或 w 移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59201558/
25
4
0
我是一名优秀的程序员,十分优秀！