为什么我的 Javascript canvas 在键盘输入时没有移动？

Question

所以最近我进入了 Javascript，我看了一些教程并阅读了一个 Whosebug 问题，问了一个类似的问题。

出于某种原因，我的 Canvas 对象不会移动，我似乎做了很多其他示例中的所有事情。

我的代码：

  document.addEventListener('keydown', function(event){
    switch (event.keyCode) {
      case 87:
      alert("w");
        break;
      case 65:
      alert("a");
        break;
      case 83:
      alert("s");
        break;
      case 68:
      moveRight();
        break;
      case 38:
      alert("up");
          break;
      case 37:
      alert("right");
        break;
      case 39:
      alert("left");
        break;
      case 40:
      alert("down");
        break;
  }
})

function moveRight() {
  var element = document.getElementById("plr");
  element.style.left = parseInt(element.style.left) - 5 + 'px';
}

// w = 87
// a = 65
// s = 83
// d = 68
// up = 38
// right = 37
// left = 39
// down = 40

#bg{
  background-color: blue;
  height: 700px;
  width: 1200px;
  position: relative;
  left: -10px;
  top: -10px;
}
#plr{
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50px;
  top: 300px;
}

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body onload="">
    <canvas id="bg"></canvas>
    <canvas id="plr"></canvas>
  </body>
</html>

我知道我在某处犯了 dumb/small 错误，但我找不到它。感谢您提供任何帮助。

Answer 1

in element.style.left = parseInt(element.style.left) - 5 + 'px' try (parseInt(element.style.left.slice(0, -2)) - 5).toString() in the change were slicing the 'px' part out then converting string to int, after the operation x - 5 where converting the output to string and concatenating它与 'px'.

Answer 2

以下解决了您的问题...

  <canvas id="plr" style="left: 50px;top: 300px;"></canvas>

它不能像你那样工作的原因是你没有初始化 style.left;

在 css 中设置 left 不会将该值放入 style.left

您正在执行以下操作：

console.log("left=" + document.getElementById("player").style.left);

#player {left:100px}

<canvas id="player">

控制台将只打印“left=”，没有任何值。

因此，当您执行以下操作时

element.style.left = parseInt(element.style.left) - 5 + 'px';

你最终做的是 parseInt("") - 5 + 'px' 它给你 "NaNpx" 因此不会移动。

您可以通过直接将其应用于 canvas 来初始化 style.left，如下所示：

console.log("left=" + document.getElementById("player").style.left);

<canvas id="player" style="left:100px">

控制台输出会变成left=100px

这意味着您现有的移动播放器代码现在可以使用了。

如果不想在 HTML 中设置左侧样式，则替代方法是使用 element.getBoundingClientRect();并从中计算左边

参见：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 3

此语句中的 moveRight 函数有两个相关问题：

element.style.left = parseInt(element.style.left) - 5 + 'px';

最初未设置 div 的样式 - CSS class 定义元素的位置 (50px) 但 element.style.left 尚未设置设置
即使它是在开始时设置的，它也会是这种形式：50px - 即不是数字，所以 parseInt 不会给我们 50。

无论 style.left 属性是否设置，我们想知道的是 canvas 相对于其父项的位置。我们可以使用 offsetLeft（参见 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node

因为这给了我们一个实际数字，我们可以从中减去 5，然后添加 px 字符串并使用它来设置 style.left:

  element.style.left = (element.offsetLeft - 5) + 'px';

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
 <!--   <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    -->
    <meta charset="utf-8">
    <title></title>
    <style>
    #bg{
  background-color: blue;
  height: 700px;
  width: 1200px;
  position: relative;
  left: -10px;
  top: -10px;#bg{
  background-color: blue;
  height: 700px;
  width: 1200px;
  position: relative;
  left: -10px;
  top: -10px;
}
#plr{
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50px;
  top: 300px;
}
}
#plr{
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50px;
  top: 300px;
}
    </style>
    
  </head>
  <body>
    <canvas id="bg"></canvas>
    <canvas id="plr"></canvas>
<script>
   document.addEventListener('keydown', function(event){
    switch (event.keyCode) {
      case 87:
      alert("w");
        break;
      case 65:
      alert("a");
        break;
      case 83:
      alert("s");
        break;
      case 68:
      moveRight();
        break;
      case 38:
      alert("up");
          break;
      case 37:
      alert("right");
        break;
      case 39:
      alert("left");
        break;
      case 40:
      alert("down");
        break;
  }
})

function moveRight() {
  var element = document.getElementById("plr");
  element.style.left = (element.offsetLeft - 5) + 'px';
}

// w = 87
// a = 65
// s = 83
// d = 68
// up = 38
// right = 37
// left = 39
// down = 40
</script>

  </body>
</html>

为什么我的 Javascript canvas 在键盘输入时没有移动？

Why does my Javascript canvas not move on keyboard input?

html

javascript

css

keyboard-events