1

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

       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>

代码的CSS在这里

 canvas{
    border: 1px, solid, black;
}

html{
    background-color: black;
}

#ship{
    width: 100px;
  
}
4

1 回答 1

1

您应该给图像一个相对位置并设置左 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>
于 2020-07-16T04:04:38.220 回答