Question

我不知道如何让人物在html屏幕上移动。这是我正在制作的游戏。如果有人想出办法，请发表评论。非常感谢您的帮助。我也尝试过不同的方式 - Move an image with the arrow keys using JavaScript - 但这对我不起作用。

<img id="player" src="http://weknowyourdreams.com/images/smile/smile-09.jpg" 
     style="position: absolute; left: 0; top: 0;" height="15" width="15">

由于

Answer 1

运行以下代码段。它应该根据WASD键向上，向左，向下或向右移动笑脸。

根据您的游戏，您可能需要考虑使用不同的按键和不同的数量，以便在按下方向键时移动笑脸。

var playerImage = document.getElementById('player');
var valueToMoveBy = 5;

window.addEventListener('keydown', function (event) {
  switch (event.keyCode) {
    case 83:
      playerImage.style.top = parseInt(playerImage.style.top, 10) + valueToMoveBy + 'px';
      break;
    case 87:
      playerImage.style.top = parseInt(playerImage.style.top, 10) - valueToMoveBy + 'px';
      break;
    case 65:
      playerImage.style.left = parseInt(playerImage.style.left, 10) - valueToMoveBy + 'px';
      break;
    case 68:
      playerImage.style.left = parseInt(playerImage.style.left, 10) + valueToMoveBy + 'px';
      break;
    default:
      return;
  }
});

<img id="player" src="http://weknowyourdreams.com/images/smile/smile-09.jpg" style="position: absolute; left: 0; top: 0;" height="15" width="15">

可能让你失望的一件事是如何将计算应用于像素。你不能简单地做5px + 5px，所以你必须首先使用parseInt()将5px转换为5，然后添加要移动的数量。然后，您可以将结果转换为px字符串并将其应用于相应的样式，如上所示。

如何使用HTML，Javascript和CSS中的箭头键移动图像

1 个答案: