javascript - 方形几乎不动(Javascript)

我有这个小的HTML应用程序：

var hoi = document.getElementById('hoi')
var square = document.getElementById('box')
var player = {
	top: 10,
    r: 10
}
setInterval(function(){
	square.style.top = player.top + 'px';
    square.style.right = player.r + 'px;
},3000);
window.addEventListener('keydown', function(e){
	if(e.keyCode===83){
    player.top += 10;
  } else if(e.keyCode===87){
  	player.top -= 10;
  } else if(e.keyCode===68){
  	player.r -= 10;
  } else if(e.keyCode===65){
  	player.r += 10;
  }
})

body {
  background-color: #f41fff;
}

#box {
  background-color: black;
  border: solid black 1px;
  width: 50px;
  height: 50px;
  position: relative;
}

<h1 id='hoi'>HOI</h1>
<div id='box' class='box'></div>

但是当我运行它时，广场移动时滞后很大。它也无法横向移动。后来，当我编辑它时，它就停止了一起移动。我已经尝试了很多事情，例如更改setInterval函数的计时等。非常感谢您的帮助。

最佳答案

首先使用requestAnimationFrame，因为它比setInterval的动画平滑得多。

按照惯例，由于要使用笛卡尔坐标系，因此请使用x和y作为变量。另外，请检查您的控制台，因为您在px字符串中缺少右引号。

这是一个简约的版本，因此您可以了解我所做的事情以及您的错误所在。

https://jsfiddle.net/9tntp2qq/

var hoi = document.getElementById('hoi')
var square = document.getElementById('box')
var position = null;
var x = 0;

function animate() {
  if(position == 'right') {
    x += 1;
    square.style.left =  x + 'px';
  }

  requestAnimationFrame(animate)
}
animate();
window.addEventListener('keydown', function(e){
 if(e.keyCode) {
    position = 'right';
  }
})

关于javascript - 方形几乎不动(Javascript)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37094771/