Javascript 我试图制作一个移动的对象,但代码不是';我什么也不做。I';我想知道是什么问题?

Javascript 我试图制作一个移动的对象,但代码不是';我什么也不做。I';我想知道是什么问题?,javascript,html,css,function,Javascript,Html,Css,Function,我对JavaScript、HTML和CSS非常陌生。我已经多次阅读了我的代码,但我似乎不知道是什么原因使它无法工作。它没有返回任何错误,但没有按预期工作。我想在屏幕上画一个正方形,在WASD的印刷机上移动。我让方块出现了,但按下WASD时什么也没发生。我觉得解决办法一定很简单,但我想不出来 <!DOCTYPE HTML> <html> <head> </head> <body onkeypress="move(event)"

我对JavaScript、HTML和CSS非常陌生。我已经多次阅读了我的代码,但我似乎不知道是什么原因使它无法工作。它没有返回任何错误,但没有按预期工作。我想在屏幕上画一个正方形,在WASD的印刷机上移动。我让方块出现了,但按下WASD时什么也没发生。我觉得解决办法一定很简单,但我想不出来

<!DOCTYPE HTML>
<html>
<head>
</head>
<body onkeypress="move(event)">
  <style>
  #block {
    width: 50px;
    height: 50px;
    background-color: #555;
    margin-top: 0px;
    margin-left: 0px;
  }
  </style>
  <div id="block"class="block"></div>
  <script>
  var blockX = 0;
  var blockY = 0;
  var keyPressed = 0;
  function move(event) {
    keyPressed = event.keyCode;
    if (keyPressed === 87 || 83) {
      moveY();
    }
    else if (keyPressed === 65 || 68) {
      moveX();
    }
  }
  function moveX() {
    if (keyPressed === 65) {
      blockX -= 3;
      document.getElementById("block").style.marginLeft = blockX + "px"
    }
    else if (keyPressed === 68) {
      blockX += 3
      document.getElementById("block").style.marginLeft = blockX + "px"
    }
  }
  function moveY() {
    if (keyPressed === 87) {
      blockY += 3;
      document.getElementById("block").style.marginTop = blockY + "px"
    }
    else if (keyPressed === 83) {
      blockY -= 3;
      document.getElementById("block").style.marginTop = blockY + "px"
    }
  }
  </script>
</body>
</html>

#挡块{
宽度:50px;
高度:50px;
背景色:#555;
边际上限:0px;
左边距:0px;
}
var blockX=0;
var-blockY=0;
按下var键=0;
功能移动(事件){
keyPressed=event.keyCode;
如果(按键===87 | | 83){
moveY();
}
否则如果(按键===65 | | 68){
moveX();
}
}
函数moveX(){
如果(按键===65){
blockX-=3;
document.getElementById(“block”).style.marginLeft=blockX+“px”
}
否则如果(按键===68){
blockX+=3
document.getElementById(“block”).style.marginLeft=blockX+“px”
}
}
函数moveY(){
如果(按键===87){
块状+=3;
document.getElementById(“block”).style.marginTop=blockY+“px”
}
否则如果(按键===83){
块状-=3;
document.getElementById(“block”).style.marginTop=blockY+“px”
}
}

您需要像这样比较按下键的变量
(按键===87 | |按键===83)

此外,您还可以使用以下功能监听按键事件:

document.addEventListener(“向下键”),函数(事件){
移动(事件)
});
var blockX=0;
var-blockY=0;
按下var键=0;
功能移动(事件){
keyPressed=event.keyCode;
如果(按键===87 | |按键===83){
moveY();
}否则如果(按键===65 | |按键===68){
moveX();
}
}
函数moveX(){
如果(按键===65){
blockX-=3;
document.getElementById(“block”).style.marginLeft=blockX+“px”
}否则如果(按键===68){
blockX+=3
document.getElementById(“block”).style.marginLeft=blockX+“px”
}
}
函数moveY(){
如果(按键===87){
块状+=3;
document.getElementById(“block”).style.marginTop=blockY+“px”
}否则如果(按键===83){
块状-=3;
document.getElementById(“block”).style.marginTop=blockY+“px”
}
}
#块{
宽度:50px;
高度:50px;
背景色:#555;
边际上限:0px;
左边距:0px;
}

按下键签入
移动
将传递第一个
上的所有键(如果
)。这些条件应该类似于
keyPressed===87 | | keyPressed===83
。另外,
event.keyCode
不是标准的,也许你应该使用新的。你可以但不应该使用
event.keyCode
。不推荐使用:也不推荐使用
keypress
事件:改用
keyup
keydown