方块移动（Javascript）

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

var hoi=document.getElementById（'hoi'））
var square=document.getElementById（'box'））
变量播放器={
前10名，
r:10
}
setInterval（函数（）{
square.style.top=player.top+'px'；
square.style.right=player.r+'px；
},3000);
window.addEventListener（'keydown'，函数（e）{
如果（如keyCode===83）{
player.top+=10；
}否则如果（e.keyCode===87）{
player.top-=10；
}否则如果（e.keyCode===68）{
r-=10；
}否则如果（e.keyCode===65）{
r+=10；
}
})

正文{
背景色：#f41ff；
}
#盒子{
背景色：黑色；
边框：纯黑1px；
宽度：50px；
高度：50px；
位置：相对位置；
}

HOI

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

通常使用x和y作为变量，因为您使用的是笛卡尔坐标系。同时检查控制台，因为px字符串缺少结束引号

这是一个简约的版本，你可以了解我做了什么，你的错误在哪里

---

我会看看我能做什么？比如3秒？player.r+'px；}，3000); 您在px->player.r+'px'；}上错过了一个引号，3000);注意，requestAnimationFrame在IE@IvanRodriguezTorres上不起作用，这是真的。

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

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

})