Javascript 更改图像'；s的位置基于按下的键？_Javascript

Javascript 更改图像'；s的位置基于按下的键？

javascript

Javascript 更改图像'；s的位置基于按下的键？,javascript,Javascript,这里的代码应该获取元素并将其向左或向右移动。但是，该图像仍然存在 var posX = 100; document.getElementById("ship").addEventListener("keydown", moveShip); function moveShip(event) { if (event.key == "ArrowLeft") { posX -= 2; } else if (eve

这里的代码应该获取元素并将其向左或向右移动。但是，该图像仍然存在

       var posX = 100;

document.getElementById("ship").addEventListener("keydown", moveShip);
function moveShip(event) {
  if (event.key == "ArrowLeft") {
    posX -= 2;
  } else if (event.key == "ArrowRight") {
    posX += 2;
  }
}

HTML的代码是非常基本的，这里并没有添加太多内容

    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>ship</title>
  </head>

  <body>
    <img id="ship" src="spaceship.png" />
    <canvas id="myCanvas"></canvas>
    <script src="extensions.js"></script>
    <script src="main.js"></script>
  </body>
</html>

您应该给图像一个相对位置，并设置left CSS属性来移动它

<img id="ship" src="spaceship.png" style="position: relative;"/>
<script>
var posX = 100;
var ship = document.getElementById("ship");
ship.style.left = posX;
ship.addEventListener("keydown", moveShip);
function moveShip(event) {
  if (event.key == "ArrowLeft") {
    posX -= 2;
  } else if (event.key == "ArrowRight") {
    posX += 2;
  }
  ship.style.left = posX;
}
</script>


var-posX=100；
var ship=document.getElementById（“ship”）；
ship.style.left=posX；
ship.addEventListener（“键控”，moveShip）；
功能移动船舶（事件）{
如果（event.key==“箭头左”）{
posX-=2；
}else if（event.key==“ArrowRight”）{
posX+=2；
}
ship.style.left=posX；
}

请同时添加HTML和CSS代码。

<img id="ship" src="spaceship.png" style="position: relative;"/>
<script>
var posX = 100;
var ship = document.getElementById("ship");
ship.style.left = posX;
ship.addEventListener("keydown", moveShip);
function moveShip(event) {
  if (event.key == "ArrowLeft") {
    posX -= 2;
  } else if (event.key == "ArrowRight") {
    posX += 2;
  }
  ship.style.left = posX;
}
</script>