Javascript 如何使图像移动到侧面，取决于按下了哪个键？

我在画布上加载了一个图像，但是它复制了一个，有两个。而且图像也不会在命令下移动。请帮忙

   let img = document.getElementById("ship");
let player = {
  x: 375,
  y: 550,
  w: 50,
  h: 50,
};
requestAnimationFrame(draw);

function draw() {
  ctx.drawImage(img, 5, 5);
  ctx.img(player.x, player.y, player.w, player.h);
  //Draw

  //Request another frame
  requestAnimationFrame(draw);
}

document.addEventListener("keydown", move);

function move(event) {
  if (event.code == "ArrowRight") {
    player.x = player.x + 50;
  }
}

---

您需要使用按键代码才能移动，它们在这里

down arrow  37
up arrow    38
right arrow 39
down arrow  40

将您的代码更改为以下内容，它应该可以工作

function move(event) {
  if (event.code === 39) {
    player.x = player.x + 50;
  }
}

不确定为什么有两个图像，但以下几行会导致问题

  ctx.drawImage(img, 5, 5);
  ctx.img(player.x, player.y, player.w, player.h);

你只需要这个

ctx.drawImage(img, player.x, player.y, player.w, player.h);

ctx.img

也不是有效的上下文函数