这 HTML 运行不应该正确吗？

Question

我用 editor.cloxy.net 编写了这个程序（更多关于我的个人资料中的网站），但我清理了它以使其更易于阅读。我对 HTML/CSS/JavaScript 感兴趣大约一年了，但是制作一个简单的程序仍然很困难。我最近了解了关键代码并在下面制作了脚本，但是它不起作用所以我注册了一个帐户并提出了问题。该代码没有 return 错误，但它没有按照我的预期进行：当玩家按下左键时向左移动，当玩家按下右键时向右移动，等等。这是代码:

<!DOCTYPE html>
<html>
<head>
    <title>A test</title>
    <style>
         #a {
           position: absolute;
         }
    </style>
</head>
<body>
    <button id="a">thing</button> 
    <script>
     var x = a.style.left
     var y = a.style.top
     document.onkeydown = function(e) {
         switch (e.keyCode) {
             case 37: //left
                 x -= 10
                 a.style.left = x + "px";
                 break;
             case 38: //up
                 y -= 10
                 a.style.top = y + "px";
                 break;
             case 39: //right
                 x += 10
                 a.style.left = x + "px";
                 break;
             case 40: //down
                 y += 10
                 a.style.top = y + "px";
                 break;
         }
       };
    </script>
</body>
</html>

我希望得到一个有用的答案，就像我在其他问题上看到的那样。请尝试并提供帮助:)

Answer 1

您需要正确 parse/初始化您的 x 和 y 值：

var x = parseInt(a.style.left) || 0;
var y = parseInt(a.style.top) || 0;

document.onkeydown = function(e) {
  switch (e.keyCode) {
    case 37: //left
      x -= 10
      a.style.left = x + "px";
      break;
    case 38: //up
      y -= 10
      a.style.top = y + "px";
      break;
    case 39: //right
      x += 10
      a.style.left = x + "px";
      break;
    case 40: //down
      y += 10
      a.style.top = y + "px";
      break;
  }
};

#a {
  position: absolute;
}

<button id="a">thing</button>

Answer 2

var x = a.style.left
var y = a.style.top

在这里你的变量 x 和 y 是字符串类型（数字字符串）。要将数字字符串转换为数字，我们必须使用 parseInt() 函数。

我希望你现在清楚了:)

这 HTML 运行不应该正确吗？

Shouldn't this HTML run correctly?

html

javascript

keyboard-events

这 HTML 运行 不应该正确吗？

Shouldn't this HTML run correctly?

html

javascript

keyboard-events

这 HTML 运行不应该正确吗？