javascript - 方 block 几乎不动(Javascript)

Question

我有这个小型 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>

但是当我运行它时，方 block 的移动有很大的滞后。它也无法横向移动。后来当我编辑它时，它就不再一起移动了。我已经尝试了很多事情，例如更改 setInterval 函数的时间等。我们将不胜感激。

Answer 1

首先使用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';
  }
})