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>

但是当我跑步时，广场移动了很多滞后。它也无法侧身移动。后来当我编辑它时，它只是停止了一起移动。我已经尝试了很多东西，比如改变我的setInterval函数的时间等等。非常感谢帮助。

Answer 1

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

作为惯例，使用x和y作为变量，因为您正在使用笛卡尔坐标系。还要检查您的控制台，因为您错过了px字符串的右引号。

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

https://jsfiddle.net/9tntp2qq/

INSERT INTO `projects-permissions` 
(`id`, `project`, `org`) 
SELECT null, slug, ID FROM `orgs`
WHERE `slug` = 'foo';

Answer 2

https://jsfiddle.net/dzzgd3qo/

var hoi = document.getElementById('hoi')
var square = document.getElementById('box')
var player = {
    top: 10,
    r: 10
}

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;
  }

  document.getElementById('box').style.top = player.top + 'px';
  document.getElementById('box').style.right = player.r + 'px';

})

广场几乎不动（Javascript）

2 个答案: